Menu
How can something so simple be so impossible?
All I want to do is click the browser_action button of my extension, open a form with a couple of settings, and then click the button on the form to kick off a process.
I cannot for the life of me get the button click in the background form to work.
I have tried to get the example at http://developer.chrome.com/extensions/contentSecurityPolicy.html#H2-3 to work, but it doesn't. Is there a difference between rules for browser_action and background? Is that why my event listener is not firing?
Can someone provide a working example, please?
manifest.json:
{
"name": "Convert",
"version": "0.1",
"description": "Converts the current page",
"browser_action": {
"default_icon": "exticon.png",
"default_popup": "background.html"
},
"content_scripts": [{
"matches": ["*://*/*"],
"js": ["contentscript_static.js"]
}],
"permissions": [
"tabs", "http://*/*", "https://*/*"
]
}
background.html:
<html>
<head>
<title>Converter</title>
<script src="background.js"/>
<script>
// Initialize the localStorage
if (null == localStorage["htmlImport"])
localStorage["htmlImport"] = false;
// Called when the user clicks on the browser action icon.
chrome.browserAction.onClicked.addListener(function(tab) {
console.log('in listener');
// execute the content script
chrome.tabs.executeScript(null,
{
file: "contentscript.js",
allFrames: true // It doesn't work before 4.0.266.0.
});
});
// Listen to the requests from the content script
chrome.extension.onRequest.addListener(
function(request, sender, sendResponse)
{
switch (request.name)
{
case "getPreferences":
sendResponse(
{
prefIgnoreLinks : localStorage["htmlImport"]
});
break;
case "PressShortcut":
sendResponse({}); // don't response.
// execute the content script
chrome.tabs.executeScript(null,
{
file: "contentscript.js",
allFrames: true // It doesn't work before 4.0.266.0.
});
break;
default:
sendResponse({}); // don't response.
break;
}
});
</script>
</head>
<body style='min-width:250px;'>
Link depth: <input type='text' name='depth' value='3'/><br/>
<input type='checkbox' name='changedomain'>Include external domains</input><br/>
<button id='beginConvert'>Convert</button>
</body>
</html>
background.js:
function awesome() {
// Do something awesome!
console.log('awesome')
}
function totallyAwesome() {
// do something TOTALLY awesome!
console.log('totallyAwesome')
}
function awesomeTask() {
awesome();
totallyAwesome();
}
function clickHandler(e) {
setTimeout(awesomeTask, 1000);
}
// Add event listeners once the DOM has fully loaded by listening for the
// `DOMContentLoaded` event on the document, and adding your listeners to
// specific elements when it triggers.
//document.addEventListener('DOMContentLoaded', function () {
// document.querySelector('button').addEventListener('click', clickHandler);
//});
// Add event listeners once the DOM has fully loaded by listening for the
// DOMContentLoaded event on the document, and adding your listeners to
// specific elements when it triggers.
document.addEventListener('DOMContentLoaded', function () {
// console.log('event listener for button connected to beginConversion()');
//document.querySelector('button').addEventListener('click', beginConversion);
document.getElementById('beginConvert').addEventListener('click', clickHandler);
});
663
One of the easiest ways to inspect a specific web element in Chrome is to simply right-click on that particular element and select the Inspect option. Clicking on the Inspect option from the right-click menu will directly open the Developer tools including the editor, Console, Sources, and other tools.
To the right of your address bar, find your extensions' icons. On your computer, open Chrome. Drag the extension's icon to its new place.
Open Chrome, and click / tap the menu button “…” Click / tap More Tools. Click / tap Extensions. You'll see a page of all your downloaded extensions.
Open the Chrome Web Store. In the left column, click Apps or Extensions. Browse or search for what you'd like to add. When you find an app or extension you'd like to add, click Add to Chrome.
{
"name": "Stackoverflow Popup Example",
"manifest_version": 2,
"version": "0.1",
"description": "Run process on page activated by click in extension popup",
"browser_action": {
"default_popup": "popup.html"
},
"background": {
"scripts": ["background.js"]
},
"permissions": [
"tabs", "http://*/*", "https://*/*"
]
}
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
switch (request.directive) {
case "popup-click":
// execute the content script
chrome.tabs.executeScript(null, { // defaults to the current tab
file: "contentscript.js", // script to inject into page and run in sandbox
allFrames: true // This injects script into iframes in the page and doesn't work before 4.0.266.0.
});
sendResponse({}); // sending back empty response to sender
break;
default:
// helps debug when request directive doesn't match
alert("Unmatched request of '" + request + "' from script to background.js from " + sender);
}
}
);
<html>
<head>
<script src="popup.js"></script>
<style type="text/css" media="screen">
body { min-width:250px; text-align: center; }
#click-me { font-size: 20px; }
</style>
</head>
<body>
<button id='click-me'>Click Me!</button>
</body>
</html>
function clickHandler(e) {
chrome.runtime.sendMessage({directive: "popup-click"}, function(response) {
this.close(); // close the popup when the background finishes processing request
});
}
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('click-me').addEventListener('click', clickHandler);
})
console.log("chrome extension party!");
Clicking extension button with browser window opened to exampley.com
After clicking 'Click Me!' button in extension popup
http://mikegrace.s3.amazonaws.com/stackoverflow/detect-button-click.zip
155
The previous answer does not work anymore and it took me a few hours to understand how to manage a work around. I hope this can get you going faster then me.
First, you the last method in this page (by the bottom of the page) and it is asynchronous, so remember to give it a callback. The code you need is smtg like this:
chrome.browserAction.onClicked.addListener(function (tab) {
chrome.tabs.query({'active': true}, getActiveTabCallback);
});
Second, you need to understand one thing that took me some time: if you are not using a background html page you won't be able to see any console.log in your main Chrome window. You need to go to the extension page (chrome://extensions) and click in your extensions background page link (yes, you don't have a background page but Chrome gives you a fake one). This type of extension (based on events) should have the manifest.json containing smtg like this:
"background": {
"scripts": ["background.js"],
"persistent": false
},
Regards!
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
