如何创建一个Web扩展

就像浏览器中的多媒体支持一样，我们最初做的浏览器插件都是错误的。多年来，每种浏览器都有自己的语言和安装插件的方法，从而导致安全漏洞，性能问题，开发人员的痛苦维护以及令人沮丧的用户体验。今天，我们拥有大多数主流浏览器支持的Web Extension API，这是缓解开发人员和用户今天遇到的许多问题的关键步骤。在Mozilla最近在夏威夷举行的全能活动中，我着手创建我的第一个Web扩展。我希望该扩展程序有用但简单，并且具有真实的用例。最后，我创建了一个非常简单的Web扩展程序，可以持续监控document.title用星号代替肮脏的单词，这是一种安全措施，可避免在共享屏幕或有人抬头看你时感到尴尬。让我向您介绍创建基本的Web扩展有多简单！

扩展结构

该扩展名必须包含在一个目录中-这是我建议将简单扩展名结构化的方式：

+ foulmouth-filter // (name of your plugin here)
    + icons
        - 48.png
    - filter.js
    - manifest.json

所有文件名和子目录都可以根据您的喜好命名，除了manifest.json; 这是标准文件名，必须在扩展名的根目录中。扩展越复杂，可能需要的文件和结构就越多。

manifest.json

该manifest.json 文件包含所有扩展名属性，包括图像，标题，描述，请求的权限，在哪些主机名上运行的脚本等。以下是我用于扩展的非常简单的清单：

{
  "manifest_version": 2,
  "name": "Foulmouth Filter",
  "version": "0.1",
  "icons": {
    "48": "icons/48.png"
  },
  "description": "Filters out filthy words from document titles",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["filter.js"]
    }
  ]
}

该content_scripts 键是非常重要的，列出了JavaScript文件包括在其主机名。为了这个简单的Web扩展，我希望为每个主机名加载该扩展，并且扩展的内容将保留在其中filter.js。

filter.js

该filter.js 文件包含Web扩展的所有逻辑。以下代码搜索的document.title不良词，并将其替换为星号：

// Google's bad word filter:
// https://gist.githubusercontent.com/jamiew/1112488/raw/7ca9b1669e1c24b27c66174762cb04e14cf05aa7/google_twunter_lol
let badWords = "w3schools|david|walsh|jquery.....".split('|') // loool

// Runs cleanup on the document title
let cleanup = word => {
    document.title = document.title.split(' ').map(word => {
        return badWords.indexOf(word.toLowerCase()) != -1 ? '*'.repeat(word.length) : word
    }).join(' ')
}

// Set up a mutation observer to listen for title changes
// Will fire if framework AJAX stuff switches page title
let createObserver = function() {
    let observer = new MutationObserver((mutations) => {
        // Disconnect the MO so there isn't an infinite title update loop
        // Run title cleanup again
        // Create a new MO to listen for more changes
        console.log('Mutations!', mutations)
        observer.disconnect()
        observer = null
        cleanup()
        createObserver()
    })

    observer.observe(
        document.querySelector('title'),
        { subtree: true, characterData: true, childList: true }
    )
}
createObserver()

// Kick off initial page load check
cleanup()

注意：您会注意到，我尝试使用MutationObserver API来有效地监听对的更改，document.title 但是使用MutationObserver会使浏览器挂起，因此，我需要进一步研究如何防止这种情况-setInterval 不幸的是，这是路径阻力最小。我确信MutationObserver的使用是问题所在，而不是浏览器问题。

安装Web扩展进行测试

要在Chrome中安装和测试网络扩展程序，请执行以下操作：

1. 打开 Chrome > Preferences

2. 点击Extensions 标签

3. 单击开始Load Unpacked Extension ，导航到您的扩展目录，然后单击Select

要在Firefox中安装和测试Web扩展，请执行以下操作：

1. 导航 about:debugging

2. 选择Add-ons 标签

3. 点击Load Temporary Add-on，导航至扩展目录，然后选择扩展目录中的任何文件

该扩展程序将被加载到每个浏览器中，并且document.title将检查每个新选项卡中是否包含错误词。每个浏览器都有不同的规则来确定解压缩扩展将处于激活状态的时间，因此请注意，如果您结束会话，则可能需要再次启用本地扩展。