Javascript Chrome扩展通过消息传递与网页通信_Javascript_Google Chrome_Google Chrome Extension

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

javascript google-chrome google-chrome-extension

Javascript Chrome扩展通过消息传递与网页通信,javascript,google-chrome,google-chrome-extension,Javascript,Google Chrome,Google Chrome Extension,我们在servlet中有一个JSP页面，并且在客户端开发了一个GoogleChrome扩展。我们希望通过JSP或html与扩展通信。正如我们所搜索的，应该有一个background.js和一个内容脚本。我们将background.js放在扩展文件夹中，并在chrome中注册。然后，当我们将内容脚本放在JSP或外部web页面旁边时，这两个页面无法交互。这是background.js的代码： alert("hey back"); chrome.runtime.onConnectExternal.a

我们在servlet中有一个JSP页面，并且在客户端开发了一个GoogleChrome扩展。我们希望通过JSP或html与扩展通信。正如我们所搜索的，应该有一个background.js和一个内容脚本。我们将background.js放在扩展文件夹中，并在chrome中注册。然后，当我们将内容脚本放在JSP或外部web页面旁边时，这两个页面无法交互。这是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" });
    }
});

存在一些问题：

这根本不起作用。问题在哪里？事实上，我们怎么能称之为来自外部网页的背景脚本

此外，如果我们将内容脚本放在扩展文件夹中，每当浏览器脱机工作时（没有internet连接），背景和内容脚本都无法正常对话

谢谢。

首先，切勿使用

警报进行调试。从未。算了吧
使用console.log

或实际值。要调试扩展的后台页面，请启用

chrome://extensions

第页

我们在html中称content.js为：

这是无效的HTML，

script

标记不是void（self-closing）元素，因此正确的语法是：

正如您在

chrome://extensions

页面扩展名有一个错误，即

文件：//

方案不允许在

“外部可连接”

中使用。设置本地web服务器并使其为测试文件提供服务。此外，您不需要

“id”：[“*”]

，因为它只用于从其他扩展/应用程序进行通信，而不用于网页

"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

替换为您的扩展ID，如

chrome://extensions

当顶部的

[x]开发者模式

复选框处于启用状态时，返回页面

现在让我们看一下背景脚本：

ChromeAPI中没有像

postMessageExternal

这样的东西，只需使用

postMessage