使用注入的Javascript在Chrome中实现消息传递

使用注入的Javascript在Chrome中实现消息传递,javascript,google-chrome-extension,Javascript,Google Chrome Extension,我正在尝试构建一个Chrome插件(Chrome的76.0.3809.132版本): 在网页中注入JavaScript块(完成) 使用最新的chrome运行时功能将注入的块传递回消息给chrome插件(问题) 我最初参考了Chrome开发者参考: 因此,我的清单是: { "manifest_version": 2, "name": "Message Passing", "description": "Simple messaging plugin", "version": "1

我正在尝试构建一个Chrome插件(Chrome的76.0.3809.132版本):

  • 在网页中注入JavaScript块(完成)
  • 使用最新的chrome运行时功能将注入的块传递回消息给chrome插件(问题)
  • 我最初参考了Chrome开发者参考:

    因此,我的清单是:

    {
      "manifest_version": 2,
    
      "name": "Message Passing",
      "description": "Simple messaging plugin",
      "version": "1.1",
    
      "externally_connectable": {
       "matches": ["*://*.myexample.com/*"]
      },
    
      "permissions": [
        "activeTab",
        "storage",
        "tabs",
        "*://*.myexample.com/*"
      ],
    
      "content_scripts": [
        {
          "matches": ["*://*.myexample.com/*"],
          "run_at": "document_start",
          "js": ["myContent.js"]
        }
      ],
    
      "web_accessible_resources": ["injected.js"]
    }
    
    我的内容脚本:

    var s = document.createElement('script');
    s.src = chrome.extension.getURL('injected.js');
    s.onload = function() {
        this.remove();
    };
    (document.head || document.documentElement).appendChild(s);
    //injecting correctly till this point
    chrome.runtime.onMessageExternal.addListener(
        function(request, sender, sendResponse) {
                console.log("In plugin");//never gets called
    });
    
    调用插件的网页中的JavaScript:

    //the function called by my web page, sending a JSON or text message
    async function sendMessageToPlugin(dataToSend){
        console.log('Send to plugin');//this is getting printed
        var extID = 'abcdefghijklmnoabcdefhijklmnoabc';
        chrome.runtime.sendMessage(extID, dataToSend);
    }
    
    没有错误,就没有结果。我尝试过不同的方法,尝试创建一个后台脚本来监听而不是在内容脚本中监听,尝试为持久消息创建一个端口,使用“onMessage”而不是“onMessageExternal”,在论坛上的各种旧帖子中使用,但没有任何效果:(.我做错了什么?至少有人能告诉我一个网页与Chrome插件成功通信的实际工作示例吗?如果知道使用了什么清单以及扩展的哪个部分成功地侦听了消息(内容脚本或背景),那就好了。谢谢你的帮助

    更新1: 我在使用中描述的方法方面取得了一些成功。这是唯一的方法吗?我更喜欢使用外部连接的功能,但很高兴继续测试此方法,并在其工作时使用它运行

    更新2: 这段代码终于对我有用了:

    在我的内容脚本中-

    window.addEventListener("message", function(event) {
        // We only accept messages from ourselves
        if (event.source != window)
            return;
    
        //if (event.data.type && (event.data.type == "FROM_PAGE")) {
        console.log("Content script received: ");
        console.log(event.data);
        //}
    }, false);
    
    在我的脚本中:

    async function sendMessageToPlugin(dataToSend) {
        console.log('Send to plugin');        
        window.postMessage(dataToSend, "*");
    }
    
    我相信Jafar的解决方案也会起作用(我会尝试并更新!),但现在我还是坚持这一条。感谢贾法尔抽出时间回复!

    says-onMessageExternal不能用于内容脚本。您需要将其移动到中。says-onMessageExternal不能用于内容脚本。您需要将其移动到您的中。