javascript - 将 WebExtension 从 Chrome 移植到 Firefox？

Question

我制作了一个可用的 Chrome 扩展程序，该扩展程序未打包，只是我计算机上的一个目录。我发现我should be able to port this to Firefox rather easily .

我按照 MDN 上的“Porting a Google Chrome extension”指南进行操作，发现我的 list 文件非常完美。

然后，我按照有关如何执行扩展的“Temporary Installation in Firefox ”的说明进行操作。

但是，当我单击目录中的任何文件时，没有任何反应。扩展程序未加载。有什么建议吗？我知道该扩展程序在 Chrome 中运行良好并且加载没有错误。

manifest.json:

{
  "manifest_version": 2,
  "name": "ER",
  "description": "P",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },

  "background": {
    "scripts": [ "background.js" ]
  },

  "content_scripts": [
    {
      "matches": [ "SiteIwant" ],
      "js": [ "ChromeFormFill.js" ],
      "run_at":  "document_idle" 

    }
  ],

  "permissions": [
    "*://*/*",
    "cookies",
    "activeTab",
    "tabs",
    "https://ajax.googleapis.com/"
  ],
  "externally_connectable": {
    "matches": ["SiteIwant"]
  }
}

ChromeFormFill.js:

// JavaScript source c
console.log("inside content");
console.log(chrome.runtime.id);
document.getElementById("ID").value = chrome.runtime.id.toString();

Background.js

chrome.runtime.onMessage.addListener(
  function (request, sender, sendResponse) {
      if (request.data === "info") {
          console.log("Recieving Info");
          return true;
      }
 });

chrome.tabs.create(
{
    url: 'myUrl' 
    active: true
}, function (tab) {
    chrome.tabs.executeScript(tab.id, { file: 'Run.js', runAt: "document_idle" });
});

Run.js 只会 alert('hi')。

当我尝试在 Firefox 上加载它时，它不会执行任何操作；什么都不会发生。

Answer 1

问题:

在 manifest.json 中:

不支持

externally_connectable:¹

Firefox does not support externally_connectable 。您可以关注bug 1319168了解更多信息。目前，尚无预计实现时间。

您需要使用不同的方法在站点上的代码和 WebExtension 之间进行通信。这样做的方法是注入(inject)内容脚本并在站点代码和内容脚本之间进行通信。执行此操作的常见方法是 CustomEvent()或window.postMessage() 。我的偏好是 CustomEvent()。

使用window.postMessage()就像在外面大喊你的消息并希望没有其他人在听，或者他们知道他们应该忽略该消息。其他人的代码(也使用 window.postMessage())一定是为了忽略您的消息而编写的。您必须编写代码以忽略来自其他代码的任何潜在消息。如果其中任何一个没有完成，那么您的代码或其他代码可能会出现故障。

使用CustomEvent()就像直接与房间里的某人交谈。其他人可能正在倾听，但他们需要知道房间的存在才能这样做，并专门选择倾听您的谈话。自定义事件仅由监听您指定的事件类型的代码接收，该事件类型可以是您选择的任何有效标识符。这使得错误发生干扰的可能性大大降低。您还可以选择使用多种不同的事件类型来表示不同的事物，或者仅使用一种事件类型并为您的消息定义一种格式，以便区分您需要的任何可能的消息类型。

matches 值需要有效(假设是故意编辑的):

您有两行(一行带有尾随 ,，一行没有；两者语法正确):

"matches": ["SiteIwant"]

“SiteIwant” 需要是有效的 match pattern 。我假设这已从有效的内容更改为混淆您正在使用的网站。我用过:

"matches": [ "*://*.mozilla.org/*" ]

在Background.js中:

行:

    url: 'myUrl' 
    active: true

需要:

    url: 'myUrl',
    active: true

[请注意 'myUrl' 之后的 ,。] 此外，myUrl 必须是有效的 URL。我用过:

    url: 'http://www.mozilla.org/',

Firefox 48 错误(现已修复):

您的线路:

chrome.tabs.executeScript(tab.id, { file: 'Run.js', runAt: "document_idle" });

在 Firefox 48 中，此行在选项卡可用之前执行。这是一个错误。固定在 Firefox Developer Edition和 Nightly 。您将需要其中之一来测试/继续开发。

ChromeFormFill.js 中的问题:

另一个 Firefox 48 错误(现已修复):

chrome.runtime.id 未定义。此问题已在 Developer Edition 和 Nightly 中修复。

潜在的内容脚本问题:

我假设您的 HTML 有一个 ID = 'ID' 的元素。如果不是，您的 document.getElementById("ID") 将为 null。您不会检查返回值是否有效。

运行示例代码

一旦所有这些错误都得到解决，并在 Firefox Nightly 或 Developer Edition 下运行，它就可以正常工作。但是，您没有任何依赖于 externally_connectable 的东西，因此无法正常工作。

---

1. agaggi注意到我忘记将这个问题包含在我的答案的原始版本中。