将WebExtension从Chrome移植到Firefox？

Question

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

我关注了＆＃34; Porting a Google Chrome extension＆＃34; MDN上的指南，发现我的清单文件很完美。

然后我按照说明如何执行＆＃34; Temporary Installation in Firefox＆＃34;扩展名。

但是，当我点击目录中的任何文件时，没有任何反应。扩展程序无法加载。有什么建议？我知道扩展程序可以在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之间进行通信。这样做的方法是注入内容脚本并在站点的代码和内容脚本之间进行通信。常见的方法是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: '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 is undefined。这在Developer Edition和Nightly中已得到修复。

潜在内容脚本问题：

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

运行示例代码

一旦所有这些错误得到解决，并在Firefox Nightly或Developer Edition下运行，它运行良好。但是，你没有依赖于externally_connectable的任何东西，它将不起作用。

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