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.
So on the website, the PayPal checkout page is implemented by using this iframe documentation, where it offers the customization on css of iframe with given css key:value pairs in JSON string. you can see that here
Now, can someone help me if I am passing the JSON string correctly, because it doesnt work for some reason. i need to make the labels white in color
<script type="application/javascript">
var styles = {
"pppLabel": {
"color": "#fff"
},
"pppCheckboxLabel": {
"color": "#fff"
}
};
var ppp = PAYPAL.apps.PPP({
"approvalUrl": "<?=$approvalUrl?>",
"placeholder": "ppplusDiv",
"payerEmail": "<?=$_POST['email']?>",
"payerFirstName": "<?=$_POST['name']?>",
"payerLastName": "<?=$_POST['surnamename']?>",
"payerPhone": "<?=$_POST['telephone']?>",
"payerTaxId": "<?=$_POST['cpf']?>",
"miniBrowser":false,
"merchantInstallmentSelection":12,
"merchantInstallmentSelectionOptional":true,
"mode": "live",
"payerTaxIdType": "BR_CPF",
"language": "pt_BR",
"country": "BR",
"css": styles,
});
I have made changes like
"css": JSON.stringify(styles)
but it doesnt work and give this in console
screenshot
code pic
web page pic
doesn't work and show some messages in console, i am adding a screenshot as an answer to my question screenshot
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.
I have a simple Chrome extension that uses the content script feature to modify a website. More specifically, the background-image of said website.
For some reason I can't seem to be able to use local images, even though they are packed in the extension.
body {
background: #000 url('image.jpg') !important;
background-repeat: repeat !important;
}
That's it, the simplest CSS... but it won't work. The browser doesn't load the image.
Chrome has i18n support that provides the ability to reference your extension in your CSS. I keep my images in an image folder in the extension, so reference assets in the CSS like so:
background-image:url('chrome-extension://__MSG_##extension_id__/images/main.png');
Your image URL should look like chrome-extension://<EXTENSION_ID>/image.jpg
You would be better off replacing css through javascript. From docs:
//Code for displaying <extensionDir>/images/myimage.png:
var imgURL = chrome.extension.getURL("images/myimage.png");
document.getElementById("someImage").src = imgURL;
There are a lot of older answers and solutions to this question.
As of August 2015 (using Chrome 45 and Manifest version 2), the current "best practice" for linking to local images within Chrome Extensions is the following approach.
1) Link to the asset in your CSS using a relative path to your extension's images folder:
.selector {
background: url('chrome-extension://__MSG_##extension_id__/images/file.png');
}
2) Add the individual asset to to the web_accessible_resources section of your extension's manifest.json file:
"web_accessible_resources": [
"images/file.png"
]
Note: This method is suitable for a few files, but doesn't scale well with many files.
Instead, a better method is to leverage Chrome's support for match patterns to whitelist all files within a given directory:
{
"name": "Example Chrome Extension",
"version": "0.1",
"manifest_version": 2,
...
"web_accessible_resources": [
"images/*"
]
}
Using this approach will allow you to quickly and effortlessly use images in your Chrome Extension's CSS file using natively supported methods.
One option would be to convert your image to base64:
and then put the data right into your css like:
body { background-image: url(data:image/png;base64,iVB...); }
While this might not be an approach you would want to use when regularly developing a webpage, it is a great option due to some of the constraints of building a Chrome Extension.
My solution.
With Menifest v2 you need to add web_accessible_resources to the file and then use chrome-extension://__MSG_##extension_id__/images/pattern.png as the url in your css file.
CSS:
#selector {
background: #fff url('chrome-extension://__MSG_##extension_id__/images/pattern.png');
}
Manifest.json
{
"manifest_version": 2,
"name": "My Extension Name",
"description": "My Description",
"version": "1.0",
"content_scripts": [
{
"matches": ["https://mydomain.com/*"],
"css": ["style.css"]
}
],
"permissions": [
"https://mydomain.com/"
],
"browser_action": {
"default_icon": {
"19": "images/icon19.png",
"38": "images/icon38.png"
},
"default_title": "My Extension Name"
},
"web_accessible_resources": [
"images/pattern.png"
]
}
p.s. Your manifest.json might look different to this one.
This CSS-version-only works in extension environment (app page, popup page, background page, option page) as well as content_scripts CSS file.
In .less file, I always set a variable at the beginning:
#extensionId : ~"__MSG_##extension_id__";
Then later, if you want to refer to extension-local-resource like images, use:
.close{
background-image: url("chrome-extension://#{extensionId}/images/close.png");
}
One thing to mention is that in the web_accessible_resources you can use wildcards. So instead of
"images/pattern.png"
You can use
"images/*"
Just to clarify, according to the documentation, every file in an extension is also accessible by an absolute URL like this:
chrome-extension://<extensionID>/<pathToFile>
Note the <extensionID> is a unique identifier that the extension system generates for each extension. You can see the IDs for all your loaded extensions by going to the URL chrome://extensions. The <pathToFile> is the location of the file under the extension's top folder; it's the same as the relative URL.
...
Changing background image in CSS:
#id { background-image:
url("chrome-extension://<extensionID>/<pathToFile>"); }
Changing background image in CSS through JavaScript:
document.getElementById('id').style.backgroundImage =
"url('chrome-extension://<extensionID>/<pathToFile>')");
Changing background image in CSS through jQuery:
$("#id").css("background-image",
"url('chrome-extension://<extensionID>/<pathToFile>')");
For manifest v3, there are some modifications:
chrome.extension.getUrl() -> chrome.runtime.getUrl()
"web_accessible_resources" -> "web_accessible_resources.resources"
fill in "web_accessible_resources.matches"
2, 3 like this:
"web_accessible_resources": [{
"resources": ["images/logo.png"],
"matches": ["<all_urls>"],
}],
reference:
https://developer.chrome.com/docs/extensions/mv3/intro/mv3-migration/#web-accessible-resources
Those answers above are great but your extension gets a new id every time it gets installed, so putting the id manually doesn't work if you gonna make it public at some point.
Here's my solution using manifest v.3:
//Get the url from some file within your extension's folder and store it on a global variable
var url = chrome.runtime.getURL('my_extension/img/Icon.svg');
//Take off the last part from the url string
url = url.replace('img/Icon.svg', '');
Now replace the src attribute for a custom one on every img tag and keep the file path as it's value like this:
<img ref-file="img/IconStop.svg" alt="">
Then run this function after loading the html:
loadImgs = function () {
$("img[ref-file]").each(function() {
var ref_file = $(this).attr('ref-file');
url = url + ref_file;
$(this).attr('src', url);
});
}