How can i change the CSS file declared in content_scripts (manifest.json)?
I need to change it from background.js (style.css to style2.css)
Is it possible to do that?
The manifest.json:
{
"manifest_version": 2,
/* ... */
/* ... */
"background": {
"scripts": [
"files/script/jquery-3.2.1.min.js",
"files/script/background.js"
]
},
"permissions": [
"tabs",
"http://*/*",
"https://*/*",
"background",
"browsingData",
"cookies",
"webRequest",
"management",
"storage"
],
"content_scripts": [{
"matches": ["*"],
"css": [
"files/css/style.css"
]
}]
}
You cannot change declared CSS in the manifest file.
But in order to run custom CSS programmatically from background script, you can use chrome.tabs.insertCSS.
// use a file
chrome.tabs.insertCSS({file: "style2.css"});
// use a CSS string
chrome.tabs.insertCSS({code: "body { background: red }" });
Related
I have a chrome extension,
I am trying to catch webRequest for example onBeforeRequest, but it doesn't fire on some web requests. Is it even possible to not have a onBeforeRequest fired on some http or https website?
or I am confusing the url patterns somewhere?
This is the code in background.js. beforeRequest is never executed on some websites.
Not if I try on this website for example: https://discourse.mozilla.org/t/onbeforerequest-event-not-fired-firefox-is-started-with-command-line-options/33557
Is it possible that url patterns
"<all_urls>" or "*://*/*" don't match with the URL?
chrome.webRequest.onBeforeRequest.addListener(
function(details){
beforeRequest(details.tabId);
}, {urls: ["<all_urls>"],types: ["main_frame"]}, [ "blocking" ]);
This is the manifest.json
{
"name": "Example",
"version": "1.0",
"manifest_version": 2,
"description": "Prototype",
"browser_action": {
"default_icon": "img/grey-16.png",
"default_popup": "popup/index.html"
},
"permissions": [
"tabs",
"background",
"<all_urls>",
"activeTab",
"webRequest",
"webRequestBlocking",
"storage",
"downloads",
"webNavigation"
],
"content_scripts" : [
{
"js": ["content_scr.js"],
"run_at": "document_start",
"all_frames" : true,
"matches": ["*://*/*"]
}
],
"background": {
"scripts" : ["background.js"],
"persistent": true
},
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}
I have a chrome extension that uses browser actions, as I want it to run on all sites, bar 1 (matching ".pannus." which is an internal dev site).
I can't work out how to achieve this, I have tried using the manifest and regex in PageStateMatcher.
manifest.json
{
"name": "...",
"description": "...",
"version": "0.0.2",
"permissions": ["contextMenus", "declarativeContent"],
"background": {
"persistent": false,
"scripts": ["background.js"]
},
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["content.js"],
"css": [ "style.css" ]
}],
"browser_action": {
"default_icon": {
...
}
},
"icons": {
...
},
"manifest_version": 2
}
If I add "exclude_matches": ["*://*.pannus.*"], here, I get an error:
Invalid value for 'content_scripts[0].exclude_matches[0]': Empty path.
I have also tried:
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: {
schemes: ['https', 'http'],
urlMatches: '^((?!.pannus.).)*$'
},
})
],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
But I get the error:
Could not parse regular expression '^((?!.pannus.).)*$': invalid perl operator: (?!
What is the best way to disable my chrome extension on certain sites? Or, failing that, not inject the extensions content script into the excluded hosts?
This is my first chrome extension so please forgive me for asking such a novice question. My extension currently only works on 'developer.chrome.com' (icon has color) but I would like it to work on amazon.com (icon is gray). From googling, I didn't see anyone else come up with the same problem so I'm guessing it must be a mistake on my end. Here is my manifest.json:
{
"name": "Reviews Extension",
"version": "1.0",
"description": "Get additional reviews from third party retailers",
"permissions": [
"https://api.walmartlabs.com/",
"https://www.amazon.com/",
"activeTab",
"declarativeContent",
"storage"
],
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": ["content.js"]
}
],
"options_page": "options.html",
"background": {
"scripts": [
"background.js"
],
"persistent": false
},
"page_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
}
},
"icons": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
},
"manifest_version": 2
}
UPDATE:
When I fiddled with background.js on the pageUrl: {hostEquals: 'developer.chrome.com'}, I found when I delete the URL, it no longer works on developer.chrome.com. But when I changed it to https://www.amazon.com/ in place of developer.chrome.com, it didn't work on amazon's main page either.
'use strict';
chrome.runtime.onInstalled.addListener(function () {
chrome.storage.sync.set({ color: '#3aa757' }, function () {
console.log('The color is green.');
});
chrome.declarativeContent.onPageChanged.removeRules(undefined, function () {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [new chrome.declarativeContent.PageStateMatcher({
pageUrl: { hostEquals: 'developer.chrome.com' },
})],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
});
UPDATE 2:
Got it working by change the pageURL in background.js. It had to be formatted in a very specific way: www.amazon.com, NOT https://www.amazon.com, amazon.com, or any other variations. I am still unable to add multiple websites by adding commas in between, any ideas there?
Try adding more conditions and using hostContains or urlContains instead of hostEquals.
For example:
chrome.declarativeContent.onPageChanged.removeRules(undefined, function () {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { hostContains: '.developer.chrome.com' },
}),
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { hostContains: '.amazon.com' },
})
],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
Try adding '*' to expand which pages of Amazon your extension will work on.
For example:
"https://*.amazon.com/*"
https://developer.chrome.com/apps/match_patterns
I have a chrome extension. Below is the manifest.
{
"name": "example",
"description": "sample",
"version": "1.0",
"permissions": [
"tabs",
"activeTab"
],
"options_ui": {
"page": "options.html",
"chrome_style": true
},
"background": {
"scripts": ["background.js"]
},
"content_scripts": [{
"matches": ["https://www.google.co.in/*"],
"js": ["jquery-1.8.0.min.js", "content_script.js"]
}],
"browser_action": {
"default_title": "Title.",
"default_icon": "abc.png",
"default_popup": "popup.html"
},
"manifest_version": 2
}
popup.html
<html >
<head>
<title>ABC</title>
<script src="./popup.js"></script>
</head>
<body id="body" style="width:400px;max-height:80%;">
</body>
</html>
popup.js
document.addEventListener('DOMContentLoaded', function () {
<my code here>
});
When there is a single click on the icon the popup opens and everything works fine. When there is a double click the popup opens and closes in a flash.
I need to either disable the double click or make the double click work the same way single click works. Please suggest how this can be done.
I'm making a Chrome extension where I want to make all the images on a page spin using CSS keyframe animation, but I also want it to toggle on/off using JS. I've already figured out how to toggle on and off, but how should I execute the CSS from the JS? All I can think of is to just find all images, and add the .animation class, but it doesn't seem to work.
manifest.JSON
{
"manifest_version": 2,
"name": "SPINS",
"description": "SPINS",
"version": "1.0",
"browser_action": { },
"icons": { "16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png" },
"background": {
"scripts": ["background.js"]
},
"content_scripts":
[{
"matches": ["<all_urls>"],
"css": [ "spin.css"],
"js": [ "content.js"]
}],
"permissions": [
"activeTab"
]
}
background.JS
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.sendMessage(tab.id,{});
});
content.JS
var toggle = false;
chrome.runtime.onMessage.addListener(function() {
toggle = !toggle;
Array.prototype.forEach.call(document.querySelectorAll('img'), function(el) {
el.addClass("animation");
});
});
spin.CSS
#keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
.animation {
animation: 40s spin infinite linear;
}
Please replace
el.addClass("animation");
with
el.className = el.className + " animation";