HelloWorld Chrome Web Extension
-
建立專案資料夾：
mkdir HelloWord cd HelloWord -
初始化專案：
npm init -y
-
建立必要的檔案和資料夾：
mkdir src touch src/manifest.json src/background.js src/index.html src/index.js src/content.js mkdir -p src/images/icons
-
編輯
manifest.json文件，內容如下：{ "manifest_version": 3, "name": "HelloWorld", "version": "0.1.0", "description": "My Chrome Extension", "background": { "service_worker": "background.js" }, "action": { "default_popup": "index.html", "default_icon": { "16": "images/icons/icon-16.png", "32": "images/icons/icon-32.png", "64": "images/icons/icon-64.png", "128": "images/icons/icon-128.png" } }, "permissions": [ "storage", "tabs", "activeTab", "scripting" ], "content_scripts": [ { "matches": ["<all_urls>"], "js": ["content.js"] } ] } -
編輯
background.js文件，內容如下：console.log('Background script running');
-
編輯
index.html文件，內容如下：<!DOCTYPE html> <html> <head> <title>HelloWorld Popup</title> </head> <body> <h1>Hello, World!</h1> </body> </html>
-
編輯
index.js文件，內容如下：console.log('Hello, Chrome Extension!');
manifest.json: Chrome 擴充功能的配置文件，定義了擴充功能的基本信息和權限。background.js: 背景腳本，負責處理擴充功能的後台邏輯。index.html: 擴充功能的彈出頁面，當用戶點擊擴充功能圖標時顯示。images/icons/: 存放擴充功能的圖標文件。index.js: 彈出頁面的 JavaScript 文件。content.js: 內容腳本，允許在網頁的上下文中執行 JavaScript 代碼。
- 在專案根目錄下執行以下命令：
npm run watch
- 在 Chrome 瀏覽器中打開
chrome://extensions/，啟用開發者模式，然後點擊「加載已解壓的擴充功能」，選擇專案根目錄，即可加載擴充功能。
- 在專案根目錄下執行以下命令：
npm run build