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>"]
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 get this error even if "image/copy.svg" is properly declared in the manifest.json
Denying load of
chrome-extension://pofbdjeepddggbelfghnndllidnalpde/images/copy.svg.
Resources must be listed in the web_accessible_resources manifest key
in order to be loaded by pages outside the extension.
If I go to chrome-extension://pofbdjeepddggbelfghnndllidnalpde/images/copy.svg I can successfully see the loaded image.
css/style.css
.copy-icon{
content:url('chrome-extension://__MSG_##extension_id__/images/copy.svg');
height: 16px;
width: auto;
margin-right: 0px;
}
html
<button alt="Copy to clipboard" class="clipboard" data-clipboard-text="TEXT">
<img class="copy-icon"></img>
</button>
manifest.json
"manifest_version": 3,
"content_scripts": [
{
"matches": ["https://*.example.com/*"],
"js": ["contents/results.js"],
"css": ["css/style.css"],
"run_at": "document_end"
}
],
"web_accessible_resources": [{
"resources": ["images/copy.svg"],
"matches": [],
"extension_ids": []
}],
The matches key should specify where to expose these resources.
You can use <all_urls> to expose them everywhere.
"web_accessible_resources": [{
"resources": ["images/copy.svg"],
"matches": ["<all_urls>"],
}],
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 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?
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"