通过 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 文档