介紹

在本部落格中，我們將探索如何使用 TypeScript、React、Tailwind CSS 和 Webpack 設(shè)定和開發(fā) Chrome 擴(kuò)充功能。我們將創(chuàng)建一個(gè)名為「NoteMe」的最小擴(kuò)充??來測試我們的理解。我們的擴(kuò)充功能將包括以下功能：

• 允許使用者為給定網(wǎng)站添加多個(gè)註解
• 使用戶能夠查看給定網(wǎng)站的已儲(chǔ)存筆記
• 提供刪除給定網(wǎng)站的註解的選項(xiàng)
• 將筆記本地保存在瀏覽器儲(chǔ)存中
• 可選擇與雲(yún)端儲(chǔ)存後端同步筆記

複習(xí)

在本部落格中，我們將學(xué)習(xí)如何使用現(xiàn)代技術(shù)建立 Chrome 擴(kuò)充功能。本指南假設(shè)您已經(jīng)對在本機(jī)開發(fā)期間建置和上傳 Chrome 擴(kuò)充功能有一定的了解。如果您對此不熟悉或需要詳細(xì)的基礎(chǔ)知識演練，我建議您查看我之前的部落格：連結(jié)

擴(kuò)展預(yù)覽

擴(kuò)充功能將包括以下組件：

• 切換按鈕：開啟和關(guān)閉側(cè)邊欄的按鈕。
• 側(cè)邊欄：多功能面板，使用者可以： 寫新筆記。 查看已儲(chǔ)存的筆記。 刪除已儲(chǔ)存的筆記。 與後端同步筆記（程式碼中提供，但目前未連接後端）。
• 彈出視窗：一個(gè)小窗口，允許使用者將切換按鈕（用於開啟/關(guān)閉側(cè)邊欄）重新定位在螢?zāi)簧系念A(yù)先指定位置 注意：雖然此實(shí)現(xiàn)中沒有後端集成，但程式碼包含將來連接後端的規(guī)定。

下面的螢?zāi)唤貓D展示了擴(kuò)展完成後的外觀：

先決條件

在深入學(xué)習(xí)本教學(xué)之前，請確保您的系統(tǒng)上安裝了以下工具：

• Node.js（v18.16 LTS 或更高版本）
• NPM（節(jié)點(diǎn)套件管理器，與 Node.js 捆綁）
• TypeScript
• Webpack
• VS 程式碼編輯器（或您選擇的任何程式碼編輯器）

從 40,000 英尺延伸

上圖提供了此擴(kuò)充的內(nèi)部工作原理的高級概述。以下是我們可以從圖中得到的一些關(guān)鍵點(diǎn)：

• 內(nèi)容腳本直接與父網(wǎng)頁的 DOM 交互，使其能夠修改頁面的內(nèi)容。
• 彈出視窗、背景和內(nèi)容腳本透過Chrome的執(zhí)行時(shí)間訊息系統(tǒng)相互通訊。
• 對於與Chrome 儲(chǔ)存或後端API 呼叫相關(guān)的任務(wù)，內(nèi)容 或彈出腳本使用執(zhí)行時(shí)間訊息系統(tǒng)將責(zé)任委託給後臺工作人員。
• 後臺腳本充當(dāng)應(yīng)用後端和Chrome儲(chǔ)存的唯一中介。它還使用運(yùn)行時(shí)訊息傳遞將通知（如果有）轉(zhuǎn)發(fā)給其他腳本。
• 彈出視窗和內(nèi)容腳本直接透過Chrome的執(zhí)行時(shí)間訊息傳遞系統(tǒng)交換訊息。

擴(kuò)充的設(shè)定

雖然 Chrome 擴(kuò)充功能不強(qiáng)制要求特定的專案結(jié)構(gòu)，但它們確實(shí)需要一個(gè)位於建置目錄根目錄的 manifest.json 檔案。利用這種靈活性，我們將定義一個(gè)自訂專案結(jié)構(gòu)，幫助有效地組織不同的腳本。這種結(jié)構(gòu)將能夠更好地跨腳本重複使用程式碼並最大程度地減少重複，從而簡化我們的開發(fā)流程。

