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";
Related
I'm trying to make my chrome extension open a new tab upon installation using the chrome.tabs API but I get the error 'Could not load background script 'background.js'. Could not load manifest.'
This is my manifest.json:
{
"short_name": "App",
"name": "App",
"version": "1.0.0",
"manifest_version": 2,
"icons": {
"16": "favicon.ico",
"48": "logo192.png",
"128": "logo512.png"
},
"permissions": ["tabs"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"browser_action": {
"default_title": "App",
"default_popup": "index.html"
}
}
and my background.js:
chrome.runtime.onInstalled.addListener(function() {
alert('Thanks for installing!');
chrome.tabs.create({
url: 'https://google.com',
active: true
});
return false;
});
If anyone could help, that'd be great:)
I am trying to create a chrome extension to turn a page red
This is my manifest file:
{
"name": "Page Redder",
"description": "Make the current page red",
"version": "2.0",
"icons":{"128":"icon_128.png"},
"permissions": [
"activeTab"
],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"browser_action": {
"default_title": "Make this page red",
"default_popup":"popup.html"
},
"manifest_version": 2
}
And here is my background.js file:
function mainFunction(){
document.body.style.backgroundColor="red";
}
Here is my popup.js file:
document.getElementById("btnDownloadListings").addEventListener("click", function() {
document.body.style.backgroundColor="red";
chrome.runtime.getBackgroundPage(function(backgroundPage) {
backgroundPage.mainFunction();
});
}, false);
When I click the button the popup.html or the popup tab turns red but the main page does not.
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.
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 }" });