How to Inject CSS Styles into a Webpage Using a Content Script?

Trouble Injecting CSS Styles into a Webpage Using a Content Script

A common issue encountered by developers using content scripts to inject CSS is the failure to have the CSS styles applied to the webpage. Despite being injected, these styles may be overridden by other rules.

To resolve this, multiple approaches can be taken:

1. Increase CSS Specificity

Increase the specificity of CSS rules to make them more predominant.

2. Use "!important"

Suffix each rule with "!important" to force their application, overriding other rules.

3. Inject CSS via Content Script

Inject the CSS using a content script. Create a JavaScript file (e.g., myScript.js) and modify the manifest.json:

myScript.js:

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

manifest.json:

{
  "name": "Extension",
  "version": "0",
  "description": "",
  "manifest_version": 2,
  "permissions": ["tabs", "http://*/*", "https://*/*", "file:///*/*"],
  "content_scripts": [
    {
        "matches": [ "http://*/*", "https://*/*", "file:///*/*"],
        "js": ["myScript.js"],
        "all_frames": true
    }
  ],
  "web_accessible_resources": ["myStyles.css"]
}

Note: When using manifest version 2, the "web_accessible_resources" key is essential to allow access to the CSS file from a non-extension page.

The above is the detailed content of How to Inject CSS Styles into a Webpage Using a Content Script?. For more information, please follow other related articles on the PHP Chinese website!