Chrome插件學習筆記（三）

參考文章：

• https://blog.csdn.net/guoqiankunmiss/article/details/135847091
• https://blog.csdn.net/guoqiankunmiss/article/details/135974364

1、項目搭建

在前兩篇文章中使用的原生js去操作dom，很費勁并且效果并不是很好，于是決定使用vue3來開發瀏覽器插件

1.1、創建項目

npm create vite@latest

1.2、依賴安裝

# @types/node、@types/ws：用來補充類型信息
# chokidar：用來監聽文件變化
# chrome-types：chrome相關的類型提示
# rollup-plugin-copy：用于復制manifest.json
# ws：用于創建WebSocket
npm install -D @types/node @types/ws chokidar chrome-types rollup-plugin-copy ws

1.3、vite.config.ts

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from "node:path";
import copy from "rollup-plugin-copy";// https://vite.dev/config/
export default defineConfig({server: {port: 5500,},plugins: [vue(),copy({targets: [{src: 'src/manifest.json',dest: path.resolve(__dirname, 'dist')}],hook: 'writeBundle'}),],build: {outDir: path.resolve(__dirname, 'dist'),rollupOptions: {input: {side_panel: path.resolve(__dirname, 'src/index.html'),content_script: path.resolve(__dirname, 'src/content_script/content_script.ts'),service_worker: path.resolve(__dirname, 'src/service_worker/service_worker.ts'),},output: {assetFileNames: 'assets/[name]-[hash].[ext]',chunkFileNames: 'js/[name]-[hash].js',entryFileNames: (chunkInfo) => {const facadeModuleId = chunkInfo.facadeModuleId!const baseName = path.basename(facadeModuleId, path.extname(facadeModuleId))const saveArr = ['content_script', 'service_worker']return `[name]/${saveArr.includes(baseName) ? baseName : chunkInfo.name}.js`;},name: '[name].js'}}}
})

1.4、manifest.json

{"name": "Assistant","description": "A tool for quick conversations with AI","version": "0.0.1","manifest_version": 3,"permissions": ["sidePanel"],"host_permissions": ["*://*/*"],"action": {"default_title": "Click to switch side panel"},"side_panel": {"default_path": "src/index.html"},"background": {"service_worker": "service_worker/service_worker.js","type": "module"},"content_scripts": [{"js": ["content_script/content_script.js"],"matches": ["*://*/*"],"all_frames": true,"run_at": "document_end","match_about_blank": true}]
}

1.5、vite-env.d.ts

/// <reference types="vite/client" />
/// <reference types="chrome-types/index" />

1.6、service_worker.ts

console.log("service_worker");chrome.sidePanel.setPanelBehavior({openPanelOnActionClick: true})

1.7、content_script.ts

console.log("content_script");

1.8、index.html

index.html需要移動到src目錄下

1.9、目錄結構

1.10、測試

2、熱部署

熱部署的方式很多，如利用額外的插件（可參考文章https://cm-mng.bilibili.co/agent/#/mlogin）,這里使用的是socket通信來實現的熱部署

2.1、.env.development

VITE_ENV_MODE=development

2.2、 .env.production

VITE_ENV_MODE=production

2.3、file_watcher.ts

import {WebSocketServer} from "ws";
import chokidar from "chokidar";
import path from "node:path";export function file_watcher(wss: WebSocketServer) {wss.on('connection', (ws) => {console.log('Client connected');// 監聽src文件夾下的所有文件，并排出node_modules下所有文件const watcher = chokidar.watch(path.join(__dirname, 'src'), {ignored: [/(^|[\/\\])\../, /node_modules/]});// 只有文件變化才會通知，如果設置成all將會通知add、change、addDir等事件watcher.on('change', (event, path) => {ws.send(JSON.stringify({type: 'reload', event, path}));});ws.on('close', () => {console.log('Client disconnected');watcher.close();});});
}

2.4、vite.config.ts

import {defineConfig, loadEnv} from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from "node:path";
import copy from "rollup-plugin-copy";
import {WebSocketServer} from "ws";
import {file_watcher} from "./file_watcher.ts";// https://vite.dev/config/
export default defineConfig((configEnv) => {// 這里取的環境變量是.env.xxxxx中的變量，根據加載的環境變量判斷是否啟動socket服務端，用于通知瀏覽器插件重新加載let env = loadEnv(configEnv.mode, process.cwd(), '');if (env.VITE_ENV_MODE === 'development') {file_watcher(new WebSocketServer({port: 5501}));}return {server: {port: 5500,},plugins: [vue(),copy({targets: [{src: 'src/manifest.json',dest: path.resolve(__dirname, 'dist')}],hook: 'writeBundle'}),],build: {outDir: path.resolve(__dirname, 'dist'),rollupOptions: {input: {side_panel: path.resolve(__dirname, 'src/index.html'),content_script: path.resolve(__dirname, 'src/content_script/content_script.ts'),service_worker: path.resolve(__dirname, 'src/service_worker/service_worker.ts'),},output: {assetFileNames: 'assets/[name]-[hash].[ext]',chunkFileNames: 'js/[name]-[hash].js',entryFileNames: (chunkInfo) => {const facadeModuleId = chunkInfo.facadeModuleId!const baseName = path.basename(facadeModuleId, path.extname(facadeModuleId))const saveArr = ['content_script', 'service_worker']return `[name]/${saveArr.includes(baseName) ? baseName : chunkInfo.name}.js`;},name: '[name].js'}}}}
})

2.5、hot_reload.ts

let timeout: numberexport function hot_reload(socket: WebSocket) {if (timeout) {clearTimeout(timeout);}socket.onopen = () => {console.log('Connected to dev server')}socket.onmessage = (event) => {const message = JSON.parse(event.data)if (message.type === 'reload') {setTimeout(() => {chrome.runtime.reload()}, 1000)}}socket.onclose = (event) => {console.log(`Socket closed: ${event.reason}`);// 斷開連接后5秒后嘗試再次連接timeout = setTimeout(() => {hot_reload(new WebSocket(`ws://localhost:5501/`))}, 5000);};socket.onerror = (error) => {console.error('Socket error:', error);};
}

2.6、service_worker.ts

import {hot_reload} from "../hot_reload.ts";console.log("service_worker");chrome.sidePanel.setPanelBehavior({openPanelOnActionClick: true})// 如果是開發環境才嘗試鏈接socket服務端
if (import.meta.env.VITE_ENV_MODE === 'development') {console.log('開發環境');hot_reload(new WebSocket(`ws://localhost:5501/`))
} else {console.log('生產環境');
}

2.7、package.json

注意這里的scripts需要修改下，開發的時候使用命令npm run watch，修改代碼后插件會自動重新加載

{"name": "assistant","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite","watch": "vite build --watch --mode development","build": "vue-tsc -b && vite build","preview": "vite preview"},"dependencies": {"@types/node": "^24.1.0","@types/ws": "^8.18.1","chokidar": "^4.0.3","chrome-types": "^0.1.363","rollup-plugin-copy": "^3.5.0","vue": "^3.5.17","ws": "^8.18.3"},"devDependencies": {"@vitejs/plugin-vue": "^6.0.0","@vue/tsconfig": "^0.7.0","typescript": "~5.8.3","vite": "^7.0.4","vue-tsc": "^2.2.12"}
}