创建一个简单的Web扩展

喜欢ヅ旅行 2023-02-22 03:34 16阅读 0赞

就像浏览器中的多媒体支持一样，我们最初做的浏览器插件都是错误的。 多年来，每种浏览器都有自己的语言和安装插件的方法，从而导致安全漏洞，性能问题，开发人员的痛苦维护以及令人沮丧的用户体验。 今天，我们拥有大多数主流浏览器都支持的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` ，导航到扩展目录，然后选择扩展目录中的任何文件。

![Web扩展插件屏幕][Web]

![Web扩展选项卡][Web 1]

该扩展名将被加载到每个浏览器和每个新标签页的 `document.title` 。 每个浏览器都有不同的规则来确定解压缩扩展将处于激活状态的时间，因此请注意，如果您结束会话，则可能需要再次启用本地扩展。 您可以 [在此处][Link 1]了解有关发布Web扩展的 [信息][Link 1] 。

## **改善思路** ##

以下是一些新增内容，这些内容会使此扩展更加出色：

*  能够添加自定义字词，而不仅仅是Google的不良字词（对于用户，不是创建扩展名的开发人员）
 *  能够快速打开和关闭扩展名的功能，例如，仅在工作时间过滤单词
 *  将其发布到chrome和Firefox加载项目录！

## **资源资源** ##

[MDN是学习Web扩展的全部知识][MDN_Web]的最佳资源。 我们在此处构建的Web扩展非常简单，不会涉及任何权限或高级内部扩展API，因此请务必 [阅读此页面][MDN_Web] ，以完整地了解创建完整和高级Web扩展的概述。 有了您，Web扩展就不再像以前那样复杂或令人生畏。 这个扩展程序花了我大约30分钟的时间，因此，如果您有空闲时间，请尝试创建Web扩展程序。 您会惊讶于跨浏览器附加组件的创建如此简单！

> 翻译自: [https://davidwalsh.name/web-extensions][https_davidwalsh.name_web-extensions]

[MutationObserver API]: https://davidwalsh.name/mutationobserver-api
[Web]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby93ZWItZXh0ZW5zaW9ucy1hZGRvbnMucG5n?x-oss-process=image/format,png
[Web 1]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby93ZWItZXh0ZW5zaW9ucy10YWJzLnBuZw?x-oss-process=image/format,png
[Link 1]: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension
[MDN_Web]: https://developer.mozilla.org/en-US/Add-ons/WebExtensions
[https_davidwalsh.name_web-extensions]: https://davidwalsh.name/web-extensions