從零開發一個 Chrome 擴充套件程式(自動給網頁加個看板娘，盯著你認真工作/摸魚)

語言: CN / TW / HK
時間 2023-01-17 03:15:27
ead>

theme: vuepress

前言

本文打算實現一個自動給網頁新增一個看板孃的擴充套件，可以顯示/隱藏， 並且有持久化記錄功能；根據網頁的href記錄是否開啟看板娘；以及滑鼠選中文字出現擴充套件自定義的 menu事件；如圖所示：

demo.png

什麼是 Chrome 擴充套件程式？

Chrome 擴充套件程式（Chrome-extensions），也俗稱Chrome外掛，下面我簡稱Chrome擴充套件，它可以增強瀏覽器的功能，讓使用者對自己的瀏覽器實現定製化，DIY的快樂懂的都懂（DDDD）

怎樣檢視自身安裝的擴充套件？

我們可以通過點選 更多工具 -> 擴充套件程式來開啟擴充套件程式標籤頁， 在標籤頁中檢視我們所有安裝的擴充套件，或者在頂部位址列輸入chrome://extensions/開啟。 如圖所示：

chrome_home.jpg

怎樣獲取擴充套件程式？

大多數Chrome使用者從Chrome 應用商店獲得擴充套件程式。世界各地的開發人員會在Chrome應用商店中釋出他們的擴充套件，經過 Chrome 的審查並最終向用戶提供

  • 由於一些眾所周知的原因，我們並不能訪問Chrome應用商店， 但是Chrome又要求擴充套件必須從它的Chrome應用商店下載安裝，這成了一個死迴圈，不過只要思想不滑坡，方法總比困難多，下面我會講解如何從本地載入擴充套件，

  • 我們只要在能訪問的網站上extfans.com下載需要的擴充套件，再開啟擴充套件程式標籤頁，開啟右上角的開發者模式開關，再把下載好的壓縮包解壓，解壓後會看到一個.crx字尾的檔案，將檔案拖拽到擴充套件程式標籤頁即可。

可以點選這裡檢視圖文教程

開始

實現簡易 demo

我們新建一個資料夾demo，在資料夾內建立一個manifest.json配置檔案：

