【问题标题】：Porting WebExtension from Chrome to Firefox?将 WebExtension 从 Chrome 移植到 Firefox？
【发布时间】：2016-08-11 18:37:37
【问题描述】：

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

我按照 MDN 上的“Porting a Google Chrome extension”指南，发现我的清单文件是完美的。

然后我按照说明如何执行扩展的“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 上加载它时它不会做任何事情；什么都不会发生。

【问题讨论】：

如果没有 manifest.json 中的 "applications" key，它将无法在 48 岁之前的 Firefox 中运行。
我在 Firefox 上完全更新了。 @wOxxOm
清单声明了background.js，但在随后的引用中它被命名为Background.js。虽然 Chrome 在 Windows 上不区分大小写，但 Firefox 可能会更严格。
什么也没试过。我什至制作了一个只有基本清单的目录并尝试移植，没有加载。没有任何迹象表明清单已被读取

标签： javascript google-chrome firefox google-chrome-extension firefox-addon-webextensions

【解决方案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。我用过：

    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 的东西，这将不起作用。

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

【讨论】：

问题：