Chrome 扩展通过消息传递与网页通信

Question

我们在 servlet 中有一个 JSP 页面，我们在客户端开发了一个 google chrome 扩展。我们希望通过 JSP 或 html 与扩展进行通信。正如我们所搜索的，应该有一个 background.js 和一个内容脚本。我们将 background.js 放在扩展文件夹中，并在 chrome 中注册它。然后当我们将内容脚本放在 JSP 或外部网页旁边时，这两个页面无法交互。 这是 background.js 的代码：

alert("hey back");
chrome.runtime.onConnectExternal.addListener(function (port) {
    port.postMessageExternal({ greeting: "hey" });
    port.onMessageExternal.addListener(function (message, sender) {
        if (message.greeting == "salam") {
            alert("message from content: " + message.greeting);
            port.postMessageExternal({ greeting: "H R U?" });
        }
        else if (message.greeting == "khobam") {
            alert("message from content: " + message.greeting);
        }
        else {
            alert("background did not receive salam");
        }
    });
});

这是 manifest.json：

{
    "manifest_version": 2,
    "name": "msg-test",
    "description": "message test",
    "version": "1.0",
    "browser_action": {
        "default_icon": "icon.png"
    },
    "background": {
        "scripts": ["background.js"],
        "persistent": true
    },
    "permissions": [
        "tabs",
        "http://*/*"
    ],
    "offline_enabled": true,
    "externally_connectable": {
        "ids":["*"],
        "matches": ["file:///C:/Users/h.aghajani/Desktop/b.html"],
        "accept_tls_channel_id":true
    }
}

这是内容脚本：

alert("hey content");
var port = chrome.runtime.connect({ name: "mycontentscript" });
port.onMessage.addListener(function (message, sender) {
    if (message.greeting == "hey") {
        alert("message from background: " + message.greeting);
        port.postMessage({ greeting: "salam" });
    }
    else if (message.greeting == "H R U?") {
        alert("message from background: " + message.greeting);
        port.postMessage({ greeting: "khobam" });
    }
    else {
        alert("content did not receive hello");
        port.postMessage({ greeting: "no salam" });
    }
});

有一些问题：

1. 它根本不起作用。问题出在哪里？事实上，我们怎么能称之为 来自外部网页的后台脚本？

2. 此外，如果我们将内容脚本放在扩展文件夹中，每当浏览器离线工作（没有互联网连接）时，后台和内容脚本就无法正常对话。

谢谢。

Answer 1

首先，切勿将alert 用于调试目的。绝不。干脆忘掉吧。

使用console.log 或实际的debugger。为了调试扩展的背景页面，启用chrome://extensions页面顶部的[x] developer mode复选框。

1. 我们在 html 中调用 content.js，为：<script src="content.js"/>

   这是无效的 HTML，script 标记不是 void（自闭合）元素，因此正确的语法是：

   <script src="content.js"></script>
   

2. 正如您在chrome://extensions 页面上看到的那样，扩展程序有一个错误，即"externally_connectable" 中不允许使用file:// 方案。设置本地 Web 服务器并使其为测试文件提供服务。此外，您不需要"ids":["*"]，因为它仅用于与其他扩展程序/应用程序进行通信，而不是网页。

   "externally_connectable": {
       "matches": ["http://localhost/test.html"],
       "accept_tls_channel_id":true
   },
   

3. 现在终于加载了页面脚本，误导性地命名为 content.js，并在控制台中显示一个错误，chrome.runtime.connect 应根据文档将扩展 ID 指定为第一个参数，以便 Chrome 知道在哪里发送消息。

   var port = chrome.runtime.connect("qwertyuiopasdfghjkl", { name: "mycontentscript" });
   

   当[x] developer mode 复选框在顶部启用时，将qwertyuiopasdfghjkl 替换为您在chrome://extensions 页面上看到的扩展程序ID。

4. 现在我们来看看后台脚本：

   Chrome API 中没有postMessageExternal 这样的东西，只需使用postMessage。