This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
My CSS is not getting injected through my content script
I've been trying to make a Chrome Extension to change the background color of google to black every time it's loaded in a tab.
I have the following in my manifest.json:
{
"name": "Background to black",
"manifest_version": 2,
"version": "1.0",
"description": "Google black",
"permissions": ["tabs", "http://www.google.com/*"],
"browser_action": {
"default_icon": "icon.png"
},
"content_scripts": [
{
"matches": ["http://www.google.com/*"],
"css": ["backgroundtoblack.css"],
"run_at": "document_start",
"all_frames": true
}
]
}
and this in my backgroundtoblack.css:
body{
background: #000000;
}
However it doesn't work for me and I don't understand what I'm doing wrong.
This isn't about the manifest file, it's about your CSS file. Replacing your CSS with this,
html, body {
background: #000000 !important;
}
The extension should work now. (Works when testing locally).
Note: I had to change your matches a bit, because I use HTTPS Everywhere. You might have to change it if Chrome is loading using HTTPS by default.
Related
I have been making a chrome extension to change the color of the youtube subscribe button but it does not seem to be working
here is my code
manifest.json:
`
{
"manifest_version": 3,
"name": "Red Subsccribe Button",
"description": "Brings back the red subscribe button",
"version": "1.0",
"content_scripts": [{
"css": ["styles.css"],
"matches": ["https://*.youtube.com/watch/*"]
}]
}
styles.css:
`
.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled {
color: #080808;
background-color: #c00;
}
I have looked though many other posts but with no luck. Nothing resulted upon loading the page.
I ended up making sure the solution worked and can confirm the follow set up works:
manifest.json:
{
"manifest_version": 3,
"name": "Red Subscribe Button",
"description": "Brings back the red subscribe button",
"version": "1.0.0",
"content_scripts": [{
"matches": ["https://*.youtube.com/*"],
"css": ["styles.css"]
}]
}
styles.css:
.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled {
color: #080808 !important;
background-color: #c00 !important;
}
There were 2 problems: The content script URL was targeting "https://.youtube.com/watch/" which was malformed as YouTube does not have another "/" after watch.
The other problem was that the stylesheet would be injected right away, before YouTube's stylesheets are injected which means YT's definitions for the button class you are targeting would receive importance and override your styles.
To solve this, just add !important to the styles you want to set.
So I am trying to make an extension for google where on google.com and google.com/search etc the background changes right and I got it working for google.com but not /search:
This is the manifest.json file:
{
"manifest_version": 3,
"name": "Simple Google Backgrounds",
"version": "1.0",
"description": "A simple Extension that makes it so you can change your google background to one of our themes. It only will work on google.com websites",
"icons": {
"16": "/icons/icon1.png",
"48": "/icons/icon2.png",
"128": "/icons/icon3.png"
},
"author": "Stephan Teig",
"content_scripts": [
{
"matches":["https://www.google.com/*"],
"css": ["main.css"]
}
]
}
And this is the main.css script
html body {
background: url(https://wallpaperaccess.com/full/1554103.jpg);
}
I tried to make an extenion and expected the /* to work
I found a solution, first, I added google.com/search as one website on the .json file and then I made my chrome light mode and it works but it does not look good... because it doesn't change the header that google has. but it technically works now.
I have found a few versions of my same question here , here, and here but when I try the suggested solutions I am still unsuccessful
I notice I am only able to apply inline css rules in my current extension. When I try bringing those rules into a separate css file I can't get the rules linked to the elements on the page.
I have played around mostly with the manifest.json file assuming my problem is somewhere there. I have tried including only css, matches, and js lines of the content_scripts. I have played around with different permissions. I didn't originally have the web accessible resources section.
Here is my manifest.json file as it currently looks:
"manifest_version": 2,
"name": "food project",
"version": "0.1",
"description": "My cool extension.",
"content_scripts": [
{
"css": ["./content.css"],
"matches": ["https://www.target.com/*", "file:///*/*"],
"js": ["./content.js"],
"all_frames": true
}
],
"permissions": ["tabs", "*://*/*"],
"browser_action": {
"default_popup": "popup.html",
"default_title": "Demo extension",
"default_icon": "/images/logo.png",
"default_badge": "Media Rep"
},
"web_accessible_resources": ["./content.css"]
and in my content.js file:
function addButtonElement() {
const newButton = document.createElement("button");
newButton.textContent = "Click me";
newButton.className = "buttonn";
newButton.style.background = "blue"
newButton.style.position = "relative";
newButton.style.top = "12.5em";
newButton.style.left = "50em";
newButton.style.zIndex = 8000;
newButton.style.color = "white";
newButton.style.width = "10%";
newButton.style.height = "30%";
newButton.style.borderRadius = "20px";
newButton.style.padding = "0.5em";
newButton.style.boxSizing = "border-box";
const currentButton = document.getElementById("headerMain");
document.body.insertAdjacentElement("afterbegin", newButton, currentButton);
}
document.body.onload = addButtonElement;
content.css file:
.buttonn {
border: solid 4px red !important;
}
I have other functionality in with the js file that is working, and like I said, inline css works. Not really sure why I can't seem to get rules from my CSS file to apply from that file.
one page I am trying this on is
https://www.target.com/p/general-mills-cheerios-honey-nut-breakfast-cereal-19-5oz/-/A-14765766#lnk=sametab
Solved! (kind of)
I think there was maybe a caching issue on my machine...? I had been working on this late into the night yesterday and added in the !important command as one of my last steps to be sure my inline rules weren't taking precedence over the CSS.
When I came back to this project in the evening today it all worked!
The power of walking away did it again.
I am new at posting here, so not sure if best practice is to delete the question entirely, but I am tempted to leave it to remind others in the future that taking a break is sometimes the answer :)
Some of the lines added into my manifest.json file above weren't necessary to use my .css file
This is the version I have now that it is working as hoped:
{
"manifest_version": 2,
"name": "food project",
"version": "0.1",
"description": "My cool extension.",
"content_scripts": [
{
"css": ["./content.css"],
"matches": ["https://www.target.com/*"],
"js": ["./content.js"]
}
],
"permissions": ["tabs"],
"browser_action": {
"default_popup": "popup.html",
"default_title": "Demo extention",
"default_icon": "/images/logo.png",
"default_badge": "Media Rep"
}
}
We need to customize IBM Verse on prem for our corporate design. The documentation show how to add customized inline css. But that's not maintainable for larger customizations. I want to load css files, that could be generated by sass for keeping development DRY.
I tried the following in the example from the official docs:
[
{
"name": "CSS Extension Sample",
"description": "The sample shows how to customize Verse UI",
"title": "CSS Extension Sample",
"extensions": [
{
"type": "com.ibm.verse.ext.css",
"name": "CSS extension sample",
"payload": {
"url": "{extensionPath}/samples/test.css"
}
}
],
"services": ["Verse"]
}
]
And I also did some experiments with css import like this:
"payload": {
"css": "#import url('{extensionPath}/samples/test.css');"
}
with corresponding include of the file in manifest.json
"web_accessible_resources": ["page.js", "applications.json", "style.css"]
But test.css doesn't get loaded. The code itself works when using inline css:
"payload": {
"css": ".ics-scbanner {background-color:green!important;}"
}
How can I load the css file instead of inline css?
I am creating a simple Chrome extension that blocks the "Google" logo image on the Google homepage using a content script. I followed the directions on the content-script page, but it still does not seem to be working. Can anyone spot what I'm doing wrong?
EDIT: I have tested it with other website like flickr.com and it works perfectly. I've also searched through the Google homepage CSS and cannot figure out which CSS rule is overriding my CSS. Any ideas? How can I make a stronger CSS injection so that no other CSS can override mine?
manifest.json:
{
"manifest_version": 2,
"name": "Google Logo Blocker",
"description": "This extension blocks the Google logo image.",
"version": "1.0",
"content_scripts": [
{
"matches": ["http://www.google.com/"],
"css": ["blocker.css"]
}
],
"browser_action": {
"default_icon": "icon.png"
}
}
blocker.css:
img {
display: none !important;
}
Your code works for me. You are using straight USA Google, not an international version, right?
Just in case, change your matches to:
"matches": ["http://*.google.com/", "https://*.google.com/"],
And target the logo more directly. This will work in most cases:
#hplogo {
display: none !important;
}
For full-on, international Google support, change the content_scripts portion of your manifest to:
"content_scripts": [ {
"matches": ["http://*/*", "https://*/*"],
"include_globs": ["http://*.google.*/*", "https://*.google.*/*"],
"css": ["blocker.css"]
} ],
Optionally also using exclude_matches and/or exclude_globs as desired.
If it still doesn't work, state the usual:
Exact URL
Chrome version
OS
Other extensions active
It is <img> tag in modern version and is a <div> tag with background image for international version. Regardless, of the differences they bear same id = hplogo, so this can work for you.
Click for Larger Image
Use
#hplogo{
display:none !important;
}
it will remove google Logo.