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

存在一些问题：

它根本不起作用。问题出在哪儿？事实上，我们怎么称呼来自外部网页的后台脚本？
此外，如果我们将内容脚本放在扩展文件夹中，只要浏览器脱机工作（没有互联网连接），后台和内容脚本就无法正常通话。

感谢。

Answer 1

首先，永远不要使用alert进行调试。决不。别忘了。

使用console.log或实际debugger。要调试扩展程序的后台页面，请启用[x] developer mode页面顶部的chrome://extensions复选框。

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

这是无效的HTML，script标记不是一个void（自闭）元素，所以正确的语法是：
```
<script src="content.js"></script>
```
正如您在chrome://extensions页面上看到的那样，该扩展程序错误file://中不允许使用"externally_connectable"方案。设置本地Web服务器并使其提供测试文件。此外，您还不需要"ids":["*"]，因为它仅用于与其他扩展程序/应用程序进行通信，而非网页。
```
"externally_connectable": {
    "matches": ["http://localhost/test.html"],
    "accept_tls_channel_id":true
},
```
现在最后加载了错误地命名为content.js的页面脚本，并在控制台中显示错误chrome.runtime.connect应根据文档指定扩展ID作为第一个参数这样Chrome就会知道在哪里发送消息。
```
var port = chrome.runtime.connect("qwertyuiopasdfghjkl", { name: "mycontentscript" });
```
在qwertyuiopasdfghjkl页面上显示chrome://extensions页面上显示的扩展程序ID时，将[x] developer mode替换为postMessageExternal。
现在让我们看一下后台脚本：

Chrome API中没有postMessage这样的内容，只需使用jquery datepicker。

Chrome扩展程序通过邮件传递与网页进行通信

1 个答案: