Develop Reference

chrome extension changing icon not working as expected

manifest.json
{
"manifest_version": 2,
"name": "Project",
"description": "Chrome Extension for sending messages",
"version": "1.0",
"browser_action": {
"default_icon": "red_dot.png"
},
"permissions": [
"activeTab",
"https://ajax.googleapis.com/",
"storage"
],
"background" : {
"scripts" : ["background.js"]
},
"content_scripts": [
{
"matches":["https://www.website.com/*"],
"js":["keypress.js", "jquery.js", "js_file.js"],
"run_at": "document_end"
}
]
}
background.js
var running = false
chrome.browserAction.onClicked.addListener(function(tab) {
if (running) {
alert('script is running, turning off');
chrome.browserAction.setIcon({path: "red_dot.png"})
running = false
} else {
alert('script is not running, turning on');
chrome.browserAction.setIcon({path: "green_dot.jpg"})
running = true
}
});
When I click on the icon, I get the popup as expected, but the icon itself isn't changing.
I'm getting this error:
Unchecked runtime.lastError: Icon invalid.
but I don't understand why. The code seems valid.

use this api and carefully enter params specifically path
https://developer.chrome.com/extensions/browserAction#method-setIcon

Get button clicked with chrome extension

I want to know how to detect if a button with a certain id is clicked on a webpage with my chrome extension.
With my code I have an error saying that my element is undefined.
Here is my manifest :
{
"manifest_version": 2,
"name": "app",
"description": "my app",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html",
"default_title": "Changer le background"
},
"permissions": [
"activeTab",
"storage"
]
}
And my popup.js file :
document.addEventListener('DOMContentLoaded', () => {
getCurrentTabUrl((url) => {
document.getElementById('mybutton').addEventListener('click', function() {
var script = "console.log('clicked');";
chrome.tabs.executeScript({code: script});
});
});
});

your popup.js will not load until the user himself will click on the extension's icon... i think you should change your approach and use a content-script like this:
document.getElementById('mybutton').addEventListener('click', function() {
console.log('clicked');
});
you'll need to update your manifest.json for using a content script, something like that:
"content_scripts": [
{
"matches": ["the url of a page for the script", "the url of another page"],
"js": ["your_script.js"]
}
],

Screenshot using chrome.tabs.captureVisibleTab

I'm trying to capture the visible area of a page using chrome.tabs.captureVisibleTab. Here is the code that makes the call:
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
if (request.name == 'screenshot') {
chrome.tabs.captureVisibleTab(null, null, function(dataUrl) {
sendResponse({ screenshotUrl: dataUrl });
});
}
});
But when I try to capture the tab I get this error:
Unchecked runtime.lastError while running tabs.captureVisibleTab: The 'activeTab' permission is not in effect because this extension has not been in invoked.
Here is my manifest file:
{
"manifest_version": 2,
"name": "Empathy",
"version": "0.1",
"description": "Simulate accessibility issues for websites.",
"browser_action": {
"default_icon": "empathy19.png",
"default_title": "Empathy!"
},
"permissions": [
"activeTab",
"contextMenus",
"desktopCapture",
"tabCapture",
"tts" // Text-to-speech
],
"background": {
"scripts": [
"boot.js"
],
"persistent": false
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": [
"src/helpers.js",
"src/colorblindness.js",
"lib/colorvision.js",
"lib/html2canvas.js"
]
}
]
}
I have active tab permissions
The call is being made from a background script
I'm matching <all_urls>
Why do I get that error?

There are things that talk about <all_urls> as something to match, but what I was missing was the <all_urls> permission. After I added the permission, it worked.

Chrome extension: load different content scripts

I want to load a different content script depending on the page and tab that is currently selected. Right now, I have three content scripts. I want to use two of them for one page and the third one for another page.
Belonging to page 1:
content_script.js
load_content_script.js
Belonging to page2:
newtab_content_script.js
right now my manifest looks like this
{
"name": "A plugin for AdData express. Generate an instant excel document from the brands you check mark.",
"version": "1.0",
"background_page": "background.html",
"permissions": [
"cookies",
"tabs",
"http://*/*", "https://", "*", "http://*/*", "https://*/*",
"http://www.addataexpress.com", "http://www.addataexpress.com/*"
],
"content_scripts": [
{
"matches": ["<all_urls>","http://*/*","https://*/*"],
"js": ["load_content_script.js", "content_script.js", "newtab_content_script.js", "jquery.min.js", "json.js"]
}
],
"browser_action": {
"name": "AdData Express Plugin",
"default_icon": "icon.png",
"js": "jquery.min.js",
"popup": "popup.html"
}
}
how would I structure this in the manifest or elsewhere?

Just in the interest of completeness, the way you'd do this from the manifest is to have as many matches blocks under "content_scripts" as needed:
"content_scripts": [
{
"matches": ["http://www.google.com/*"],
"css": ["mygooglestyles.css"],
"js": ["jquery.js", "mygooglescript.js"]
},
{
"matches": ["http://www.yahoo.com/*"],
"css": ["myyahoostyles.css"],
"js": ["jquery.js", "myyahooscript.js"]
}
],

Rather than using content scripts that are bound to URL expressions specified in the manifest, you should use executeScript, which lets you programmatically decide when to inject a JS snippet or file:
// background.js
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
// there are other status stages you may prefer to inject after
if (changeInfo.status === "complete") {
const url = new URL(tab.url);
if (url.hostname === "www.stackoverflow.com") {
// this is the line which injects the script
chrome.tabs.executeScript(tabId, {file: "content_script.js"});
}
}
});
Make sure to add tabs permission to manifest.json:
{
// ...settings omitted...
"permissions": [
"tabs", // add me
]
}

you should use Programmatic injection
chrome.tabs.executeScript(null, {file: "content_script.js"});

How to track page change (Chrome Context Script plugin)?

I'm writing a simple Chrome plugin that's intended to delete DOM elements from some site.
manifest.json
{
"name": "bla",
"version": "1.0",
"description": "bla",
"content_scripts": [
{
"matches": ["http://*/*"],
"js": ["myscript.js"]
}
],
"permissions": [
"tabs",
"http://*/*"
]
}
myscript.js
window.onload = start;
function start()
{
var ads = document.getElementById("left_ads");
ads.parentNode.removeChild(ads);
alert("bla");
}
When I load a target page everything works perfectly: div id="left_ads" is removed as intended. But, when I click a link to a page which also has a similar div id="left_ads" my script fails to work. I know that probably I should choose some other event, not window.onload(), but which one?

It turns out I've found a solution to this. I used background html file.
So, the plugin now looks like this:
manifest.json:
{
"name": "bla",
"version": "1.0",
"description": "bla",
"background_page": "background.html",
"permissions": [
"tabs",
"http://*/*"
]
}
background.html:
<html>
<script>
chrome.tabs.onUpdated.addListener(start);
function start(tabID, changeInfo, tab)
{
chrome.tabs.executeScript(null, { file: "myscript.js" })
}
</script>
</html>
myscript.js:
var ads = document.getElementById("left_ads");
ads.parentNode.removeChild(ads);
Works OK, on every page.