使用 GeckoView Android 与 Web 内容进行本机消息传递

Question

我正在尝试创建一个仅使用 GeckoView 作为 webview 的混合应用程序。我正在关注this 链接以在本机和 HTML/Javascript 之间建立通信。我正在使用基于连接的消息传递。到目前为止，我能够接收来自本机的消息并将消息从后台脚本发送回本机。但我无法做到以下几点：

1. 显示来自后台脚本的消息：我试图在后台脚本中显示自定义事件的值，但它不起作用。代码如下：

    function eventHandler(element){
    element.dispatchEvent(event);
    element.addEventListener('build', function (e) {
        console.log("Inside event listener");
        element.innerHTML="change";
        let text = document.getElementById("text").innerText;
        console.log("Main js executed :::::"+ text);
    }, false);
   

   }

2. 我已尝试从内容脚本发送消息，但它也无法正常工作，因为我正在获取未定义的浏览器。

   browser.runtime.onMessage.addListener(
       function (request, sender){
           console.log("Message received");
       });
   

我尝试使用 chrome 而不是浏览器，但结果相同。 我正在使用 78.0.20200601093812 版本的 GeckoView。我的仅后台脚本清单如下：

{


"manifest_version": 2,
  "name": "messaging",
  "version": "1.0",
  "description": "Example messaging web extension.",
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self';",
  "browser_specific_settings": {
    "gecko": {
      "id": "message@example.com"
    }

  },
"content_scripts": [
    {
      "matches": ["resource://android/assets/www/messaging/main.html"],
      "js": ["messaging.js"]
    }
  ],

  "background": {
    "scripts": ["jquery-3.3.1.min.js","background.js", "main.js"],
    "page": "main.html",
    "persistent": true
  },
  "permissions": [
    "nativeMessaging",
    "geckoViewAddons",
    "nativeMessagingFromContent",
  ]
}

Answer 1

如果 HTML 代码是您的扩展程序的一部分，您可以使用 extension pages。扩展页面可以完全访问 WebExtension API。您需要做的就是使用web-extension://[UUID] 路径加载页面，这样应该可以工作

session.loadUri(extension.metaData.baseUrl + "/main.html");

其中main.html 是扩展文件夹中的HTML 文件，extension 是您从installBuiltIn 返回的扩展对象。

然后在main.html添加这样的脚本

<script src=main.js></script>

在main.js 中，您可以使用与guide 中相同的代码连接到应用程序：

// Establish connection with app
let port = browser.runtime.connectNative("browser");
port.onMessage.addListener(response => {
    // Let's just echo the message back
    port.postMessage(`Received: ${JSON.stringify(response)}`);
});
port.postMessage("Hello from WebExtension!");