json { // manifest的版本號，主流是2，在2024年徹底不支援，最新版本是3， "manifest_version": 3, // 副檔名稱 "name": "看板娘", // 擴充套件版本 "version": "1.0.0", // 擴充套件描述 "description": "給頁面加入一個看板娘，盯著你認真工作！" }

manifest_version版本號 2 跟 3 的 API 會有較大差別；請注意區分：

點選這裡檢視官方文件

擴充套件可以點選右上角擴充套件圖示來彈出一個小視窗的頁面，焦點離開時視窗頁面關閉，一般做一些臨時性的互動操作；在配置檔案中新增 icon欄位，配置圖示，新增 action 欄位，配置 popup 彈框：

json { "manifest_version": 3, "name": "看板娘", "version": "1.0.0", "description": "給頁面加入一個看板娘，盯著你認真工作！", // 圖示，擴充套件程式列表內的圖示，我全部用一個尺寸；文章最後會提供資原始檔的連結 "icons": { "16": "img/live2d.png", "48": "img/live2d.png", "128": "img/live2d.png" }, // 右上角圖示、可根據規則高亮或置灰: 預設高亮 "action": { "default_icon": "img/live2d.png", "default_title": "這是自己開發的一個Chrome擴充套件", "default_popup": "html/popup.html" } }

我們建立一下popup.html

```html

Document

我是你點擊出來的popup頁面

```

提示： 我們在擴充套件程式標籤頁記得開啟右上角的 開發者模式 開關

此時；我們在擴充套件程式標籤頁點選左上角的載入已解壓的擴充套件程式按鈕，找到我們建立的這個demo資料夾，點選選擇資料夾；擴充套件便成功出現在你 擴充套件程式標籤頁中；如圖所示：

提示：記得開啟卡片右下角的開關，下圖第二個紅框

add_button.png

我們繼續點選右上角的擴充套件程式圖示，會彈出你安裝的所有擴充套件，我們點選第二個紅框的圖示；擴充套件便出現在了擴充套件圖示的左側； 如下圖所示：

icon_list.jpg

點選看板娘圖示便出現popup.html頁面；如下圖所示：

popup.jpg

此時我們便成功開發了一個最簡單的Chrome擴充套件程式，接下來，我們正式開發標題所說的看板娘擴充套件

實現看板娘擴充套件

我們打算在頁面中自動生成一個看板娘，那便需要往網頁中注入生成看板孃的程式碼檔案，這需要用到content_scriptsAPI：

json { "content_scripts": [ { // 匹配規則：匹配所有url "matches": ["<all_urls>"], // 多個js會按順序注入 "js": ["js/live2d.min.js", "js/live2d.0.min.js", "js/init.js"], // 程式碼注入的時間，可選值： "document_start", "document_end", "document_idle" // document_idle 表示頁面空閒時; 預設就是document_idle "run_at": "document_idle" } ] }

  • live2d.min.js 看板娘檔案 1
  • live2d.0.min.js 看板娘檔案 2
  • init.js 初始化看板娘

```js // init.js

live2dWidget.init({ model: { jsonPath: 'http://unpkg.com/[email protected]/assets/shizuku.model.json', }, display: { superSample: 2, width: 300, height: 400, position: 'left', hOffset: 0, vOffset: 0, }, }) ```

此時，開啟任意網頁，便能在左下角看到一個可愛的看板娘了。如圖所示：

demo_baidu.png

下面我們優化一下這個擴充套件，目前我們只能無差別的展示看板娘，我們想在右上角的popup.html頁面上控制看板孃的顯示/隱藏,並且顯示/隱藏狀態可以被持久化記錄；這用到了幾個 API：chrome.storage.local、chrome.tabs.query、chrome.tabs.sendMessage

由於用到了chrome.storage, 所以要在 manifest.json檔案中新增以下許可權：

json { "permissions": ["storage"] }

下面我們改造一下popup.html:

```html

Document

看板娘目錄

顯示/隱藏

```

```js // popup.js

const GET_LOCATION_HREF = 'get-location-href' const TOGGLE_LIVE2D = 'toggle-live2d' const live2dDom = document.getElementById('switch-live2d')

initLive2dStatus()

/* * 新增change事件 / live2dDom.addEventListener('change', async (event) => { const status = event.target.checked const message = { cmd: TOGGLE_LIVE2D, status, }

const { href } = await sendMessageToInitScript(message) chrome.storage.local.set({ [href + TOGGLE_LIVE2D]: status }) })

/* * 初始化看板娘狀態 / async function initLive2dStatus() { const localStorage = await chrome.storage.local.get() const message = { cmd: GET_LOCATION_HREF, storage: localStorage, }

const { href } = await sendMessageToInitScript(message) const status = localStorage[href + TOGGLE_LIVE2D]

if (status) { live2dDom.children[0].checked = true } else { live2dDom.children[0].checked = false } }

/ * 傳送訊息到init.js * @param {} message * @returns / async function sendMessageToInitScript(message) { const tabList = await chrome.tabs.query({ active: true }) const response = await chrome.tabs.sendMessage(tabList[0].id, message) return response } ```

init.js修改如下：

```js const GET_LOCATION_HREF = 'get-location-href' const TOGGLE_LIVE2D = 'toggle-live2d'

/* * @description: 初始化 / live2dWidget.init({ // ... })

/* * 在下一輪事件迴圈動作，確保DOM已經生成 / setTimeout(() => { const href = location.href const status = localStorage.getItem(href + TOGGLE_LIVE2D) toggleLive2d(+status) }, 0)

addListener()

/* * 新增監聽 * @returns / function addListener() { chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { const { cmd, storage, status } = request const href = location.href

if (cmd === GET_LOCATION_HREF) {
  sendResponse({ href })
  toggleLive2d(storage[href + TOGGLE_LIVE2D])
  return
}

if (cmd === TOGGLE_LIVE2D) {
  sendResponse({ href })
  toggleLive2d(status)
  localStorage.setItem(href + TOGGLE_LIVE2D, +status)
  return
}

}) }

/* * 開關看板娘 * @returns / function toggleLive2d(status) { const ele = document.getElementById('live2d-widget')

if (!ele) { console.error('liveDom is undefined') return }

if (status) { ele.style.display = 'block' } else { ele.style.display = 'none' } } ```

到這一步，帶有控制開關以及記憶功能的Chrome擴充套件便開發完畢了！

自定義瀏覽器的右鍵選單

context_menus.png

接下來我們實現一個選中文字呼叫百度搜索的小功能，這需要用到chrome.contextMenusAPI：

  • manifest.json檔案中需要開啟contextMenus許可權
  • background是一個常駐的頁面，它隨著瀏覽器的開啟而開啟，隨著瀏覽器的關閉而關閉，通常把需要一直執行的、啟動就執行的、全域性的程式碼放在 background

```json // manifest.json

{ "permissions": ["storage", "contextMenus"], "background": { "service_worker": "js/background.js" } } ```

```js // background.js

chrome.contextMenus.create({ id: chrome.runtime.id, title: '使用看板娘搜尋：%s', // %s 表示選中的文字 contexts: ['selection'], // selection 表示選中事件 })

chrome.contextMenus.onClicked.addListener((info, tab) => { chrome.tabs.create({ url: 'http://www.baidu.com/s?ie=utf-8&wd=' + encodeURI(info.selectionText), }) }) ```

除錯方式

| 檔案型別 | 除錯方式 | 圖片說明 | | ----------------- | ------------------------------------------ | ------------------------------------------------------------ | | content_scripts | 開啟 Console,如圖切換 | console.png | | popup | 滑鼠右鍵點選擴充套件圖示，然後點選審查彈出內容 | popup_right.png | | background | 擴充套件管理頁點選Service Worker即可 |background.png |

結束

「」
「」