How do I use an image in CSS? I looked up older threads of StackOverflow and the official documentation but could not find anything to help me. Why is it so hard to use an image?
This is how I use the image in CSS:
background-image: url('chrome-extension://gkiofiinipjoiemamkbdhonmljhagnce/images/arrows-up-blue.png');
Directory structure:
coolextension:
---manifest.json
---images
------arrows-up-blue.png
...
Manifest:
{
"manifest_version": 3,
"name": "Reading time",
"version": "1.0",
"description": "Add the reading time to Chrome Extension documentation articles",
"web_accessible_resources": [
{
"resources": ["images/arrows-up-blue.png"],
"matches": ["https://www.cooldomain.de/*"]
}
],
"content_scripts": [
{
"css": ["styles/content.css"],
"js": ["scripts/content.js"],
"matches": [
"https://www.cooldomain.de/*"
]
}
]
}
The error:
Can someone help me?
Related
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'm new to chrome extensions. My target is to develop simple extensions that changes the page background color on load.
I have problem which you can see in the picture.
The problem
The Folder locally
{
"manifest_version": 2,
"name": "My Cool Extension",
"version": "0.1"
}
"content_scripts": [
{
"css": [ "main.css" ],
"matches": [
"<all_urls>",
],
}
]
The Css
*{background-color:black}
How to solve the problem, where is my problem?
I'm attempting to get an external CSS file to load in Chrome. To do this, it would seem I have to edit an existing Chrome extension's manifest.json file and minimally add the following to the content_scripts node:
{
"css": [ "Theme.css" ]
}
From what I understand, this will add the Theme.css file (which is in the same root directory as the manifest.json file) to all pages accessed in Chrome. I saw that I could additionally qualify the json block by including a matches key-value pair, but I've omitted that here.
This doesn't appear to be working because I'm not seeing the styles. To start, my Theme.css file contains this:
span {
color: green !important;
}
Additionally, I've confirmed that the extension I added it to (AngularJS Batarang FWIW) is recognized as "Enabled" by Chrome.
I also tried the solution explained here where you load the CSS as an accessible resource via a JS file, but that doesn't work either.
What am I missing? Or is there an easier way to do this?
FWIW: here is the entire manifiest:
{
"background": {
"scripts": [ "background.js" ]
},
"content_scripts": [ {
"js": [ "inject.js" ],
"matches": [ "<all_urls>" ],
"run_at": "document_start"
}, {
"matches": [ "http://*/*", "https://*/*"],
"css": [ "Theme.css" ]
} ],
"description": "Extends the Developer Tools, adding tools for debugging and profiling AngularJS applications.",
"devtools_page": "devtoolsBackground.html",
"icons": {
"128": "img/webstore-icon.png",
"16": "img/webstore-icon.png",
"48": "img/webstore-icon.png"
},
"key": "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC9hsXx3+F75DyGto3mkm0FB2sycQzyMqXQAySn2Qj67vIHFMSrVZ0ItPzGnWJwoRoaDI7cQF9c/WLDpLJQwGe5CV5z84MueOME3e45JJEwN+YsW5ufEavmp+pk1c9h/Wyi8bMoSWJGIrOG72wCTFOdnyN6nocA0dm4w7UWsxLLEQIDAQAB",
"manifest_version": 2,
"minimum_chrome_version": "21.0.1180.57",
"name": "AngularJS Batarang",
"page_action": {
"default_icon": {
"19": "img/icon19.png",
"38": "img/icon38.png"
},
"default_title": "AngularJS Super-Powered"
},
"permissions": [ "tabs", "<all_urls>" ],
"update_url": "https://clients2.google.com/service/update2/crx",
"version": "0.10.6",
"web_accessible_resources": [ "dist/hint.js" ]
}
You have a problem with your content_scripts key, you should wrap your matches, css and js together under content_scripts key, like this:
"content_scripts": [
{
"matches": ["http://*/*"],
"css": ["./Theme.css"],
"js": ["./inject.js"]
}
],
Also, don't forget to write ./ before your CSS/JS File to point to your root directory!
You did not register any pages to apply the CSS file to. The matches section is required.
If you want to apply it to all pages, use "matches": ["<all_urls>"]
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:
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"