使用 GeckoView Android 与 Web 内容进行原生消息传递

Question

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

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

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

}

我尝试从内容脚本发送消息，但它也不起作用，因为我收到的浏览器未定义。

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

使用 GeckoView Android 与 Web 内容进行原生消息传递

Native messaging with web content using GeckoView Android

browser

android

geckoview