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

Chrome - 雜亂無章階段

Chrome - 進行適當整理

Edge - 豎向側邊欄

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

需求分析

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

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

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

彈出欄：

新 Tab：

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

彈出框：

新 Tab：

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

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

• React + TypeScript，基于 Create-React-App 腳手架搭建

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

前置知識

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

• manifest.json 文件，相當于整個項目的入口，里面記錄著此插件的 icon 圖標展示、彈出框樣式文件、新建 Tab 邏輯、選項邏輯、內容腳本邏輯等

• background.js，此腳本是在整個瀏覽器啟動或者插件加載之后就會運行的一個腳本文件，它運行在 ServiceWorker 里面，通常用于進行一些前置的數據 storage 存儲操作，可以操作所有的 Chrome API

• popup.html，插件的彈出框展示的模板內容，可以通過 CSS 控制樣式，JavaScript 控制邏輯

• options.html，右鍵插件 icon 時彈出菜單頁，點擊菜單頁里面的選項打開的頁面

• content.js，此腳本是在你打開一個新的網頁的時候，Chrome 瀏覽器為這個網頁注入的一個腳本文件，用于輔助此網頁和你的插件進行一個通信，因為插件的運行環境是經過沙盒隔離的，無法直接操作到 DOM，所以需要通過 content 腳本操作 DOM，然后發送給到插件的處理邏輯

上述 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"
   }
}

上述的字段說明如下：

• name：插件的名字，展示在 Chrome 插件 icon 里面，以及插件市場等

• description：簡介插件時干嘛的

• version：插件當前的版本

• manifest_version：當前使用的 manifest 文件的版本，Chrome 插件最小的 manifest 版本是 V3

• action：控制點擊插件 icon 時的需要反應的動作（action），這里我們設置 hover 時展示的文字為 default_title，點擊打開展示的內容為 index.html

• icons：為展示在 Chrome 插件里面的圖標

實際上 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 邏輯

我們之前的邏輯是，只要新開一個 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 頁面，同樣是對標掘金，我們知道掘金的 Popup 頁面是一個比較簡單的菜單欄，里面主要是一些用于跳轉到新 Tab 或者設置頁的操作：

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

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Fake Juejin Extensions</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <ul>
      <li class="open_new_tab">打開新標簽頁</li>
      <li class="go_to_github">訪問 Github</li>
      <li class="go_to_settings">設置</li>
    </ul>
    <script src="popup.js"></script>
  </body>
</html>

這一次需求我們只會操作打開新標簽頁、訪問 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 頁面。

使用 Content 腳本

我們已經開發了新 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">("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<string[]>([]);

  // ...消息通信邏輯

  return (
    // ... 模板
    <div className="App">
      <h1>SEO Extension built with React!</h1>

      <ul className="SEOForm">
        <li className="SEOValidation">
          <div className="SEOValidationField">
            <span className="SEOValidationFieldTitle">Title</span>
            <span
              className={`SEOValidationFieldStatus ${
                title.length < 30 || title.length > 65 ? "Error" : "Ok"
              }`}
            >
              {title.length} Characters
            </span>
          </div>
          <div className="SEOVAlidationFieldValue">{title}</div>
        </li>

        <li className="SEOValidation">
          <div className="SEOValidationField">
            <span className="SEOValidationFieldTitle">Main Heading</span>
            <span
              className={`SEOValidationFieldStatus ${
                headlines.length !==1 ? "Error" : "Ok"
              }`}
            >
              {headlines.length}
            </span>
          </div>
          <div className="SEOVAlidationFieldValue">
            <ul>
              {headlines.map((headline, index)=> (
                <li key={index}>{headline}</li>
              ))}
            </ul>
          </div>
        </li>
      </ul>
    </div>
  );
}

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 腳本，以及整體插件內容還不夠完善，希望有興趣的讀者可以繼續探索，將其完善。

??/ 感謝支持 /

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

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

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