检测Google Chrome扩展程序的browser_action表单中的按钮点击 [英] Detect a button click in the browser_action form of a Google Chrome Extension
本文介绍了检测Google Chrome扩展程序的browser_action表单中的按钮点击的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何做到这么简单是不可能的事情？
我想要做的就是点击我的扩展程序的browser_action按钮，用几个设置打开一个表单，然后点击表单上的按钮来启动一个进程。
我无法在我的生活中获得背景表单中的按钮点击。
我试图在
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
- Click extension button
- Extension popup window opens with controls
- Execute script on current tab based on controls in extension popup
Tips
- Think of the background page as the control hub. It takes incoming requests from various scripts in your Chrome extension, has elevated permissions to do things like cross-domain requests (if defined in the manifest), and more.
- You should use the manifest version 2 since version 1 is deprecated.
- Manifest version 2 doesn't allow inline scripts so all scripts will need to be loaded as their own file.
Example
manifest.json
{
"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://*/*"
]
}
background.js
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);
}
}
);
popup.html
<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>
popup.js
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);
})
contentscript.js
console.log("chrome extension party!");
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
这篇关于检测Google Chrome扩展程序的browser_action表单中的按钮点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
