- 🔥 支持修改
content scripts代碼自動重載擴展和刷新註入了content scripts的頁面，再也不用修改了content scripts後手動刷新擴展和頁面了。 - 🌴
options和popup頁面支持react hot reload&react devtools，充分享受現代前端工程化的便捷，讓你從開發SPA無縫切換到 chrome 擴展開發。 - 🛡️ 整個模板包括
webpack配置都是用TypeScript編寫的，使用TypeScript配置webpack減少查閱文檔和手殘的概率。 - 💄 支持 css/less/sass，使用
mini-css-extract-plugin將 CSS 分離成 content CSS Script。 - ⚒️ 集成了社區很多的優秀的
webpack，eslint和babel插件，優化開發，構建和打包分析體驗，還配置了husky,format-imports,stylelint,travis和audit-ci構建工具。 - 🌈 默認集成了
jquery，lodash，antd等常用工具庫，並對它們的打包進行了優化
# 安裝依賴，推薦使用 pnpm, npm可能會報錯
npm install -g pnpmpnpm requires at least Node.js v18.12, 推薦使用nvm做開發環境版本管理
🔔 請確保你對 chrome 擴展開發已經有基本的了解，入門推薦：Chrome 插件(擴展)開發全攻略。如果你對項目的配置有疑問。
使用 src/manifest.ts 編寫 manifest.json，它其實是一個 node 腳本，因此你可以使用 server 下面的所有模塊，可以使用環境變量處理不同開發環境的配置。
注意：任何註入了 content scripts 的頁面也必須被註入 js/all.js 和 css/all.css ，為了實現這一點，它倆的 matches 應該是其它所有 content scripts 的 matches 的父集。
示例的配置是:
"content_scripts": [
// 所有註入了 content scripts 的頁面都註入了 js/all.js 和 css/all.css
{
"matches": ["https://github.com/*"],
"css": ["css/all.css"],
"js": ["js/all.js"]
},
// 註入到 github pull requests 頁面
{
"matches": ["https://github.com/pulls"],
"css": ["css/pulls.css"],
"js": ["js/pulls.js"]
}
]public 下的文件會被打包到擴展的根目錄，manifest 中用到的圖標等資源可以直接放到 public 文件夾下面。模板在 public/icons 放了一些默認的圖標，因此可以在 manifest 中這樣引用圖標：
// manifest.dev.json
{
"icons": {
"16": "icons/extension-icon-x16.png",
"32": "icons/extension-icon-x32.png",
"48": "icons/extension-icon-x48.png",
"128": "icons/extension-icon-x128.png"
}
}yarn start無論是開發環境還是生產環境都會在項目根目錄生成 extension 文件夾，chrome 訪問 chrome:https://extensions/ 也就是擴展管理頁面，點擊右上角的按鈕開啟開發者模式，選擇加載已解壓的擴展程序，再選擇剛剛生成的 extension 文件夾即可加載擴展。
由於 chrome 的限制，官方的 chrome 擴展 react devtools 並不能審查 chrome-extension:https:// 協議的頁面如 options，popup 頁面。所以需要使用獨立的 react devtools，使用下面的命令啟動 devServer 的同時打開獨立的 devtools 窗口：
npm run devtools
你可以通過 open 參數配置在 webpack 初次編譯成功打開某個 URL：
"scripts": {
"start": "cross-env-shell NODE_ENV=development ts-node --files -P ./server/tsconfig.json ./server --open=https://xxx.xxx.com",
},模板默認的代碼實現的功能是修改 github 導航欄的顏色，模板使用了 normalize.css 和一些自定義樣式對 CSS 進行樣式重置。
如果你想開發 background 腳本，你可以在 src/background 文件夾編寫你的代碼。src/background/index.ts 是 background 腳本的入口，也是 webpack 的一個 entry，其它像 options 和 popup 頁面也類似。你可以查看 webpack 的 entry 配置： src/server/utils/entry.ts 了解更多實現細節。
它倆的 webpack entry 分別是 src/options/index.tsx 和 src/popup/index.tsx。這兩個頁面很相似，都只是一個普通的 web 頁面，因此你可以像開發一個 react SPA 一樣開發它們。
這個模板使用了 react 的最新版本，因此你可以使用 react hooks 去開發函數組件，react hooks 的 eslint 規則也集成了。
模板使用 React Fast Refresh 支持 react 的熱更新。
這個模板會掃描 src/contents 文件夾，將所有子文件夾中的 index.tsx 或 index.ts 作為 webpack entry。
content scripts 都放在 src/contents 目錄下。默認有個 all.ts，也是個 webpack entry，它不能被刪除，因為這個 webpack entry 被用於註入實現 chrome 擴展自動刷新功能的補丁。
舉個 🌰:
當你要給 URL 是 https://www.example.com/discuss 頁面開發 content script，你需要做下面兩步:
-
添加
content scripts和頁面 URL 之間的映射到manifest.dev.json和manifest.prod.json:{ "content_scripts": [ { "matches": ["https://www.example.com/discuss*"], "css": ["css/discuss.css"], "js": ["js/discuss.js"] } ] } -
創建一個和上面
content script路徑對應的文件夾src/contents/discuss。src/discuss/index.tsx或者src/discuss/index.ts將會被視為一個 webpack entry。webpack會通過這個entry最終產出js/discuss.js這個chunk。mini-css-extract-plugin會將所有被discuss/index.ts導入的樣式文件合並再分離到extension/css/discuss.css，這也是為什麽上面的manifest中 content CSS script 可以使用css/discuss.css的原因
你可以在 server/configs/proxy.ts 中配置 dev server 的代理，所有向 dev server 發送的請求都會根據你配置的規則被代理轉發，修改配置後需要重啟 dev server 才會生效，更多細節請查看使用的中間件 http-proxy-middleware。
const proxyTable: ProxyTable = {
// 如果 devServer 啟動地址是 http:https://127.0.0.1:3600
// 那麽請求 http:https://127.0.0.1:3600/path_to_be_proxy 將會被 dev server 轉發到 http:https://target.domain.com/path_to_be_proxy
'/path_to_be_proxy': { target: 'http:https://target.domain.com', changeOrigin: true },
};構建生產級別的包直接運行：
pnpm build如果你想分析打包情況：
pnpm build-analyzesrc/all 和 src/background 下的文件包含了實現修改 content script 自動重載擴展和刷新註入了 content script 頁面的功能的代碼。除非你不開發 content scripts，否則，不能刪除它。