My CSS is not getting injected through my content script
The style sheet is actually injected, but not applied, because other styles override the rules. To get the rules to work, you have some options:
- Increase the specificity of your CSS rules.
Suffix every rule with
!important
:#test {
margin: 0 10px !important;
background: #fff !important;
padding: 3px !important;
color: #000 !important;
}Inject the CSS via a content script:
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"]
}The last key,
web_accessible_resources
is necessary when manifest version 2 is active, so that the CSS file can be read from a non-extension page.
How to inject CSS using content script file in Chrome extension?
You could add to the manifest's permissions field; See web_accessible_resources. So you would add this to the manifest:
, "web_accessible_resources": [
"fix.css"
]
See also "Programmatic injection". and insertCSS()
.
For most applications, forget all that createElement
code and just add the CSS file to the manifest:
"content_scripts": [
{
"matches": ["http://www.google.com/*"],
"css": ["fix.css"],
"js": ["script.js"]
}
],
although I understand that you don't want to do that in this exact instance.
Chrome extension content script is not injecting in to most pages
Your content script is probably loading only on pages where the pathname is just /
. Add an extra *
at the end of your url patterns:
"matches": ["http://*/*", "https://*/*"]
Background.js Doesn't Find Content Injected with Content Script
Wrong document
in
var divHTML = document.getElementById('infoDiv').innerHTML;
Please read the Architecture Overview first. Your background script is executed in a separate HTML document, and as such won't "see" the page in the tab.
You'll need to pass the value to the content script to do something with a visible page. You'll probably need Messaging.
Related Topics
How to Automatically Crop and Center an Image
Css: Hover One Element, Effect For Multiple Elements
How to Make React CSS Import Component-Scoped
Difference Between Px, Em and Ex
How Do Min-Content and Max-Content Work
How to Store Inherit Value Inside a CSS Variable (Aka Custom Property)
Height:100% VS Min-Height:100%
Background Image for Select (Dropdown) Does Not Work in Chrome
Why Does the Linear-Gradient Disappear When I Make an Element Position:Absolute
How to Change the Height of an Image in CSS :Before/:After Pseudo-Elements
Sass Variable in CSS Calc() Function
Repeat Table Headers in Print Mode
Wait For Fonts to Load Before Rendering Web Page
When Will an ≪A≫ Tag Not Inherit Color Attribute of Parent Tag