Chrome浏览器在BackgroundScript和ContentScript之间的扩展消息传递

时间:2018-09-28 17:59:37

标签: javascript google-chrome-extension google-chrome-devtools messaging

我正在学习编写Chrome扩展程序,并且在使用消息传递API时遇到了麻烦。我找到了related StackOverflow Post,但是我无法收到BackgroundScript发送的任何消息,也无法收到通知。

到目前为止,这是我的代码:

manifest.json

{
    "manifest_version": 2,
    "name": "z-context++",
    "version": "2.0.1",
    "devtools_page": "devtools/index.html",
    "icons": {
        "16": "icons/icon_16.png",
        "48": "icons/icon_48.png",
        "72": "icons/icon_72.png",
        "96": "icons/icon_96.png",
        "128": "icons/icon_128.png",
        "144": "icons/icon_144.png",
        "192": "icons/icon_192.png"
    },
    "background": {
    "scripts": ["devtools/eventPage.js"],
    "persistent": false
  },
    "content_scripts": [
      {
      "matches": [
          "http://*/*",
          "https://*/*"
          ],
      "js": ["devtools/contentScript.js"],
      "run_at": "document_end"
      }
  ],
    "permissions": [
    "tabs",
    "activeTab",
    "http://*/*",
    "https://*/*",
    "*://*/*"
  ]
}

eventPage.js

var eventPage = new (function() {
    function init() {

        var page = chrome.extension.getBackgroundPage();

        // chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
        //   if (request.asking === "login"){
        //     console.log('got msg from popup.js');
        //     return;
        //   }
        // });

        page.console.log("HELLO!");

        chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
           chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {});
        });

    };

    init();
})();

contentScript.js

new (function() {
    function init() {

        document.addEventListener("DOMContentLoaded", function(event) {
          console.log({'z_context': z_context()})
        });

        chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
            alert("*** MESSAGE RECEIVED ***")
            console.log({'ON_MESSAGE': message});
        });


    }

    init();
})();

还有其他人可以帮助我看看我丢失了什么吗? 我想要的目的是能够基于诸如document.ready和页面刷新之类的内容事件在eventPage.js中运行脚本。有一个功能可以分析DOM的z-context / stacking上下文,我想将此属性数据发送到内容脚本,以便突出显示页面上的内容。

注意:我正在为z-context派生一个github项目,所以我没有包含zContext()函数,因为它不是我的代码,并且因为我认为它与我无法正确发送消息有关在脚本之间。

任何帮助将不胜感激!

0 个答案:

没有答案