第一步：建立專案的基本目錄結(jié)構(gòu)

首先，我們將為該專案設(shè)定一個(gè)基礎(chǔ)目錄結(jié)構(gòu)。您可以使用以下 bash 腳本來建立基本結(jié)構(gòu)以及 manifest.json 檔案：

#!/bin/bash

bash_script_absolute_path=$(pwd)
declare public_paths=("public" "public/assets" "public/assets/images")
declare source_paths=("src" "src/lib" "src/scripts" "src/scripts/background" "src/scripts/content" "src/scripts/injected" "src/scripts/popup" "src/styles")
declare public_directory_path="public"
declare manifest_file="manifest.json"
declare project_name="note-me"

create_directory () {
? ? if [ ! -d "" ]; then
? ? ? ? mkdir 
? ? fi
}

create_file () {
? ? if [ ! -e "/" ]; then
? ? ? ? touch /
? ? fi
}

create_public_directories () {
? ? for public_path in "${public_paths[@]}";
? ? do
? ? ? ? create_directory $public_path
? ? done
}

create_source_directories () {
? ? for source_path in "${source_paths[@]}";
? ? do
? ? ? ? create_directory $source_path
? ? done
}

execute () {
? ? echo "creating project struture at "${bash_script_absolute_path}
? ? create_directory $project_name
? ? cd $bash_script_absolute_path"/"$project_name
? ? create_public_directories
? ? create_source_directories
? ? create_file $manifest_file $public_directory_path
? ? echo "done creating project struture at "${bash_script_absolute_path}" with project name "$project_name
}

execute

確保您的目錄結(jié)構(gòu)類似於下面的螢?zāi)唤貓D所示。

步驟 2：位於公用目錄中的manifest.json 檔案的結(jié)構(gòu)應(yīng)如下所示：

{
? ? "manifest_version": 3,
? ? "name": "NoteMe",
? ? "version": "1.0",
? ? "description": "A Chrome extension built with React and TypeScript using Webpack.",
? ? "action": {
? ? ? "default_popup": "popup.html",
? ? ? "default_icon": "app-icon.png"
? ? },
? ? "background": {
? ? ? "service_worker": "background.js",
? ? ? "type": "module"
? ? },
? ? "content_scripts": [
? ? ? {
? ? ? ? "matches": ["<all_urls>"],
? ? ? ? "js": ["content.js"],
? ? ? ? "run_at": "document_end"
? ? ? }
? ? ],
? ? "permissions": [
? ? ? "storage",
? ? ? "activeTab",
? ? ? "scripting",
? ? ? "webNavigation"
? ? ],
? ? "host_permissions": ["<all_urls>"],
? ? "web_accessible_resources": [
? ? ? {
? ? ? ? "resources": ["styles.css", "sidebar-open.png", "sidebar-close.png"],
? ? ? ? "matches": ["<all_urls>"]
? ? ? }
? ? ]
? }

注意事項(xiàng)：

• 檔案副檔名是.js，因?yàn)?ts檔會(huì)被編譯成.js文件，在Chrome環(huán)境下執(zhí)行時(shí)需要。
• 匹配欄位使用;作為其值，使擴(kuò)充功能能夠在 Chrome 中載入的任何網(wǎng)頁上運(yùn)行。
• 引用了三個(gè)圖片檔案：app-icon.png、sidebar-open.png、sidebar-close.png。您可以在本部落格末尾連結(jié)的儲(chǔ)存庫中找到這些文件。
• 專案建置後，manifest.json 檔案必須放置在 dist 目錄的根層級。為了確保這一點(diǎn)，我們需要配置 webpack 設(shè)定以在建置過程中適當(dāng)?shù)匾苿?dòng)它。

步驟3：初始化npm並安裝依賴項(xiàng)

