This question already has answers here:
How to open the correct devtools console to see output from an extension script?
(3 answers)
Closed 3 years ago.
I found a few examples of how to create a simple chrome extension. Now I want to run a JS function when a button is clicked in the chrome extension pop up. I followed this general guide to get the extension set up:
https://developer.chrome.com/extensions/getstarted
and I followed these explanations specifically to get the function running when the button is clicked:
https://gist.github.com/greatghoul/8120275
Right now in my popup.html (the main html shown to the user when they click the plug in icon) i have the following line:
<button id="clickme">click me</button>
And in popup.js which has been succesfully configured as accesible to the chrome plug in I added the following:
function hello() {
console.log("I MEOW AT CATS");
}
document.getElementById('clickme').addEventListener('click', hello);
As I understand it this should be enough and when the button is clicked the hello() function should run and "I MEOW AT CATS" should be displayed in the console but it is not. Seemingly the hello() function is never run. What am I doing wrong?!
This is my manifest.json if it matters:
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["declarativeContent", "storage"],
"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
}
Your JavaScript file (popup.js) is correct but remember that the console.log logs on your extension's html file.
Your HTML file (popup.html) should be like this:
<!DOCTYPE html>
<html>
<body style="width: 300px">
<button id="clickme">click me</button>
<script type="text/javascript" src="popup.js"></script>
</body>
</html>
Related
Based on the example from MDN, I've created my own extension that showing just a 'hi' message. I've included a file named "popup.js" via tag. But this file is not getting executed.
This is my manifest.json file:
{
"manifest_version": 2,
"name": "Ext",
"version": "1.0",
"description": "Shows a hi message.",
"icons": {
"48": "icons/ff.jpg"
},
"permissions": ["tabs"],
"browser_action": {
"default_icon": "icons/toggle-off.png",
"default_title": "EXT",
"default_popup": "popup/popup.html"
}
}
This is my popup.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>Hi</h2>
<script src="popup.js"></script>
</body>
</html>
There is only a single line in my popup.js file. That is,
console.warn("This is a warning");
But I can't see anything in the console. The pop-up is showing properly when I click on the extension icon.
I don't know what am missing here. Any help is appreciated!
Finally, I find out what was the issue.
To execute the code from the js file included via tag you need to specify that code in browser.tabs.executeScript and there is an error in my manifest.json file. I should specify the permission as activeTab instead of tabs.
So my modified manifest.json file is:
{
"manifest_version": 2,
"name": "Ext",
"version": "1.0",
"description": "Shows a hi message.",
"icons": {
"48": "icons/ff.jpg"
},
"permissions": ["activeTab"],
"browser_action": {
"default_icon": "icons/toggle-off.png",
"default_title": "EXT",
"default_popup": "popup/popup.html"
}
}
and my popup.js file becomes:
browser.tabs.executeScript({code: `console.warn("This is a warning")`});
See the docs for more details.
I'm trying to publish my extension to the Chrome web store. Everything works fine when loaded as an unpacked extension in developer mode. However, when I preview changes after uploading my zip file and try to open the popup, the popup html page appears to be missing with the following error message instead:
Your file was not found It may have been moved or deleted.
ERR_FILE_NOT_FOUND
There is no error thrown in the console for the popup.
My manifest.json is as follows:
{
"name": "<name>",
"version": "0.13",
"description": "<description>",
"permissions": ["*://*/*", "identity", "activeTab", "tabs", "storage"],
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
"background": {
"scripts": ["dist/background/index.js"],
"persistent": true
},
"content_scripts": [],
"web_accessible_resources": ["dist/content_scripts/index.css"],
"browser_action": {
"default_popup": "dist/popup/popup.html",
"default_icon": {
"16": "images/icon_16.png",
"32": "images/icon_32.png",
"48": "images/icon_48.png",
"128": "images/icon_128.png"
}
},
"icons": {
"16": "images/icon_16.png",
"32": "images/icon_32.png",
"48": "images/icon_48.png",
"128": "images/icon_128.png"
},
"oauth2": {
"client_id": "<client_id>",
"scopes": [
"https://www.googleapis.com/auth/userinfo.email",
"https://www.googleapis.com/auth/userinfo.profile"
]
},
"key": "<my_key>",
"manifest_version": 2
}
All of the files are in the right place relative to the manifest before compression.
Here are the contents of the popup.html file (popup.js mounts a React app on #root):
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,500,600" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css#7.1.1/themes/reset-min.css" integrity="sha256-JQ2nnTmybhOWSjfV3sa8mG0ZVhTCcORER4cyXc5HL10=" crossorigin="anonymous">
<link rel="stylesheet" href="popup.css">
</head>
<body>
<div id="root"></div>
<script src="popup.js"></script>
</body>
</html>
I've looked at the Chrome docs but they are either sparse or outdated on this. Can anyone help?
Thanks
(Edit: also I previously uploaded the zip while having forgotten to move the popup.html to the dist/popup folder so that the file was in fact missing, in case that's relevant)
It seems that I made a mistake between uploading this new version and a previous version. When looking at the Chrome profile in ~/.config/google-chrome/Default/Extensions/<extension_id> (on Linux) I realised that the last published version was 0.11 which had the popup.html file missing, I had thought that a newer version had been published between (0.12) to fix this but I see that it wasn't.
I'm trying to write a Chrome extension that highlights certain words that were entered in extension's textfield
For example: I enter "web" in extension's area, press the button. On active tab all "web" words are should be highlighted.
I've found a nice web-pagethat has all the functions I need.
In my code, when I try to use them in my Extension, nothing works.
manifest file
{
"manifest_version": 2,
"name": "Word search & highlight",
"version": "1.0",
"icons": {
"16": "16x16.png",
"32": "32x32.png",
"48": "48x48.png",
"128": "128x128.png"
},
"content_scripts": [
{
"matches": [ "*://*/*" ],
"js": [ "popup.js"],
"run_at": "document_end"
}
],
"permissions": [
"tabs", "activeTab"
],
"browser_action": {
"default_title": "Start searching",
"default_icon": "48x48.png",
"default_popup": "popup.html"
}
}
popup.html
<!DOCTYPE html>
<html>
<head>
<script src="popup.js"></script>
<title></title>
</head>
<body>
<input type="text" id="searchtextfield"><br>
<input id="btn_save" value="Save" type="button">
<input id="btn_search" value="Search" type="button"><br>
</body>
</html>
And here's popup.js file: it's too long, so I made a pastebin document:
http://pastebin.com/g5ZenE48
I can't get innerHTML of webpage from these functions and I don't really understand how to make this all work.
sean-adams is correct, your browser action (popup.html) cannot communicate directly with your content script (popup.js). You can think of a content script as being an addition to whatever page the user is visiting, whereas the browser action is directly integrated as part of your chrome extension.
So, you will indeed need to use message passing to communicate. It's simple though. First, I recommend renaming your browser action popup to something like browser_popup.html. I'll use a stripped down example for brevity:
//browser_popup.html
<input type="button" id="my_button" value="Click Me">
<script src='browser_popup.js'></script>
You'll also want another file browser_popup.js for handling events.
//browser_popup.js
var button = document.querySelector('#my_button');
button.addEventListener('click', function() {
// Send message to active tab
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, 'button_clicked');
});
});
In your content script (let's call it content.js) you need to listen for the message:
//content.js
chrome.runtime.onMessage.addListener(function(message) {
if (message == 'button_clicked') {
// code to modify page...
}
});
What am I doing wrong? I want to run a function when clicking "Show me some foo".
manifest.json browser_action
"browser_action": {
"default_icon": "img/icon.png",
"default_popup": "popup.html"
},
popup.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/popup.js"></script>
</head>
<body>
<div class="changes">
<span class="reset">Show me some foo
</span>
</div>
</body>
</html>
popup.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null,
{file:"reset.js"});
});
reset.js
var el = document.getElementById('foo');
el.onclick = showFoo;
function showFoo() {
alert('I am foo!');
return false;
}
Full manifest.json file
{
"name": "App name",
"version": "1.0.2",
"manifest_version": 2,
"description": "Desc.",
"permissions": [
"tabs"
],
"browser_action": {
"default_icon": "img/icon.png"
},
"background": {
"page": "background.html"
},
"browser_action": {
"default_icon": "img/icon.png",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"js": ["js/myscript.js"],
"exclude_matches":[
"http://site.com/*"
]
}
],
"web_accessible_resources": [
"chrome_ex_oauth.html"
]
}
I'm not sure what you are trying to do, but I'll explain your code to you:
user clicks a browserAction
popup window is crated and scripts from popup.html are loaded
popup.js loads and registers a listener chrome.browserAction.onClicked.addListener
user closes a popup window (by clicking anywhere outside it or on the browserAction again)
pupup.html page is unloaded
chrome.browserAction.onClicked.addListener listener is unregistered
As you can see reset.js is never loaded as it's never injected. What's more, you can't have a popup.html and chrome.browserAction.onClicked.addListener in the same extension ("This event will not fire if the browser action has a popup." source).
You probably want to put chrome.browserAction.onClicked.addListener into the background page so that reset.js is injected to current page whenever browserAction is clicked. And, as I mentioned above, for chrome.browserAction.onClicked.addListener to fire, you need to get rid of "default_popup": "popup.html" from manifest.
If you wanted to inject a script to popup.html - it doesn't make much sense. You have full control over popup.html and you can simply put reset.js in the <head>.
I'm doing a chrome app to show twitter search widget. My app works fine with manifest version 1 and using "backgroud_page" I can show my apps main html page well and its working well but with manifest ver 2's new background is not working for me.
"description": "Live",
"version": "1",
"manifest_version": 1,
"app": {
"launch": {
"local_path": "index.html"
}
},
"background_page":"index.html",
"icons": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
}
above is working well but the below is not working well
"description": "Live",
"version": "1",
"manifest_version": 2,
"app": {
"launch": {
"local_path": "index.html"
}
},
"background": {
"pages": "index.html"
},
"icons": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
}
With manifest 2, page loads but the java scripts is not loaded. but manifest 1 works fine.
can u please help me.. how to load that javascript using manifest 2...
please help me..
Inside the background element, it should be 'page', not 'pages'.
http://developer.chrome.com/extensions/background_pages.html