就像瀏覽器中的多媒體支持一樣，我們最初做的瀏覽器插件都是錯誤的。多年來，每種瀏覽器都有自己的語言和安裝插件的方法，從而導致安全漏洞，性能問題，開發(fā)人員的痛苦維護以及令人沮喪的用戶體驗。今天，我們擁有大多數(shù)主流瀏覽器支持的Web Extension API，這是緩解開發(fā)人員和用戶今天遇到的許多問題的關(guān)鍵步驟。在Mozilla最近在夏威夷舉行的全能活動中，我著手創(chuàng)建我的第一個Web擴展。我希望該擴展程序有用但簡單，并且具有真實的用例。最后，我創(chuàng)建了一個非常簡單的Web擴展程序，可以持續(xù)監(jiān)控document.title用星號代替骯臟的單詞，這是一種安全措施，可避免在共享屏幕或有人抬頭看你時感到尷尬。讓我向您介紹創(chuàng)建基本的Web擴展有多簡單！

擴展結(jié)構(gòu)

該擴展名必須包含在一個目錄中-這是我建議將簡單擴展名結(jié)構(gòu)化的方式：

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

所有文件名和子目錄都可以根據(jù)您的喜好命名，除了manifest.json; 這是標準文件名，必須在擴展名的根目錄中。擴展越復雜，可能需要的文件和結(jié)構(gòu)就越多。

manifest.json

該manifest.json 文件包含所有擴展名屬性，包括圖像，標題，描述，請求的權(quán)限，在哪些主機名上運行的腳本等。以下是我用于擴展的非常簡單的清單：

{
  "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擴展，我希望為每個主機名加載該擴展，并且擴展的內(nèi)容將保留在其中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來有效地監(jiān)聽對的更改，document.title 但是使用MutationObserver會使瀏覽器掛起，因此，我需要進一步研究如何防止這種情況-setInterval 不幸的是，這是路徑阻力最小。我確信MutationObserver的使用是問題所在，而不是瀏覽器問題。

安裝Web擴展進行測試

要在Chrome中安裝和測試網(wǎng)絡擴展程序，請執(zhí)行以下操作：

1. 打開 Chrome > Preferences

2. 點擊Extensions 標簽

3. 單擊開始Load Unpacked Extension ，導航到您的擴展目錄，然后單擊Select

要在Firefox中安裝和測試Web擴展，請執(zhí)行以下操作：

1. 導航 about:debugging

2. 選擇Add-ons 標簽

3. 點擊Load Temporary Add-on，導航至擴展目錄，然后選擇擴展目錄中的任何文件

該擴展程序?qū)⒈患虞d到每個瀏覽器中，并且document.title將檢查每個新選項卡中是否包含錯誤詞。每個瀏覽器都有不同的規(guī)則來確定解壓縮擴展將處于激活狀態(tài)的時間，因此請注意，如果您結(jié)束會話，則可能需要再次啟用本地擴展。