I just made a Chrome extension. I followed this tutorial to get a nice button in my toolbar. Now if I load a page, the javascript in my extension gets executed.
Unfortunately, if I click the extension's button in my toolbar, nothing happens.
Question: How do I make the js get executed when I click the extension's button in my toolbar?
Thanks for your help.
Edit
I added background.html and it still doesn't work:
<html>
<head>
<script>
// Called when the user clicks on the browser action.
chrome.browserAction.onClicked.addListener(function(tab) {
var action_url = "javascript:mathjax.js";
chrome.tabs.update(tab.id, {url: action_url});
});
</script>
</head>
</html>
You have two options. Either, you can specify a "popup": "popup.html" in your manifest.json, then put the code in popup.html. In this case, the code will get executed in the popup (though of course you can communicate with your background page or anything else).
Probably better would be to put a callback in background.html by attaching a listener to chrome.browserAction.onClicked.
Chrome extension doesn't support inline javascript code in background.html.You must specify external javascript file.Also instead of specifying background.html you can directly specify external file in manifest file in background property.
I have answered similar question here.
Related
I'm making a Chrome devtools extension. I make a simple devtools page:
<!DOCTYPE html>
<html>
<body>
Foobar. <script>console.log('foobar');</script>
</body>
</html>
I specify "devtools_page": "dev-tools.html" in manifest.json. However, nothing prints in the console. Why is that?
By default, inline script won't be executed. You could extract the scripts to a external js file and include that using <script></script>
Detach the F12 tool and press Ctrl+Shift+J(Windows) to view your console (shortcuts here). More details you can find from this answer: Chrome devtools extension console
I want open all the links on a web page with a single click on Chrome Extensions. I try for that وbut I did not get any results. please help me ...
my manifist.json file :
{
"name": "Open Links in New Tabs",
"version": "1.0",
"description": "open all link in page on new tabs with one click",
"background_page" : "background.html",
"browser_action": {
"default_icon": "icon.png"
},
"permissions":
["tabs"],
"manifest_version": 2
}
background.html file :
<!doctype html>
<html>
<head>
<script src="background.js"></script>
</head>
<body>
</body>
</html>
background.js file :
for(i = 0; i < document.links.length; i++)
{ chrome.tabs.create({active: true, url: document.links[i].href});}
Please explain any problems. thanks
When you access the document object in background.js, you're looking at background page, not the currently active tab.
To access the DOM contents of the open page, you will need a content script. It can then send a message to the background script (which has access to chrome.tabs) with the list of links to open.
Please take a moment to read this excellent overview of extension architecture. Also, read on messaging to pass the list.
Actually, if you're going to be injecting the script programmatically via chrome.tabs.executeScript, you can ditch messaging and just use the callback of executeScript.
As a side note, since you don't have any HTML in the background page, you can replace it with an auto-generated script page like this:
manifest.json
"background": {
scripts": ["background.js"]
},
in place of "background_page"
Lastly, consider minimal permissions that you need.
If your extension is supposed to trigger on click on the extension button (wrapped in a chrome.browserAction.onClicked listener), you can inject a script "for free" with activeTab permission, no need for tabs/host pemission.
Same goes to chrome.tabs.create, you don't need the mighty and scary "tabs" permission.
There are quite a few.
A background script doesn't have access to the page DOM of a tab. The only DOM it can access directly is the DOM of the background.html. You should use a content script and message passing.
background_page is an option of Manifest Version 1, you are using Manifest Version 2, for which the option is called background. Usually you provide the background.js directly as a script (see https://developer.chrome.com/extensions/background_pages). You should return after you implemented those suggestions
I want to run a content script on an iframe with a chrome-extension:// URL. I added a line to my manifest.json that I copied out of the documentation http://code.google.com/chrome/extensions/match_patterns.html
chrome-extension://*/*
But when I reload my extension I get an alert:
Could not load extension from '/work/sirius/extension'.
Invalid value for 'content_scripts[2].matches[0]': Invalid scheme.
Any idea how to get this to worK?
No. Only ftp:, file:, http: and https: can be matched by a content script declaration.
Invalid URL patterns at any of the matches and exclude_matches fields are rejected (generating an error when trying to load the extension).
Invalid patterns at the permissions option in the manifest file are ignored.
If you want to run a script on a tab from your extension, use chrome.extension.getViews in your background script.
Even better, design your extension's pages such that they effectively communicate with each other (example).
I'm having the exact same problem, look at the API http://code.google.com/chrome/extensions/match_patterns.html it says clearly that they accept chrome-extension://*/* yet they don't.
They need to update the API so as not to confuse people.
It seems that Chrome authors have silently removed the ability for content scripts to be injected into chrome-extension: pages. Documentation still says that it works and even contains examples with chrome-extension: scheme but actually it doesn't work. So now only http:, https: and ftp: work "from the box" and file: can work if user of your extension has enabled this on Extensions (chrome://extensions/) page.
Update: now documentation referred above is updated and says nothing about ability to inject content scripts to chrome-extension: pages.
You can inject js to your iframe html(chrome-extension: pages) without declaring it in manifast.json. The injected js can visit Chrome APIs directly.
iframe.html:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
</body>
<script src="iframe.js"></script>
</html>
iframe.js:
console.log(chrome); // {loadTimes: ƒ, csi: ƒ, …}
I'm trying to build an extension for Chrome, but I'm a newbie and I'm having trouble understanding the Docs provided by Google. I want the extension to have a popup that shows a few buttons, and when a button is clicked, I want to run a script.
This is my setup:
popup.html
<button id="test1" onclick="getSite();">button 1</button>
<button id="test2" onclick="getSite();">button 2</button>
content_script.js
function getSite(){alert('getSite works!');}
I'm having trouble understanding how to use the chrome javascript api, as I see others saying use chrome.tabs.executeScript, but I can't figure out where that line goes. Can anyone help me? I'll give you a cookie! or just an upvote.. or maybe both?
You haven't mentioned on which page you want your scripts to run onclick, in Popup.html page or the page on which user is currently working on the browser. If it is just the popup.html page in which you want to execute your script, include them in popup.html page itself.
If however you want to execute them on the user's browser page, You will have to pass a message to your background page, which in turn will execute chrome.tabs.executeScript with current tab's id and {file: 'yourjsfile.js'} as arguments.
I think you are having this problem because of restrictions imposed by the Google Content Security Policy. It mentions that iniline javascript like the one that you have mentioned in you code will not be executed. Try removing the onclick="getSite()" from your HTML markup to content_script.js. Use addEventListener function to attach the event to the button.
I want to run a content script on an iframe with a chrome-extension:// URL. I added a line to my manifest.json that I copied out of the documentation http://code.google.com/chrome/extensions/match_patterns.html
chrome-extension://*/*
But when I reload my extension I get an alert:
Could not load extension from '/work/sirius/extension'.
Invalid value for 'content_scripts[2].matches[0]': Invalid scheme.
Any idea how to get this to worK?
No. Only ftp:, file:, http: and https: can be matched by a content script declaration.
Invalid URL patterns at any of the matches and exclude_matches fields are rejected (generating an error when trying to load the extension).
Invalid patterns at the permissions option in the manifest file are ignored.
If you want to run a script on a tab from your extension, use chrome.extension.getViews in your background script.
Even better, design your extension's pages such that they effectively communicate with each other (example).
I'm having the exact same problem, look at the API http://code.google.com/chrome/extensions/match_patterns.html it says clearly that they accept chrome-extension://*/* yet they don't.
They need to update the API so as not to confuse people.
It seems that Chrome authors have silently removed the ability for content scripts to be injected into chrome-extension: pages. Documentation still says that it works and even contains examples with chrome-extension: scheme but actually it doesn't work. So now only http:, https: and ftp: work "from the box" and file: can work if user of your extension has enabled this on Extensions (chrome://extensions/) page.
Update: now documentation referred above is updated and says nothing about ability to inject content scripts to chrome-extension: pages.
You can inject js to your iframe html(chrome-extension: pages) without declaring it in manifast.json. The injected js can visit Chrome APIs directly.
iframe.html:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
</body>
<script src="iframe.js"></script>
</html>
iframe.js:
console.log(chrome); // {loadTimes: ƒ, csi: ƒ, …}