检测Google Chrome扩展程序的browser_action表单中的按钮点击
Lee*_*rey 13 google-chrome-extension
如此简单的事情怎么会如此不可能？
我想要做的就是单击我的扩展程序的browser_action按钮,打开一个包含几个设置的表单,然后单击表单上的按钮以启动进程.
我不能为我的生活拿到按钮点击后台表格来工作.
我试图在http://developer.chrome.com/extensions/contentSecurityPolicy.html#H2-3上运行示例,但事实并非如此.browser_action和背景的规则之间有区别吗？这就是我的事件监听器没有解雇的原因吗？
有人可以提供一个有效的例子吗？
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);
});
Mik*_*ace 48
你的目标
- 单击扩展按钮
- 扩展弹出窗口打开控件
- 根据扩展弹出窗口中的控件在当前选项卡上执行脚本
提示
- 将后台页面视为控制中心.它接收来自Chrome扩展程序中各种脚本的传入请求,提升了执行跨域请求(如果在清单中定义)等操作的权限.
- 您应该使用清单版本2,因为不推荐使用版本1.
- 清单版本2不允许内联脚本,因此所有脚本都需要作为自己的文件加载.
例
的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!");
运行示例屏幕截图
单击带有浏览器窗口的扩展按钮,打开到exampley.com
点击"Click Me!"后 按钮在扩展弹出窗口中
zip中的示例文件
http://mikegrace.s3.amazonaws.com/stackoverflow/detect-button-click.zip
| 归档时间： |
|
| 查看次数： |
23954 次 |
| 最近记录： |