chrome有什麼好的插件（做個Chrome插件給自己吧）

2023-08-05 05:15:56

隨著入職時間變長，工作不斷的深入，在需要同時處理多個任務的同時，打開幾十上百個瀏覽器 Tab 頁就必不可少了，而我的工作幾乎都是在各種瀏覽器 Tab 頁之間來回切換，如寫文檔、學習新知識、處理 Bug 單流轉、上線等流程，所以我需要對瀏覽器的 Tab 頁進行精細化管理，以達到精細化管理工作流程的目的，於是乎，我對於瀏覽器的使用變成了下面幾個階段：

Chrome - 雜亂無章階段

Chrome - 進行適當整理

Edge - 豎向側邊欄

但是無論瀏覽器層面提供多少這樣或那樣的輔助，但畢竟瀏覽器的職責主要是負責幫助你更好、更快、更高效的瀏覽網頁，並非是幫你管理知識和工作流程，所以如果需要個性化定製的需求，就得自己上手開發啦！畢竟作為程式設計師，自己動手，豐衣足食嘛 。

我希望能夠開發一個 Chrome 瀏覽器插件，當前其他瀏覽器如 Edge、Firefox、Brave，以及其他所有使用 Chromimum 開發的瀏覽器都是支持 Chrome 插件格式的，而這幾大瀏覽器幾乎佔據了近 83% 左右的桌面端瀏覽器市場，所以這個 Chrome 插件可以在我喜歡的瀏覽器上運行。

以下是 2020.3 到 2021.3 的桌面端瀏覽器佔比數據

這個瀏覽器支持傳統的插件點擊彈出欄，以及每次打開一個新 Tab 都能展示我的應用，這樣能夠幫助我隨時了解我當前正在進行的工作，大致形式如下：

彈出欄：

新 Tab：

針對上面需求的形式不知道大家是否比較熟悉了？沒錯，這個插件的框架形式和 掘金 的插件類似，我們看下掘金的 Chrome 插件：

彈出框：

新 Tab：

也就是說，在看完本次文章，你基本上擁有了開發一個掘金插件的能力，心動了？

隨便一提，我們本次開發插件的技術棧如下：

通過先進的技術棧來編寫 Chrome 插件。

Chrome 插件實際上包含幾個部分：

上述 5 大文件組成了一個 Chrome 插件所需要的必須元素，邏輯關係如下：

image.png

可以看到，其實開發一個 Chrome 的插件也是使用 HTML/JavaScript/CSS 這些知識，只不過使用場景，每種 JavaScript 使用的權限與功能、操作的 API 不太一樣，那麼既然是使用基本的 Web 基礎技術，我們就可以藉助更為上層的 Web 開發框架如 React 等來將 Chrome 插件的開發上升到一個現代化的程度。

確保你安裝了最新版的 Node.js，然後在命令行中運行如下命令：

npx create-react-app chrome-react-extension --template typescript

初始化好項目、安裝完依賴之後，我們可以看到 CRA 產生的模板代碼，其中就有我們需要的 public/manifest.json 文件：

當然內容並沒有我們上圖那樣豐富我們需要做一些修改，將內容改為如下內容：

{ "name": "Chrome React Extension", "description": "使用 React TypeScript 構建 Chrome 擴展", "version": "1.0", "manifest_version": 3, "action": { "default_popup": "index.html", "default_title": "Open the popup" }, "icons": { "16": "logo192.png", "48": "logo192.png", "128": "logo192.png" }}

上述的欄位說明如下：

實際上 Chrome 插件只能理解原生的 JavaScript，CSS，HTML 等， 所以我們使用 React 學完之後，需要進行構建，將構建的產物打包給到瀏覽器插件去加載使用，在構建時，還有一個需要注意的就是，為了保證最優化性能，CRA 的腳本在構建時會將一些小的 JS 文件等，內聯到 HTML 文件中，而不是打包成獨立的 JS 文件，在 Chrome 插件的運行環境下，這種形式的 HTML 是不支持的，會觸發插件的 CSP（內容安全策略）錯誤。

所以為了測試我們的插件當前效果，我們修改構建腳本，在 package.json 裡面：

"scripts": { "start": "react-scripts start", "build": "INLINE_RUNTIME_CHUNK=false react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" },

通過設置 INLINE_RUNTIME_CHUNK=false 確保所有的 JS 會構建成獨立的文件，然後引入到 HTML 中加載使用。

一切準備完畢，是時候構建我們的 React 應用了~ 在命令行中運行如下命令：

npm run build

會發現內容構建輸出在 build/xxx 下面，包含 manifest.json、index.html、對應的 JS/CSS 文件還有圖片等，其中 manifest 中索引了 index.html 來作為點擊插件時的 Popup 的展示頁，這個時候我們就可以使用 Chrome 加載我們構建好的文件，來查看插件運行效果了：

我們打開擴展程序面板，設置開發者模式，然後點擊加載文件，選擇我們的 build 文件地址加載：

Magic ！我們可以在瀏覽器裡面看到我們的插件，並使用它了，一個最簡化插件完成！

