CSS injection using chrome extension

Question

So I have been redesigning some websites just for my own usage using chrome extension.

My goal is to inject css into a website so it would be using as a main css or it would replace some main css's codes.

What I have is the fallowing:

JS:

var style = document.createElement('link');
style.rel = 'stylesheet';
style.type = 'text/css';
style.href = chrome.extension.getURL('styles.css');
(document.head||document.documentElement).appendChild(style);

Manifest file:

{
  "name": "Extension",
  "version": "0",
  "description": "",
  "manifest_version": 2,
  "permissions": ["tabs", "https://www.youtube.com/*"],
    "content_scripts": [
    {
        "matches": [ "https://www.youtube.com/*"],
        "js": ["inject.js"],
        "all_frames": true
    }
  ],
  "web_accessible_resources": ["styles.css"]
}

And of course my css file named styles.css

The problem I am having is once I load the page, it loads in an old style and then just before it finished loading my custom css hits the road and then the styles are changed of the website. How can I make so the styles for the website would be changed as soon as it starts loading the content so the changes will not be seen whatsoever.

There is a gif image to show you what I mean by that:

Perhaps you could inspect the extension Stylish

Ross Presser
– Ross Presser

2016-02-05 21:43:41 +00:00
Commented Feb 5, 2016 at 21:43 — Ross Presser
– Ross Presser, Commented Feb 5, 2016 at 21:43

Xan · Accepted Answer · 2016-02-06 12:46:34Z

1

You don't need to do programmatic injection (which happens, by default, at "run_at": "document_idle", and that is exactly your problem).

Just change your manifest to this:

{
  "name": "Extension",
  "version": "0",
  "description": "",
  "manifest_version": 2,
  "permissions": ["tabs", "https://www.youtube.com/*"],
  "content_scripts": [
    {
        "matches": [ "https://www.youtube.com/*"],
        "css": ["styles.css"],
        "all_frames": true
    }
  ]
}

If you still need to do it programmatically, then you need to add "run_at": "document_start"

answered Feb 6, 2016 at 12:46

Xan

77.9k18 gold badges198 silver badges219 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Undefined Over a year ago

Thank you, I will try your suggestion!

Undefined Over a year ago

It works, but most of my css code is now ignored for some reason.. Edited: have to add !important in every line where my code is skipped. It works now fine!

Collectives™ on Stack Overflow

CSS injection using chrome extension

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related