• 首先使用以下指令在專案中初始化 npm：npm init -y
• 將必要的開發(fā)依賴項(xiàng)加入到專案的 devDependencies 部分。運(yùn)行以下命令： npm i --save-dev @types/chrome @types/react @types/react-dom autoprefixer copy-webpack-plugin css-loader mini-css-extract-plugin postcss postcss-loader style-loader tailwindcss ts-loader typescript webpackpackss webpack-cli webpack-dev-server
• 新增運(yùn)行項(xiàng)目所需的運(yùn)行時(shí)相依性： npm i --保存反應(yīng)反應(yīng)-dom

步驟 4：建立在manifest.json中引用的文件

建立在manifest.json中引用的以下檔案：backgroun.ts、content.ts和popup.html。

• background.ts：在 src/scripts/background 目錄中建立此檔案
• content.ts：在 src/scripts/content 目錄中建立此檔案
• popup.html 在公共目錄中建立此檔案

步驟5：更新彈出視窗和背景程式碼

在public目錄下的popup.html檔案中加入以下程式碼：

#!/bin/bash

bash_script_absolute_path=$(pwd)
declare public_paths=("public" "public/assets" "public/assets/images")
declare source_paths=("src" "src/lib" "src/scripts" "src/scripts/background" "src/scripts/content" "src/scripts/injected" "src/scripts/popup" "src/styles")
declare public_directory_path="public"
declare manifest_file="manifest.json"
declare project_name="note-me"

create_directory () {
? ? if [ ! -d "" ]; then
? ? ? ? mkdir 
? ? fi
}

create_file () {
? ? if [ ! -e "/" ]; then
? ? ? ? touch /
? ? fi
}

create_public_directories () {
? ? for public_path in "${public_paths[@]}";
? ? do
? ? ? ? create_directory $public_path
? ? done
}

create_source_directories () {
? ? for source_path in "${source_paths[@]}";
? ? do
? ? ? ? create_directory $source_path
? ? done
}

execute () {
? ? echo "creating project struture at "${bash_script_absolute_path}
? ? create_directory $project_name
? ? cd $bash_script_absolute_path"/"$project_name
? ? create_public_directories
? ? create_source_directories
? ? create_file $manifest_file $public_directory_path
? ? echo "done creating project struture at "${bash_script_absolute_path}" with project name "$project_name
}

execute

注意：

上面的程式碼安裝了兩個(gè)監(jiān)聽器：

1. 只要瀏覽器中安裝了擴(kuò)充程序，由 chrome.runtime.onInstalled.addListener 註冊的函數(shù)就會(huì)執(zhí)行。這可用於以預(yù)定義狀態(tài)初始化 Chrome 儲(chǔ)存體或後端（如果適用）。
2. 每當(dāng)後臺腳本收到來自內(nèi)容或彈出腳本的訊息時(shí)，就會(huì)執(zhí)行由 chrome.runtime.onMessage.addListener 註冊的函數(shù)。

此外，import 語句從 src/lib 目錄引入監(jiān)聽器。核心應(yīng)用程式邏輯建構(gòu)在 src/lib 中，可以在不同上下文（例如內(nèi)容和後臺腳本）之間重複使用。

第 6 步：瀏覽 src/lib 目錄

src/lib 目錄包含擴(kuò)充的核心邏輯。以下是其結(jié)構(gòu)和關(guān)鍵組件的概述：

• 組件目錄： 包含擴(kuò)充功能中使用的所有 React 元件。
• lib/components/ContentApp.tsx: 充當(dāng)內(nèi)容腳本的容器元件。
• lib/components/NoteMePosition.tsx: 包含負(fù)責(zé)彈出腳本的組件。
• helpers.ts： 包括整個(gè)擴(kuò)充中使用的輔助函數(shù)。
• 儲(chǔ)存模型.ts： 管理與 Chrome 本地儲(chǔ)存的互動(dòng)。有關(guān)儲(chǔ)存資料結(jié)構(gòu)的詳細(xì)信息，請參閱此文件以及 types.ts。
• 類型.ts： 定義擴(kuò)充中使用的自訂類型。
• worker.ts： 包含後臺事件監(jiān)聽器的回呼。