當然這裡我們雖然能夠使用 React/TypeScript 以及一切現代的 Web 開發技術來寫插件，但是目前沒有很好的方式能夠實時的進行開發-查看效果，就是我們常見的 HMR、Live Reload 這種技術暫時還沒有很好的支持到 Chrome 插件的開發，所以每次我們需要查看編寫的效果都需要構建之後點擊插件查看。

當然如果純針對 UI 或者和 Chrome API 無關的邏輯，那麼你可以放心的直接在 Web 裡面開發，等到開發完畢再構建到 Chrome 插件預覽即可。

我們之前的邏輯是，只要新開一個 Tab，那麼就會訪問我們提供的頁面，類似掘金的插件，而且我們也主要到，其實針對 Popup 頁面只是幾個按鈕，而重頭戲都在新 Tab 頁界面展示，也就是我們這裡其實需要一個多頁應用？因為最終要生成頁面，一個用在 Popup 頁面展示，一個用在新 Tab 頁展示。

但是我們知道 CRA 腳手架生成的模板是主要用於單頁應用，如果需要切換到多頁應用有一定的成本，但是我們的 Popup 頁面實際上就只有幾個按鈕，所以這裡可以做一層簡化，即 Popup 頁面直接手動寫最原始的 HTML/JS/CSS，然後將重頭戲、複雜的新 Tab 頁的邏輯來用 React TypeScript 等現代 Web 技術來開發。

通過這樣設計之後，我們的目錄結構變成了如下形式：

其中 manifest.json 的邏輯變成了如下：

{ "name": "Chrome React SEO Extension", "description": "The power of React and TypeScript for building interactive Chrome extensions", "version": "1.0", "manifest_version": 3, "action": { "default_popup": "./popup/index.html", "default_title": "Open the popup" }, "chrome_url_overrides": { "newtab": "index.html" }, "icons": { "16": "logo192.png", "48": "logo192.png", "128": "logo192.png" }}

我們可以看到，點擊 Chrome 插件彈出的頁面 Popup，換成了 ./popup/index.html ，而我們新加了一個 chrome_url_overrides 欄位，在 newtab 時，我們打開構建後的 index.html 文件。

通過上面的操作，我們每次打開一個新 Tab，都會展示下面的頁面：

完美！我們已經實現了掘金的插件的核心思想：便捷的獲取技術知識，就在你每次打開 Tab 時。

接下來我們嘗試改造一下我們的 Popup 頁面，同樣是對標掘金，我們知道掘金的 Popup 頁面是一個比較簡單的菜單欄，裡面主要是一些用於跳轉到新 Tab 或者設置頁的操作：

我們現在也需要實現類似的點擊某個按鈕，跳轉到我們新 Tab 頁，打開我們上一部分定製的 Tab 邏輯。

這一部分我們就需要修改 popup/index.html ，添加相關的 JS 邏輯如下：

Fake Juejin Extensions 打開新標籤頁 訪問 Github 設置

這一次需求我們只會操作打開新標籤頁、訪問 Github，設置我們不做操作，留給讀者自己去擴展。

可以看到我們導入了 popup.js 文件，在這個 JS 文件裡，我們需要完成對應打開新標籤頁、和訪問 Github 的邏輯配置：

document.querySelector(".open_new_tab").addEventListener("click", (e) => { chrome.tabs.create({}, => {});});document.querySelector(".go_to_github").addEventListener("click", (e) => { window.open("https://github.com");});

可以看到，因為 popup.js 是運行在 Chrome 插件的沙箱環境下的，所以它能夠使用到 chrome 這個 API，進行頁面、瀏覽器等相關的操作。

當我們寫入了上述邏輯之後，我們就可以點擊對應的打開新標籤頁，訪問新標籤頁並展示我們上一節說到的內容，訪問 Github，則會跳轉到 Github 頁面。

我們已經開發了新 Tab 頁，開發了 Popup 邏輯，接下來我們可以嘗試一下通過 content 腳本，來實現用戶頁面與插件腳本進行通信，以間接的操作 DOM。

首先我們需要在 manifest.json 裡面註冊 content 相關的腳本：

