chrome-extention-development-start-with-template

Fukuoka.ts #3 Online 2021.08.23
https://fukuokats.connpass.com/event/218556/

1. 初めてのChrome拡張機能開発 を効率よく開始する 2021.08.23 Fukuoka.ts #3 Online @litencatt(Kosuke Nakamura) 1
2. 発表内容 - 対象 - Chrome拡張機能を開発したことがない人 - TypeScriptを使用して開発したい - この発表で話すこと - 自身が開発したChrome拡張機能の紹介 - 開発を効率よく開始するための知見 - この発表で話さないこと - ViteやSvelteの具体的な設定や使い方 2
3. 自己紹介 - 所属 - GMOペパボ株式会社 ホスティング事業部 CXチーム 3
4. Chrome拡張機能とは? - Chromeのアドレスバー右に並んでるアレ - 文字通りChromeの機能を拡張するもの - 有名な拡張機能 - 広告ブロッカーなど - ブラウザ拡張機能もHTML、CSS、JSの要素で構成されている - 最小構成はmanifest.jsonとJSファイル1つ 4
5. 自身が開発したChrome拡張機能の紹介 • https://github.com/litencatt/paste-string-filter ◦ 設定した正規表現を指定した文字列に置き換える拡張機能 ◦ メールアドレスの正規表現を設定した場合の動作例 5
6. 自身が開発したChrome拡張機能の紹介 • https://github.com/litencatt/paste-string-filter ◦ 設定した正規表現を指定した文字列に置き換える拡張機能 ◦ メールアドレスやトークンなどのセンシティブな情報が誤ってテキストエリア に貼り付けられたままサーバに送られるのを防ぐ目的で作成 ◦ TS + Vite + Svelteを使用している(全部@dojinekoさんがやってくれたので感謝 ) ◦ (参考)https://github.com/l4yton/RegHex ▪ 色んなサービスのトークンの正規表現集なので便利そう 6
7. 一般的なChrome拡張機能開発の流れ 1. manifest.json作成する 2. 必要なJS、HTML、CSSを作成する 3. 作成したファイルをzipに固める 4. Chrome Web StoreにDeveloper登録する(登録料 $5) 5. zipをアップロードして各種公開情報を設定し審査依頼 6. 公開される 7
8. 8 Chrome拡張機能開発を 効率よく開始するには
9. Chrome拡張機能開発を効率よく開始するには 1. Chrome拡張機能開発用templateを使って開発を開始する 2. その後は ◦ 拡張機能の構成要素やmanifest.jsonについて理解する ◦ 自分が作りたい機能に似たコードを見つけて参考にする 9
10. (再掲)一般的なChrome拡張機能開発の流れ 1. manifest.json作成する 2. 必要なJS、HTML、CSSを作成する 3. 作成したファイルをzipに固める 4. Chrome Web StoreにDeveloper登録する(登録料 $5) 5. zipをアップロードして審査依頼 6. 公開される 10
11. 必要なJS、HTML、CSSを作成する 11 ・・・ ・・・ ポップアップやオプション画面は今どきのツールで開発したい
12. 初心者は覚えないといけないことが多い 例) TS + Vite + Svelteで開発する場合 1. TypeScriptの書き方 2. Viteの使い方 3. Svelteの書き方 4. Chrome拡張機能について 5. ... 12
13. 13 挫折する前に 便利なtemplateを使おう
14. templateを使うことで得られる恩恵 1. とりあえず動くものがすぐ手に入る ◦ 最低限の知識で開発を開始することができる ◦ Transpile設定など必須設定もひとまず考えなくて良い 2. Chrome拡張機能用HMR機能サポートにより開発に集中できる ◦ コード変更時の面倒な再読み込み周りをいい感じにしてくれている ◦ 通常であれば開発時に拡張機能自体をChromeに再読込させたりページリ ロードなどが必要になる 14
15. Chrome拡張機能開発に便利なTemplate • https://github.com/chibat/chrome-extension-typescript-starter ◦ TS + Webpack + React • https://github.com/HikaruEgashira/browser-extension-ts-template ◦ TS + Parcel + React • https://github.com/antfu/vitesse-webext <=おすすめはこれ ◦ TS + Vite + Vue.js • https://github.com/NekitCorp/chrome-extension-svelte-typescript-boilerplate ◦ TS + rollup.js + Svelte 15
16. 16 拡張機能の構成要素や manifest.jsonについて理解する
17. Chrome拡張機能の構成要素と概要図 https://developer.chrome.com/docs/extensions/mv3/architecture-overview/ 17 templateで作成された拡張機能のコードをいじって それぞれの要素の動作や関係性などを理解すると良さそう
18. manifest.jsonについて • Chrome拡張機能の設定ファイル • 現行だとManifest Version 2, 3が利用可能 ◦ V2 -> V3でフォーマットや利用可能なAPI名が若干変更されている ◦ V3のほうが審査が早い(らしい) ◦ 各種詳細は公式ドキュメントを確認 ▪ https://developer.chrome.com/docs/extensions/mv3/intro/ ▪ https://developer.chrome.com/docs/extensions/mv2/manifest/ ▪ https://developer.chrome.com/docs/extensions/mv3/manifest/ 18
19. 19 自分が作りたい機能に似たコードを参 考にする
20. 自分が作りたい機能に似たコードを参考にする • https://github.com/GoogleChrome/chrome-extensions-samples ◦ Chrome拡張機能の公式Sample集 ◦ これ以外にも自分が作りたい機能と似てるものをGitHub上などで探して コードを読んでみる 20
21. まとめ Chrome拡張機能を効率よく開始したければ 1. Chrome拡張機能開発用templateを使って開発を開始する 2. その後は ◦ 拡張機能の構成要素やmanifest.jsonについて理解する ◦ 自分が作りたい機能に似たコードを見つけて参考にする 21