詳細(xì)實(shí)作請參考倉庫中的實(shí)際代碼。

第7步：安裝React元件

在這一步驟中，我們掛載React元件進(jìn)行渲染。這些組件安裝在兩個(gè)不同的腳本中：src/scripts/content/content.ts 和 src/scripts/popup/popup.ts。

彈出式腳本：位於 src/scripts/popup/popup.ts。

#!/bin/bash

bash_script_absolute_path=$(pwd)
declare public_paths=("public" "public/assets" "public/assets/images")
declare source_paths=("src" "src/lib" "src/scripts" "src/scripts/background" "src/scripts/content" "src/scripts/injected" "src/scripts/popup" "src/styles")
declare public_directory_path="public"
declare manifest_file="manifest.json"
declare project_name="note-me"

create_directory () {
? ? if [ ! -d "" ]; then
? ? ? ? mkdir 
? ? fi
}

create_file () {
? ? if [ ! -e "/" ]; then
? ? ? ? touch /
? ? fi
}

create_public_directories () {
? ? for public_path in "${public_paths[@]}";
? ? do
? ? ? ? create_directory $public_path
? ? done
}

create_source_directories () {
? ? for source_path in "${source_paths[@]}";
? ? do
? ? ? ? create_directory $source_path
? ? done
}

execute () {
? ? echo "creating project struture at "${bash_script_absolute_path}
? ? create_directory $project_name
? ? cd $bash_script_absolute_path"/"$project_name
? ? create_public_directories
? ? create_source_directories
? ? create_file $manifest_file $public_directory_path
? ? echo "done creating project struture at "${bash_script_absolute_path}" with project name "$project_name
}

execute

內(nèi)容腳本：位於 src/scripts/content/content.ts。

{
? ? "manifest_version": 3,
? ? "name": "NoteMe",
? ? "version": "1.0",
? ? "description": "A Chrome extension built with React and TypeScript using Webpack.",
? ? "action": {
? ? ? "default_popup": "popup.html",
? ? ? "default_icon": "app-icon.png"
? ? },
? ? "background": {
? ? ? "service_worker": "background.js",
? ? ? "type": "module"
? ? },
? ? "content_scripts": [
? ? ? {
? ? ? ? "matches": ["<all_urls>"],
? ? ? ? "js": ["content.js"],
? ? ? ? "run_at": "document_end"
? ? ? }
? ? ],
? ? "permissions": [
? ? ? "storage",
? ? ? "activeTab",
? ? ? "scripting",
? ? ? "webNavigation"
? ? ],
? ? "host_permissions": ["<all_urls>"],
? ? "web_accessible_resources": [
? ? ? {
? ? ? ? "resources": ["styles.css", "sidebar-open.png", "sidebar-close.png"],
? ? ? ? "matches": ["<all_urls>"]
? ? ? }
? ? ]
? }

要點(diǎn)：

• 單獨(dú)的安裝腳本： ? 彈出視窗和內(nèi)容腳本在不同的情境中執(zhí)行 ?
• 彈出腳本： 在載入它的 popup.html 網(wǎng)頁的上下文中運(yùn)行。 ?
• 內(nèi)容腳本：在瀏覽器中載入的主網(wǎng)頁的上下文中運(yùn)行。
• 內(nèi)容腳本的 Shadow DOM： ?
  • 內(nèi)容腳本注入的樣式可能會(huì)影響父網(wǎng)頁的外觀。 ?
  • 為了防止這種情況，我們使用 Shadow DOM 來封裝樣式，確保它們在擴(kuò)充中保持隔離。 ?
  • 這對於彈出腳本來說不是必需的，因?yàn)樗谧约旱母綦x環(huán)境（popup.html）中運(yùn)行。

第8步：編譯和建置的配置

加入編譯和建置擴(kuò)充功能所需的配置

