v-sendai #5にLTで登壇した際の資料です。

1. NuxtでChrome拡張をつくってみた
NuxtでChrome拡張をつくってみた

2. ⾃⼰紹介
千⽥恭兵（ちだ きょうへい）
株式会社シムネット
UXシステム開発部
元々バックエンドメインだったけど最近はフロントエ
ンドに⽚⾜突っ込んできた
PHP（5年くらい）
html / javascript / vue / nuxt（1年くらい）
個⼈では Go / python / Rust（どれも浅
い）
2019茨城国体ぷよぷよ宮城県代表
NuxtでChrome拡張をつくってみた

3. Chrome拡張といえば
Vuejsで開発した経験のある⽅にはおなじみのこの画⾯
⾒やすいし欲しい機能が潤沢だしでこのUI素晴らしいですよね。
NuxtでChrome拡張をつくってみた

4. ・・・真似してDevToolに置けないかな
NuxtでChrome拡張をつくってみた

5. やってみた（WIP）
NuxtでChrome拡張をつくってみた

6. 構成
Nuxtjs v2.11
TypeScript
Vuetify
バックエンドからカスタムヘッダを経由して
データを取得し、整形して表⽰するだけのもの。
NuxtでChrome拡張をつくってみた

7. どうやって作ったのか
chrome拡張は⼀定の構成さえ抑えておけば
簡単な manifest.json を書けば作れちゃいます。
詳しいことは公式ドキュメントに。（English Only）
NuxtでChrome拡張をつくってみた

8. vue-web-extensionを参考にしつつ作成。
manifest.jsonを書いて、 /static/ 直下に設置。
devtools.html を読み込みます。
{
"name": "profile_viewer",
"version": "0.0.0.2",
"manifest_version": 2,
"browser_action": {
"default_title": "plz press F12"
},
"devtools_page": "devtools.html",
"permissions": [
"activeTab",
"webRequest"
]
}
NuxtでChrome拡張をつくってみた

9. devtools.htmlの中⾝はdevtools.jsを呼ぶだけ
<script src="devtools.js"></script>
devtools に panels を create するよって書いて nuxt generate
devtools.js
chrome.devtools.panels.create(
'ProfilerViewer', // title
'icon.png', // icon
'index.html', // first page
(panel) => {} // callback function
)
こんな感じの構成に。
NuxtでChrome拡張をつくってみた

10. chrome://extensions を開き、「パッケージ化されていない拡張機能を読み込む」からさきほど作成
した manifest.json が含まれるフォルダを選択し、再起動。
NuxtでChrome拡張をつくってみた

11. できました
NuxtでChrome拡張をつくってみた

12. ハマりどころ1. ルーティング
・普通に nuxt generate しただけだと、恐らく page not found エラーが発⽣する。
→devToolsで表⽰する部分のURLは chrome-extention://~~~~~~~~/index.html のようになって
いる。
→ index.vue で作られるファイルは index.html 。
しかし、Vue Routerのルーティングは /
→devToolsにはDirectoryIndexが存在しないため、発⽣。
NuxtでChrome拡張をつくってみた

13. ハマリどころ1の対策
index.html がリクエストされたら pages/index.vue を呼び出すようにする。
nuxt.config.js
router: {
extendRoutes(routes, resolve) {
routes.push({
name: 'index.html',
path: '*',
component: resolve(__dirname, 'pages/index.vue')
})
}
},
NuxtでChrome拡張をつくってみた

14. ハマりどころ2. ディレクトリ構成
・ nuxt generate 時に設定されている publicPath は /_nuxt/
（js、ライセンスファイルの設置先）
→アンダースコアから始まるディレクトリが正常に読み込めない仕様
NuxtでChrome拡張をつくってみた

15. ハマりどころ2の対策
ビルド時の出⼒先を変えてあげればOK
nuxt.config.js
build: {
/*
** You can extend webpack config here
*/
extend(config, ctx) {},
publicPath: process.env.NODE_ENV === 'dev' ? '/_nuxt/' : 'pb'
}
NuxtでChrome拡張をつくってみた

16. この⼆点さえ抑えておけばあとは普通のWebページ作る要領でOK
vuexもvue routerもそのまま利⽤できるので、考えることが少なくメンテナブルに実装できます。
※余談： vuex-module-decorators めっちゃいいです
NuxtでChrome拡張をつくってみた

17. 宣伝
宣伝

18. シムネットは、業界 No.1のブリーダー仲介サイト（みんなのブリーダー）やペットのECサイト/コミュニティ
サイトを完全⾃社開発・運営している会社です。
エンジニア/デザイナー/ディレクター/ライター/コールセンター/倉庫など⾃社サービス運営に必要な部署が
全て揃っており連携しながらサービス運営しています。
業績も連続で上がっており、⾃社開発のため厳しい納期がなく残業少なめです！
宣伝

19. こんな環境で開発/運営しています
今後も⾊々やりたいことがありますが、エンジニアが⾜りていません！
サービスを育てたい
勉強会や⾃学⾃習で学んだ知識を業務に挑戦できる現場で働きたい
⽇々技術の話題が⾶び交う刺激的な現場で働きたい
⾊々挑戦してフルスタックエンジニアを⽬指したい
かわいい動物の画像/動画に癒やされながら仕事がしたい
Mac/Win慣れている環境で働きたい
こんな⽅は、是⾮⼀緒に働きましょう！ご応募お待ちしております！
宣伝

20. ご静聴ありがとうございました
宣伝