question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Extension sometimes fails to run when custom CSS is injected

See original GitHub issue

I’ve recently added some custom CSS to hide the “Explore repositories” sidebar on the dashboard. This makes the extension fail regularly with the following error (Firefox 88.0.1, RGH 21.5.19):

TypeError: document.head is null refined-github.js:1913:30

The line in question: https://github.com/sindresorhus/refined-github/blob/83f233677157d21fb6ae11958fa45aa7ee99d65a/source/features/index.tsx#L91

Since this only happens (afaik) when opening new tabs (regardless of the URL), I’m guessing the extension tries to inject the CSS before the <head> exists and thus execution stops. This was probably introduced by #4352.

Edit: can confirm the bug goes away when removing the custom CSS.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:3
  • Comments:5 (5 by maintainers)

github_iconTop GitHub Comments

3reactions
fregantecommented, May 21, 2021

Delays never work. We need to check the dom first, that’s it. No timers will fix it. I wonder if we should just use contentScript.register to inject it. It’d be perfect on Firefox but I don’t know about Chrome (polyfilled). Its worth a try

2reactions
yakov116commented, May 20, 2021

I also had issues load too fast. I think we should up the delay to 15-20ms

Read more comments on GitHub >

github_iconTop Results From Across the Web

Why can't my extension insert CSS into this tab?
My extension sometimes does not successfully inject my custom CSS. I log both the error and the tab object for inspection, and here's...
Read more >
How can I force my css styles when I visit a website?
I have created an alternative - Styler extension - it's lightweight and has minimal style but powerful. You can add custom CSS and...
Read more >
Can css be styleInjected in library mode? #1579 - vitejs/vite
The problem is injecting the style assumes a DOM environment which will make the library SSR-incompatible. If you only have minimal css, the ......
Read more >
Custom CSS,JS injector on pages
This extension will help to inject a temporary CSS style into your page and on reload you can experience the effect of the...
Read more >
Chrome extension | Custom script & CSS injection | Code on git
In this tutorial, you will learn how to create a chrome extension that will inject custom javascript and css in a webpage.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found