通過 WebExtensions 移植

Created: November-22, 2018

在討論從/向移植 Firefox 擴充套件之前，應該知道什麼是 WebExtensions。

WebExtensions - 是一個代表用於建立 Firefox 擴充套件的 API 的平臺。

它使用與 Chromium 相同的擴充套件架構，因此，此 API 在許多方面與 Google Chrome 和 Opera （基於 Chromium 的 Opera）中的 API 相容。在許多情況下，為這些瀏覽器開發的擴充套件程式可以在 Firefox 中進行一些更改，甚至根本不需要它們。

MDN 建議使用 WebExtension 進行新擴充套件：

將來，WebExtensions 將成為開發 Firefox 附加元件的推薦方式，其他系統將被棄用。

鑑於上述情況，如果要將擴充套件埠擴充套件到 Firefox ，則必須知道擴充套件的編寫方式。

Firefox 的擴充套件可以基於 WebExtension，Add-on SDK 或 XUL。

基於 WebExtension 的相容擴充套件

當使用 WebExtension 時，必須檢視不相容性列表，因為某些功能完全或部分支援，換句話說，應該檢查一個人的 manifest.json。

它還允許使用相同的名稱空間：

目前，所有 API 都可以通過 chrome。*名稱空間訪問。當我們開始新增自己的 API 時，我們希望將它們新增到瀏覽器。* namespace。開發人員將能夠使用功能檢測來確定瀏覽器中是否有 API。*。

一個簡單的擴充套件，可以在 Firefox 和谷歌瀏覽器中使用

manifest.json：

{
  "manifest_version": 2,
  
  "name": "StackMirror",
  
  "version": "1.0",
  
  "description": "Mirror reflection of StackOverflow sites",
  
  "icons": {
    "48": "icon/myIcon-48.png"
  },
  
  "page_action": {
    "default_icon": "icon/myIcon-48.png"
  },
  
  "background": {
    "scripts"   : ["js/background/script.js"],
    "persistent": false
  },
  
  "permissions": ["tabs", "*://*.stackoverflow.com/*"]
}

background 指令碼：

function startScript(tabId, changeInfo, tab) {

    if (tab.url.indexOf("stackoverflow.com") > -1) {

        chrome.tabs.executeScript(tabId, 
            
            {code: 'document.body.style.transform = "scaleX(-1)";'}, function () {

            if (!chrome.runtime.lastError) {

                chrome.pageAction.show(tabId);
            }
        });
    }
}

chrome.tabs.onUpdated.addListener(startScript);

將專案打包為標準 zip 檔案，但使用 .xpi 副檔名。

StackOverflow 文件