要成功編譯和建置擴(kuò)展，我們需要設(shè)定以下檔案：

1. postcss.config.js
2. tailwind.config.js
3. tsconfig.json
4. webpack.config.js

要點(diǎn)：

• 預(yù)設(shè)設(shè)定： 只要有可能，都會(huì)提供預(yù)設(shè)設(shè)定來簡化流程並確保重點(diǎn)始終放在主要目標(biāo)上 - 建立功能齊全的擴(kuò)充。
• 儲(chǔ)存庫中的詳細(xì)資訊：這些檔案的完整配置和詳細(xì)設(shè)定請參考程式碼儲(chǔ)存庫。

這些組態(tài)處理 TypeScript 編譯、Tailwind CSS 整合以及擴(kuò)充的整體 Webpack 建置流程。

測試擴(kuò)展

1. 產(chǎn)生 dist 目錄： 執(zhí)行下列指令建立 dist 目錄：npm run build
2. 上傳至 Chrome： ? ?
   • 開啟 Chrome 並導(dǎo)覽至 chrome://extensions/。 ? ?
   • 啟用右上角的開發(fā)者模式。 ? ?
   • 點(diǎn)選載入已解壓縮的並選擇dist目錄。
3. 驗(yàn)證安裝：
   • 載入後，擴(kuò)充功能的圖示將預(yù)設(shè)出現(xiàn)在每個(gè)頁面的右下角。
4. 功能檢查：
   • 位置控制：使用彈出視窗中的控制項(xiàng)來變更圖示的位置。
   • 註解功能：每個(gè)網(wǎng)站的註解都是獨(dú)立保存的，並且可以針對特定網(wǎng)站刪除而不影響其他網(wǎng)站。
5. 後端模擬：
   • 雖然目前沒有連接後端，但程式碼包含與後端整合的規(guī)定。
   • 目前實(shí)作使用 setTimeout 模擬後端連接，並承諾模擬非同步互動(dòng)。

以下是擴(kuò)展測試期間捕獲的一些螢?zāi)唤貓D。

重點(diǎn)

以下是此部落格的一些關(guān)鍵要點(diǎn)，

• 我們探索了 Chrome 環(huán)境的各種元件（例如內(nèi)容腳本、彈出式腳本和後臺工作人員）如何使用 Chrome 的執(zhí)行時(shí)間訊息系統(tǒng)相互通訊。
• 我們學(xué)習(xí)如何從頭開始配置和建立 Chrome 擴(kuò)展，包括設(shè)定專案結(jié)構(gòu)、安裝依賴項(xiàng)和編寫核心功能。
• 我們發(fā)現(xiàn)了一些好的做法，例如：
  • 增強(qiáng)跨腳本的程式碼可重複使用性，以實(shí)現(xiàn)可維護(hù)性和可擴(kuò)充性。
  • 在內(nèi)容腳本中使用 Shadow DOM 來防止與父網(wǎng)頁的樣式衝突。

瞥見前方

將來，我計(jì)劃撰寫另一個(gè)博客，我們將探索將功能齊全的 Chrome 擴(kuò)充功能發(fā)佈到 Chrome 線上應(yīng)用程式商店的過程。該部落格的目標(biāo)是：

• 開發(fā)一個(gè)足夠複雜的擴(kuò)充來解決現(xiàn)實(shí)世界的問題。
• 示範(fàn)將擴(kuò)充功能發(fā)佈到 Chrome 應(yīng)用程式商店的逐步流程。

感謝您花時(shí)間閱讀此部落格！您的興趣和支持對我來說意義重大。在繼續(xù)這趟旅程時(shí)，我很高興能分享更多見解。

編碼愉快！

github 連結(jié)：https://github.com/gauravnadkarni/chrome-extension-starter-app

本文原刊於Medium。

以上是Chrome 擴(kuò)充功能開發(fā) - 使用 TypeScript、React、Tailwind CSS 和 Webpack 開發(fā)最小應(yīng)用程式的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！