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);
});
Your Goal
Tips
Example
manifest.json
background.js
popup.html
popup.js
contentscript.js
Running Example Screenshots
Clicking extension button with browser window opened to exampley.com
After clicking ‘Click Me!’ button in extension popup
Example files in zip
http://mikegrace.s3.amazonaws.com/stackoverflow/detect-button-click.zip