介紹

在本博客中，我們將探索如何使用 TypeScript、React、Tailwind CSS 和 Webpack 設(shè)置和開發(fā) Chrome 擴(kuò)展。我們將創(chuàng)建一個(gè)名為“NoteMe”的最小擴(kuò)展??來(lái)測(cè)試我們的理解。我們的擴(kuò)展將包括以下功能：

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

復(fù)習(xí)

在本博客中，我們將學(xué)習(xí)如何使用現(xiàn)代技術(shù)構(gòu)建 Chrome 擴(kuò)展程序。本指南假設(shè)您已經(jīng)對(duì)在本地開發(fā)期間構(gòu)建和上傳 Chrome 擴(kuò)展程序有一定的了解。如果您對(duì)此不熟悉或需要詳細(xì)的基礎(chǔ)知識(shí)演練，我建議您查看我之前的博客：鏈接

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

該擴(kuò)展將包括以下組件：

• 切換按鈕：打開和關(guān)閉側(cè)邊欄的按鈕。
• 側(cè)邊欄：多功能面板，用戶可以： 寫新筆記。 查看保存的筆記。 刪除已保存的筆記。 與后端同步筆記（代碼中提供，但當(dāng)前未連接后端）。
• 彈出窗口：一個(gè)小窗口，允許用戶將切換按鈕（用于打開/關(guān)閉側(cè)邊欄）重新定位在屏幕上的預(yù)先指定位置 注意：雖然此實(shí)現(xiàn)中沒有后端集成，但代碼包含將來(lái)連接后端的規(guī)定。

下面的屏幕截圖展示了擴(kuò)展完成后的外觀：

先決條件

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

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

從 40,000 英尺延伸

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

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

擴(kuò)展的設(shè)置

雖然 Chrome 擴(kuò)展項(xiàng)目不強(qiáng)制要求特定的項(xiàng)目結(jié)構(gòu)，但它們確實(shí)需要一個(gè)位于構(gòu)建目錄根目錄的 manifest.json 文件。利用這種靈活性，我們將定義一個(gè)自定義項(xiàng)目結(jié)構(gòu)，幫助有效地組織不同的腳本。這種結(jié)構(gòu)將能夠更好地跨腳本重用代碼并最大程度地減少重復(fù)，從而簡(jiǎn)化我們的開發(fā)流程。

第一步：創(chuàng)建項(xiàng)目的基本目錄結(jié)構(gòu)

首先，我們將為該項(xiàng)目設(shè)置一個(gè)基礎(chǔ)目錄結(jié)構(gòu)。您可以使用以下 bash 腳本來(lái)創(chuàng)建基本結(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)類似于下面的屏幕截圖所示。

步驟 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)：

• 文件擴(kuò)展名是.js，因?yàn)?ts文件會(huì)被編譯成.js文件，在Chrome環(huán)境下運(yùn)行時(shí)需要。
• 匹配字段使用;作為其值，使擴(kuò)展程序能夠在 Chrome 中加載的任何網(wǎng)頁(yè)上運(yùn)行。
• 引用了三個(gè)圖片文件：app-icon.png、sidebar-open.png、sidebar-close.png。您可以在本博客末尾鏈接的存儲(chǔ)庫(kù)中找到這些文件。
• 項(xiàng)目構(gòu)建后，manifest.json 文件必須放置在 dist 目錄的根級(jí)別。為了確保這一點(diǎn)，我們需要配置 webpack 設(shè)置以在構(gòu)建過(guò)程中適當(dāng)?shù)匾苿?dòng)它。

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

