car*_*ter 0 javascript google-chrome-extension
我正在尝试进行chrome扩展.我的后台脚本在ui按下按钮时触发.它应该向我的内容脚本发送一条消息,该脚本将响应发送回后台脚本.无法弄清楚这是如何工作的.点击侦听器正在触发,但消息传递不起作用.这是我到目前为止所得到的:
后台脚本:
$(document).on('click', '#getGlobalFuncsBtn', function(){
chrome.extension.sendMessage({text:"getStuff"},function(reponse){
if(reponse.type == "test"){
console.log('test received');
}
});
console.log('click listener');
});
内容脚本:
chrome.extension.onMessage.addListener(function(message,sender,sendResponse){
if(message.text == "getStuff"){
console.log('test sent');
sendResponse({type:"test"});
}
});
弹出HTML:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id="getGlobalFuncsBtn">Get Global Funcs</button>
<script src="jquery-2.0.2.min.js"></script>
<script src="background.js"></script>
</body>
</html>
manifest.json的:
{
"manifest_version": 2,
"name": "Var Viewer",
"description": "This extension allows you to view and change all user defined js global vars.",
"version": "1.1",
"permissions": [
"storage"
],
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["jquery-2.0.2.min.js","content.js"]
}
],
"web_accessible_resources": [
"jquery-2.0.2.min.js"
],
"background": {
"scripts": ["background.js"],
"persistent": true
},
"browser_action": {
"default_icon": "icon.png",
"default_popup": "pop.html",
"default_title": "Var Viewer"
}
}
1)首先,您试图getGlobalFuncsBtn在后台脚本中触发按钮单击事件,这是毫无意义的.实际上,你宣告background.js两次:第一次在manifest文件内:
"background": {
"scripts": ["jquery-1.7.2.min.js","background.js"]
},
(这意味着它是一个后台脚本)
,第二次在popup.html内:
<script src="background.js"></script>
(这意味着它是一个弹出的JavaScript文件)
Background page是一个只执行某些后台操作的地方(例如,计算).popup.html是你的实际弹出窗口,所以这是你应该使用jQuery按钮的地方.总的来说,你应该只删除backgroundmanifest.json中的字段(重命名background.js为类似的东西会很棒popup.js,但这不是必需的).
(你的背景脚本在按下按钮时触发,因为你曾经正确地声明它 - 内部popup.html.)
您可以background pages在官方文档中阅读更多相关信息:http://developer.chrome.com/extensions/background_pages.html.
2)您的第二个问题是在扩展页面之间发送消息(它可能是任何扩展页面,在您的代码片段中background.js)和content script.如果要在两个常规扩展页面之间设置通信通道,则非常简单.使用chrome.runtime.sendMessage和chrome.runtime.onMessage.addListener.但是,如果要与之通信content script,则必须通过定义tab要向其发送消息的特定内容来使用稍微复杂一些(content script实际上是作为manifest文件中指定的选项卡代码的一部分执行).您的代码应该是这样的:
在background.js(或popup.js如果你重命名):
// code below is supposed to be inside your button trigger
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {text:"getStuff"}, function(response) {
if(response.type == "test"){
console.log('test received');
}
});
});
Content script事件侦听器看起来是一样的extension page还是content script,所以你的content.js代码应能正常工作,因为它是.您只需要替换extension为runtime:
在content.js:
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if (request.text == "getStuff") {
console.log('test sent');
sendResponse({type: "test"});
}
});
很好地阅读了传入的消息Chrome extension:http://developer.chrome.com/extensions/messaging.html.