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

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

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

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

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

manifest.json

該manifest.json 文件包含所有擴(kuò)展名屬性，包括圖像，標(biāo)題，描述，請(qǐng)求的權(quán)限，在哪些主機(jī)名上運(yùn)行的腳本等。以下是我用于擴(kuò)展的非常簡(jiǎ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文件包括在其主機(jī)名。為了這個(gè)簡(jiǎn)單的Web擴(kuò)展，我希望為每個(gè)主機(jī)名加載該擴(kuò)展，并且擴(kuò)展的內(nèi)容將保留在其中filter.js。

filter.js

該filter.js 文件包含Web擴(kuò)展的所有邏輯。以下代碼搜索的document.title不良詞，并將其替換為星號(hào)：

// 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()

注意：您會(huì)注意到，我嘗試使用MutationObserver API來有效地監(jiān)聽對(duì)的更改，document.title 但是使用MutationObserver會(huì)使瀏覽器掛起，因此，我需要進(jìn)一步研究如何防止這種情況-setInterval 不幸的是，這是路徑阻力最小。我確信MutationObserver的使用是問題所在，而不是瀏覽器問題。

安裝Web擴(kuò)展進(jìn)行測(cè)試

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

1. 打開 Chrome > Preferences

2. 點(diǎn)擊Extensions 標(biāo)簽

3. 單擊開始Load Unpacked Extension ，導(dǎo)航到您的擴(kuò)展目錄，然后單擊Select

要在Firefox中安裝和測(cè)試Web擴(kuò)展，請(qǐng)執(zhí)行以下操作：

1. 導(dǎo)航 about:debugging

2. 選擇Add-ons 標(biāo)簽

3. 點(diǎn)擊Load Temporary Add-on，導(dǎo)航至擴(kuò)展目錄，然后選擇擴(kuò)展目錄中的任何文件

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