• 首先使用以下命令在項(xiàng)目中初始化 npm：npm init -y
• 將必要的開發(fā)依賴項(xiàng)添加到項(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 webpack webpack-cli webpack-dev-server
• 添加運(yùn)行項(xiàng)目所需的運(yùn)行時(shí)依賴項(xiàng)： npm i --保存反應(yīng)反應(yīng)-dom

步驟 4：創(chuàng)建在manifest.json中引用的文件

創(chuàng)建在manifest.json中引用的以下文件：backgroun.ts、content.ts和popup.html。

• background.ts：在 src/scripts/background 目錄中創(chuàng)建此文件
• content.ts：在 src/scripts/content 目錄中創(chuàng)建此文件
• popup.html 在公共目錄中創(chuàng)建此文件

第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 注冊(cè)的函數(shù)就會(huì)執(zhí)行。這可用于以預(yù)定義狀態(tài)初始化 Chrome 存儲(chǔ)或后端（如果適用）。
2. 每當(dāng)后臺(tái)腳本收到來(lái)自內(nèi)容或彈出腳本的消息時(shí)，由 chrome.runtime.onMessage.addListener 注冊(cè)的函數(shù)就會(huì)執(zhí)行。

此外，import 語(yǔ)句從 src/lib 目錄引入監(jiān)聽器。核心應(yīng)用程序邏輯構(gòu)建在 src/lib 中，可以在不同上下文（例如內(nèi)容和后臺(tá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ǔ)的交互。有關(guān)存儲(chǔ)數(shù)據(jù)結(jié)構(gòu)的詳細(xì)信息，請(qǐng)參閱此文件以及 types.ts。
• 類型.ts： 定義擴(kuò)展中使用的自定義類型。
• worker.ts： 包含后臺(tái)事件監(jiān)聽器的回調(diào)。

詳細(xì)實(shí)現(xiàn)請(qǐng)參考倉(cāng)庫(kù)中的實(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)容腳本在不同的上下文中運(yùn)行 ?
• 彈出腳本： 在加載它的 popup.html 網(wǎng)頁(yè)的上下文中運(yùn)行。 ?
• 內(nèi)容腳本：在瀏覽器中加載的主網(wǎng)頁(yè)的上下文中運(yùn)行。
• 內(nèi)容腳本的 Shadow DOM： ?
  • 內(nèi)容腳本注入的樣式可能會(huì)影響父網(wǎng)頁(yè)的外觀。 ?
  • 為了防止這種情況，我們使用 Shadow DOM 來(lái)封裝樣式，確保它們?cè)跀U(kuò)展中保持隔離。 ?
  • 這對(duì)于彈出腳本來(lái)說(shuō)不是必需的，因?yàn)樗谧约旱母綦x環(huán)境（popup.html）中運(yùn)行。

第8步：編譯和構(gòu)建的配置

添加編譯和構(gòu)建擴(kuò)展所需的配置

要成功編譯和構(gòu)建擴(kuò)展，我們需要配置以下文件：

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

要點(diǎn)：

• 默認(rèn)設(shè)置： 只要有可能，都會(huì)提供默認(rèn)設(shè)置來(lái)簡(jiǎn)化流程并確保重點(diǎn)始終放在主要目標(biāo)上 - 構(gòu)建功能齊全的擴(kuò)展。
• 存儲(chǔ)庫(kù)中的詳細(xì)信息：這些文件的完整配置和詳細(xì)設(shè)置請(qǐng)參考代碼存儲(chǔ)庫(kù)。

這些配置處理 TypeScript 編譯、Tailwind CSS 集成以及擴(kuò)展的整體 Webpack 構(gòu)建過(guò)程。

測(cè)試擴(kuò)展

1. 生成 dist 目錄： 運(yùn)行以下命令創(chuàng)建 dist 目錄：npm run build
2. 上傳至 Chrome： ? ?
   • 打開 Chrome 并導(dǎo)航至 chrome://extensions/。 ? ?
   • 啟用右上角的開發(fā)者模式。 ? ?
   • 點(diǎn)擊加載已解壓的并選擇dist目錄。
3. 驗(yàn)證安裝：
   • 加載后，擴(kuò)展程序的圖標(biāo)將默認(rèn)出現(xiàn)在每個(gè)頁(yè)面的右下角。
4. 功能檢查：
   • 位置控制：使用彈出窗口中的控件來(lái)更改圖標(biāo)的位置。
   • 注釋功能：每個(gè)網(wǎng)站的注釋都是獨(dú)立保存的，并且可以針對(duì)特定網(wǎng)站刪除而不影響其他網(wǎng)站。
5. 后端模擬：
   • 雖然當(dāng)前沒有連接后端，但代碼包含與后端集成的規(guī)定。
   • 當(dāng)前實(shí)現(xiàn)使用 setTimeout 模擬后端連接，并承諾模擬異步交互。

以下是擴(kuò)展測(cè)試期間捕獲的一些屏幕截圖。

要點(diǎn)

以下是此博客的一些關(guān)鍵要點(diǎn)，

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

瞥見前方

將來(lái)，我計(jì)劃撰寫另一個(gè)博客，我們將探索將功能齊全的 Chrome 擴(kuò)展程序發(fā)布到 Chrome 網(wǎng)上應(yīng)用店的過(guò)程。該博客的目標(biāo)是：

• 開發(fā)一個(gè)足夠復(fù)雜的擴(kuò)展來(lái)解決現(xiàn)實(shí)世界的問(wèn)題。
• 演示將擴(kuò)展程序發(fā)布到 Chrome 應(yīng)用商店的分步過(guò)程。

感謝您花時(shí)間閱讀此博客！您的興趣和支持對(duì)我來(lái)說(shuō)意義重大。在繼續(xù)這一旅程時(shí)，我很高興能分享更多見解。

編碼愉快！

github 鏈接：https://github.com/gauravnadkarni/chrome-extension-starter-app

本文最初發(fā)表于Medium。

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