# 用 Vite 懶人更新 Chrome Extension
by Winnie wu
![]()
---
### 為什麼要懶人更新？
<style>
.item{
height:600px;
}
</style>
<div class="item">
<img src="https://i.imgur.com/gWSwlHt.png"/ alt="">
</div>
---
### 要怎麼懶？
---
<div style="text-align:center">
<div style="width:800px; background:#FFF; display:inline-block; ">
<img src="https://i.imgur.com/Rw7QZ39.png">
</div>
</div>
---
#### 步驟一
當程式碼修改，自動打包
---
使用 Vite 提供的 Watch 模式，於 『 vite.build 』後方加上 『 --watch 』，實現修改時自動編譯
<style>
.wrapper{
width:1000px;
display:flex;
justify-content:center;
}
.col{
width:230px;
text-align:center;
}
.opacity{
opacity:.1;
}
</style>
<div class="wrapper">
<div class="col">
<img src="https://vitejs.dev/logo-with-shadow.png">
Vite
</div>
<div class="col opacity">
<img src="https://rollupjs.org/logo.svg">
rollup
</div>
<div class="col opacity">
<img src="https://i.imgur.com/NX9y3t8.png">
WebSocket
</div>
</div>
---
```
// package.json
{
"scripts": {
"dev": "vite",
"build": "vite build ",
"build-watch": "vite build --watch --watch",
"preview": "vite preview"
},
}
```
---
透過『watch模式』 區分 『正式/測試』打包檔
```
// vite.config.js
export default ({ mode }) => {
return defineConfig({
build: {
outDir: `${mode === 'watch' ?
'./dev-dist' : './dist' }`,
}
...略
})
```
---
#### 步驟二
『監聽』打包完成
---
在 Vite 自定義 plugin 透過 的 『<a href="https://rollupjs.org/guide/en/#generatebundle">Output Generation Hooks</a> 』來監聽打包完成
<div class="wrapper">
<div class="col opacity">
<img src="https://vitejs.dev/logo-with-shadow.png">
Vite
</div>
<div class="col">
<img src="https://rollupjs.org/logo.svg">
rollup
</div>
<div class="col opacity">
<img src="https://i.imgur.com/NX9y3t8.png">
WebSocket
</div>
</div>
---
```
... 略
return {
name: 'plugin-ext-dev-reload',
config: (config, { command, mode }) => {}
},
closeBundle() { //編譯結束 },
watchChange() { //當程式碼修改時 },
closeWatcher() {},
};
```
---
#### 步驟三
『通知』瀏覽器『重整頁面』
---
透過 Websocket 讓 devServer 在打包結束時，通知 localhost頁面重整
<div class="wrapper">
<div class="col opacity">
<img src="https://vitejs.dev/logo-with-shadow.png">
Vite
</div>
<div class="col opacity">
<img src="https://rollupjs.org/logo.svg">
rollup
</div>
<div class="col">
<img src="https://i.imgur.com/NX9y3t8.png">
WebSocket
</div>
</div>
---
在 watch 模式下，創建一個 WebSocketServer
---
---
透過 localhost 接收 devServer 訊息，然後『重新整理』
<div style="text-align:center">
<div style="width:1000px; display:inline-block; ">
<img src="https://i.imgur.com/dV4wqR2.png">
</div>
</div>
---
#### 步驟四
套件端 監聽『重整事件』，實現『自動更新』
---
Chrome Extension 端監聽 localhost 頁重整事件，透過 ``chrome.runtime.reload()``自動更新
{"metaMigratedAt":"2023-06-17T14:03:21.377Z","metaMigratedFrom":"YAML","breaks":true,"title":"用 Vite 懶人更新 Chrome Extension","contributors":"[{\"id\":\"8028b697-73be-41cd-b474-753843b108e6\",\"add\":6444,\"del\":3231}]"}