{ "name": "Chrome React Extension", // ... "permissions": ["activeTab", "tabs"], "content_scripts": [ { "matches": ["http://*/*", "https://*/*"], "js": ["./static/js/content.js"] } ]}

上述腳本通過 content_scripts 指定 content 腳本，matches 指定匹配到那些域名時，才執行這個注入腳本的邏輯，js 代表需要注入的腳本的位置，這裡我們填寫的為 ./static/js/content.js ，即為通過構建之後產生的 JS 內容地址。

接著我們在 Tab 頁的 React 項目裡面去建立與 content 腳本的通信：

import React from "react";import "./App.css";import { DOMMessage, DOMMessageResponse } from "./types";function App { // 前置邏輯 React.useEffect( => { /** * We can't use "chrome.runtime.sendMessage" for sending messages from React. * For sending messages from React we need to specify which tab to send it to. */ chrome.tabs && chrome.tabs.query( { active: true, currentWindow: true, }, (tabs) => { /** * Sends a single message to the content script(s) in the specified tab, * with an optional callback to run when a response is sent back. * * The runtime.onMessage event is fired in each content script running * in the specified tab for the current extension. */ chrome.tabs.sendMessage( tabs[0].id || 0, { type: "GET_DOM" } as DOMMessage, (response: DOMMessageResponse) => { setTitle(response.title); setHeadlines(response.headlines); } ); } ); }); return ( // ... 模板 );}export default App;

可以看到我們通過 chome API，去查詢當前正在激活的 Tab 頁，然後給這個 Tab 頁的 content 腳本，通過 chrome.tabs.sendMessage 發了一個 { type: "GET_DOM" } 的消息。

然後我們創建對應的 content 的腳本，在 src/chromeServices 下創建 DOMEvaluator.ts：

import { DOMMessage, DOMMessageResponse } from "../types";// Function called when a new message is received const messagesFromReactAppListener = ( msg: DOMMessage, sender: chrome.runtime.MessageSender, sendResponse: (response: DOMMessageResponse) => void) => { console.log("[content.js]. Message received", msg); const headlines = Array.from(document.getElementsByTagName("h1")).map( (h1) => h1.innerText ); // Prepare the response object with information about the site const response: DOMMessageResponse = { title: document.title, headlines, }; sendResponse(response);};/** * Fired when a message is sent from either an extension process or a content script. */ chrome.runtime.onMessage.addListener(messagesFromReactAppListener);

這個腳本在加載的時候，通過 onMessage.addListener 監聽，然後回調 messagesFromReactAppListener ，在函數裡面，可以直接獲取 DOM，查詢這個頁面中的 標題 和所有的 H1 標籤，然後返回。

import React from "react";import "./App.css";import { DOMMessage, DOMMessageResponse } from "./types";function App { const [title, setTitle] = React.useState(""); const [headlines, setHeadlines] = React.useState([]); // ...消息通信邏輯 return ( // ... 模板 SEO Extension built with React! Title <span className={`SEOValidationFieldStatus ${ title.length 65 ? "Error" : "Ok" }`} > {title.length} Characters {title} Main Heading {headlines.length} {headlines.map((headline, index) => ( {headline} ))} );}export default App;

然後擴展一下 CSS 代碼：

.App { background: #edf0f6; padding: 0.5rem;}.SEOForm { list-style: none; margin: 0; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px 0 rgb(0 0 0 / 6%); background: #fff; padding: 1rem;}.SEOValidation { margin-bottom: 1.5rem;}.SEOValidationField { width: 100%; display: flex; justify-content: space-between;}.SEOValidationFieldTitle { font-size: 1rem; color: #1a202c; font-weight: bold;}.SEOValidationFieldStatus { color: #fff; padding: 0 1rem; height: 1.5rem; font-weight: bold; align-items: center; display: flex; border-radius: 9999px;}.SEOValidationFieldStatus.Error { background-color: #f23b3b;}.SEOValidationFieldStatus.Ok { background-color: #48d660;}.SEOVAlidationFieldValue { overflow-wrap: break-word; width: 100%; font-size: 1rem; margin-top: 0.5rem; color: #4a5568;}

Nice！我們成功編寫了新 Tab 頁模板、邏輯與樣式，以及創建了 Content 腳本邏輯，最後我們的展示效果如下：

然後我們需要進行代碼構建，因為 content 我們使用 TypeScript 語法寫，將 content 的邏輯構建為單獨的 JS 輸出，我們安裝 craco 依賴，然後修改對應的腳本：

yarn add -D craco

// package.json"scripts": { "start": "react-scripts start", "build": "INLINE_RUNTIME_CHUNK=false craco build", "test": "react-scripts test", "eject": "react-scripts eject" },

將 react-scripts 改為 craco 。

然後新建 craco.config.js ，添加如下內容：

module.exports = { webpack: { configure: (webpackConfig, { env, paths }) => { return { ...webpackConfig, entry: { main: [ env === "development" && require.resolve("react-dev-utils/webpackHotDevClient"), paths.appIndexJs, ].filter(Boolean), content: "./src/chromeServices/DOMEvaluator.ts", }, output: { ...webpackConfig.output, filename: "static/js/[name].js", }, optimization: { ...webpackConfig.optimization, runtimeChunk: false, }, }; }, },};

準備完畢，開始構建：yarn`` build ，我們會發現構建目錄輸出如下：

在本篇文章中，我們完整體驗了使用 React TypeScript，開發新 Tab 內容展示頁以及 content 通信腳本，然後通過配置 react-scripts 為 craco 進行了分文件構建，以及直接開發原生的 popup 頁，通過這種融匯的技術，成功開發出了一個類似掘金框架的 Chrome 插件。

這篇文章沒有介紹的有 background 腳本，以及整體插件內容還不夠完善，希望有興趣的讀者可以繼續探索，將其完善。

以上便是本次分享的全部內容，希望對你有所幫助^_^

喜歡的話別忘了 分享、點讚、收藏 三連哦~

歡迎關注公眾號 程式設計師巴士，來自字節、蝦皮、招銀的三端兄弟，分享編程經驗、技術乾貨與職業規劃，助你少走彎路進大廠。