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

Chrome extension communicates with a web page through message passing

本文关键字：网页 通信 消息传递 扩展 Chrome      更新时间：2023-09-26

我们在servlet中有一个JSP页面，并且在客户端开发了一个googlechrome扩展。我们希望通过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. 此外，如果我们把内容脚本放在扩展文件夹中，每当浏览器离线工作（没有互联网连接）时，后台和内容脚本都无法正常工作。

谢谢。

首先，不要将alert用于调试目的。从不简单地忘记它。

使用console.log或实际调试器。为了调试扩展的后台页面，请启用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即可。

相关文章：