在本部落格中，我們將探索如何使用 TypeScript、React、Tailwind CSS 和 Webpack 設定和開發 Chrome 擴充功能。我們將創建一個名為「NoteMe」的最小擴充✍️來測試我們的理解。我們的擴充功能將包括以下功能：
在本部落格中，我們將學習如何使用現代技術建立 Chrome 擴充功能。本指南假設您已經對在本機開發期間建置和上傳 Chrome 擴充功能有一定的了解。如果您對此不熟悉或需要詳細的基礎知識演練，我建議您查看我之前的部落格：連結
擴充功能將包括以下組件：
下面的螢幕截圖展示了擴展完成後的外觀：
在深入學習本教學之前，請確保您的系統上安裝了以下工具：
上圖提供了此擴充的內部工作原理的高級概述。以下是我們可以從圖中得到的一些關鍵點：
雖然 Chrome 擴充功能不強制要求特定的專案結構，但它們確實需要一個位於建置目錄根目錄的 manifest.json 檔案。利用這種靈活性，我們將定義一個自訂專案結構，幫助有效地組織不同的腳本。這種結構將能夠更好地跨腳本重複使用程式碼並最大程度地減少重複，從而簡化我們的開發流程。
首先，我們將為該專案設定一個基礎目錄結構。您可以使用以下 bash 腳本來建立基本結構以及 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
確保您的目錄結構類似於下面的螢幕截圖所示。
{
"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>"]
}
]
}
注意事項：
建立在manifest.json中引用的以下檔案：backgroun.ts、content.ts和popup.html。
在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
注意：
上面的程式碼安裝了兩個監聽器：
此外，import 語句從 src/lib 目錄引入監聽器。核心應用程式邏輯建構在 src/lib 中，可以在不同上下文（例如內容和後台腳本）之間重複使用。
src/lib 目錄包含擴充的核心邏輯。以下是其結構和關鍵組件的概述：
詳細實作請參考倉庫中的實際代碼。
在這一步驟中，我們掛載React元件進行渲染。這些組件安裝在兩個不同的腳本中：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
內容腳本：位於 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>"]
}
]
}
加入編譯和建置擴充功能所需的配置
要成功編譯和建置擴展，我們需要設定以下檔案：
這些組態處理 TypeScript 編譯、Tailwind CSS 整合以及擴充的整體 Webpack 建置流程。
以下是擴展測試期間捕獲的一些螢幕截圖。
以下是此部落格的一些關鍵要點，
將來，我計劃撰寫另一個博客，我們將探索將功能齊全的 Chrome 擴充功能發佈到 Chrome 線上應用程式商店的過程。該部落格的目標是：
感謝您花時間閱讀此部落格！您的興趣和支持對我來說意義重大。在繼續這趟旅程時，我很高興能分享更多見解。
編碼愉快！
github 連結：https://github.com/gauravnadkarni/chrome-extension-starter-app
本文原刊於Medium。
以上是Chrome 擴充功能開發 - 使用 TypeScript、React、Tailwind CSS 和 Webpack 開發最小應用程式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
