[[WXT]]を試してみる。
<div class="link-card">
<div class="link-card-header">
<img src="https://wxt.dev/favicon.ico" class="link-card-site-icon"/>
<span class="link-card-site-name">wxt.dev</span>
</div>
<div class="link-card-body">
<div class="link-card-content">
<p class="link-card-title">Next-gen Web Extension Framework – WXT</p>
<p class="link-card-description">WXT provides the best developer experience, making it quick, easy, and fun to develop chrome extensions for all browsers. With built-in utilities for building, zipping, and ... </p>
</div>
<img src="https://wxt.dev/social-preview.png" class="link-card-image" />
</div>
<a href="https://wxt.dev/guide/installation.html"></a>
</div>
## 環境
- [[Ubuntu 22.04 LTS(Jammy Jellyfish)]] ([[WSL]])
- [[Node.js]] v20.11.0
## プロジェクト作成
```console
$ npx wxt@latest init minerva-extension
Need to install the following packages:
[email protected]
Ok to proceed? (y) y
WXT 0.17.5
ℹ Initalizing new project
✔ Choose a template › vue
✔ Package Manager › npm
✔ Downloading template
✨ WXT project created with the vue template.
Next steps:
1. cd minerva-extension
2. npm install
```
- [[WXT]]のバージョンは0.17.5
- [[Bun]]も選べたけどexperimentalだったのでやめておいた
## 動作確認
```console
cd minerva-extension
npm i
npm run dev
```
[[WSL]]で実行しているからか自動起動はしなそう。
```warning
WARN Cannot open browser when using WSL. Load ".output/chrome-mv3" as an unpacked extension manually
```
`chrome://extensions/`に[[Google Chrome]]でアクセスし、自前で`.output/chrome-mv3`の拡張を読み込む。
![[Pasted image 20240303232622.png|frame]]
*これを選択*
成功すると拡張機能一覧に表示される。
![[Pasted image 20240303232650.png]]
右上から拡張機能を選択するとポップアップが表示される。
![[Pasted image 20240303232926.png]]