Question

我正在尝试制作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"
  }
}

Answer 1

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按钮的地方。总的来说，你应该清除manifest.json中的background字段（将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文件中指定的标签页。您的代码应该是这样的：

<{1>}中的

（如果您重命名，则为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"}); } });中传递的消息：http://developer.chrome.com/extensions/messaging.html。

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

1 个答案: