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?
Related
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?
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"
}
}
How do I load custom CSS file to use with content_css property?
I have been searching around the web, but I can't seem to get the answer to this question or at least I couldn't understand it.
So I have a public editorConfig obj which gets called in the init function of the HTML
<editor
[init]="editorConfig"
[(ngModel)]="articleObj.text" name="text" id="text"
(ngModelChange)="onChangeWordCount()">
</editor >
public editorConfig = {
plugins: 'lists advlist image code media link table wordcount',
menubar: false,
statusbar: false,
branding: false,
browser_spellcheck: true,
content_css: 'src/assets/content.css',
This loads TinyMCE and my editor works great. I followed the docs and the scripts load with the lazy loading.
"assets": [
"src/favicon.ico",
"src/assets",
{ "glob": "**/*", "input": "node_modules/tinymce/skins", "output": "/skins/" },
{ "glob": "**/*", "input": "node_modules/tinymce/themes", "output": "/themes/" },
{ "glob": "**/*", "input": "node_modules/tinymce/plugins", "output": "/plugins/" }
],
However, I am not able to load my src/assets/content.css file. I keep getting a 404 (file not found).
I have added the path to my angular.json file
"styles": [
"src/styles.scss",
"src/assets/content.css"
],
--- Update ---
I updated the angular.json file:
"assets": [
"src/favicon.ico",
"src/assets",
{ "glob": "**/*", "input": "node_modules/tinymce/skins", "output": "/skins/" },
{ "glob": "**/*", "input": "node_modules/tinymce/themes", "output": "/themes/" },
{ "glob": "**/*", "input": "node_modules/tinymce/plugins", "output": "/plugins/" },
{ "glob": "**/*", "input": "src/assets", "output": "/src/assets" }
],
"styles": [
"src/styles.scss"
],
Then in the editor component, I am updating content_css property as:
content_css: 'src/assets/content.css',
Now the file is getting loaded and I am no longer getting a 404.
However, my CSS code doesn't seem to update the toolbar as I wanted. The change I was hoping for, was to change the toolbar background color.
CSS Code
/* toolbar */
.mce-toolbar-grp {
background-color:#efeeee !important; /* uses !important or override .mce-panel background-color/image */
background-image: none !important;
}
Which I got from here: Changing background toolbar colour and text colour in tinymce editor
In short, I am not sure if my CSS is wrong or is the configuration/loading of the file which is wrong.
Old question but for those interested, above fail is due to the fact that you can't use a scss here. You need to convert it to css before.
It looks like you are loading your content_css from a relative URL. When you enter a relative URL for content_css, it is resolved in relation to the URL of the HTML file that includes TinyMCE, not relative to TinyMCE itself (source).
So, your URL of src/assets/content.css is getting called as http://example.com/src/assets/content.css.
You can either set the content_css part of your config to where that CSS file will be after it is outputted from the bundler, or host that CSS file outside of the bundling process, and set its URL directly.
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"