将消息从后台脚本发送到内容脚本,然后在chrome扩展中响应

我正在尝试进行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:

Get Global Funcs

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"
  }
}

gthacoder.. 5

1)首先,您试图getGlobalFuncsBtn在后台脚本中触发按钮单击事件,这是毫无意义的.实际上,你宣告background.js两次:第一次在manifest文件内:

"background": {
  "scripts": ["jquery-1.7.2.min.js","background.js"]
},

(这意味着它是一个后台脚本)

,第二次在popup.html内:

(这意味着它是一个弹出的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.