將WebExtension從Chrome移植到Firefox？

Question

我制作了一個未打包的Chrome擴展程序，它只是我計算機上的一個目錄。 我發現我應該可以很容易地將它移植到Firefox 。

我按照MDN上的“ 移植谷歌瀏覽器擴展程序 ”指南，發現我的清單文件非常完美。

然后，我按照說明如何在擴展程序中執行“ 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不支持externally_connectable 。 您可以按照錯誤1319168獲取更多信息。 目前，沒有預期的時間來實施。

您需要使用不同的方法在站點上的代碼和WebExtension之間進行通信。 這樣做的方法是注入內容腳本並在站點的代碼和內容腳本之間進行通信。 常見的方法是CustomEvent()或window.postMessage() 。 我的偏好是CustomEvent() 。

使用window.postMessage()就像在外面大喊你的消息，希望沒有其他人在聽，或者他們知道他們應該忽略這條消息。 其他人的代碼也使用window.postMessage()編寫，以忽略您的消息。 您必須編寫代碼以忽略來自其他代碼的任何潛在消息。 如果其中任何一個沒有完成，那么您的代碼或其他代碼可能會出現故障。

使用CustomEvent()就像直接與房間里的某個人交談。 其他人可能正在傾聽，但他們需要了解房間的存在才能這樣做，並且特別選擇傾聽您的談話。 自定義事件僅由正在偵聽您指定的事件類型的代碼接收，該代碼可以是您選擇的任何有效標識符。 這使得錯誤發生干擾的可能性大大降低。 您還可以選擇使用多種不同的事件類型來表示不同的事物，或者只使用一種事件類型並為您的消息定義一種格式，以便區分您需要的任何可能類型的消息。

matches值必須有效（假設有意編輯）：

你有兩條線（一用一尾部,一無;既有語法正確）：

"matches": ["SiteIwant"]

"SiteIwant"需要是有效的匹配模式 。 我假設這已經從有效的東西改變為混淆你正在使用的網站。 我用了：

"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東西，這將無法正常工作。

---

1. agaggi注意到我忘記在我的答案的原始版本中包含此問題。