初めてのChrome拡張機能開発 を効率よく開始する 2021.08.23 Fukuoka.ts #3 Online @litencatt(Kosuke Nakamura) 1

発表内容 - 対象 - Chrome拡張機能を開発したことがない人 - TypeScriptを使用して開発したい - この発表で話すこと - 自身が開発したChrome拡張機能の紹介 - 開発を効率よく開始するための知見 - この発表で話さないこと - ViteやSvelteの具体的な設定や使い方 2

自己紹介 - 所属 - GMOペパボ株式会社 ホスティング事業部 CXチーム 3

Chrome拡張機能とは? - Chromeのアドレスバー右に並んでるアレ - 文字通りChromeの機能を拡張するもの - 有名な拡張機能 - 広告ブロッカーなど - ブラウザ拡張機能もHTML、CSS、JSの要素で構成されている - 最小構成はmanifest.jsonとJSファイル1つ 4

自身が開発したChrome拡張機能の紹介 ● https://github.com/litencatt/paste-string-filter ○ 設定した正規表現を指定した文字列に置き換える拡張機能 ○ メールアドレスの正規表現を設定した場合の動作例 5

自身が開発したChrome拡張機能の紹介 ● https://github.com/litencatt/paste-string-filter ○ 設定した正規表現を指定した文字列に置き換える拡張機能 ○ メールアドレスやトークンなどのセンシティブな情報が誤ってテキストエリア に貼り付けられたままサーバに送られるのを防ぐ目的で作成 ○ TS + Vite + Svelteを使用している(全部@dojinekoさんがやってくれたので感謝 ) ○ (参考)https://github.com/l4yton/RegHex ■ 色んなサービスのトークンの正規表現集なので便利そう 6

一般的なChrome拡張機能開発の流れ 1. manifest.json作成する 2. 必要なJS、HTML、CSSを作成する 3. 作成したファイルをzipに固める 4. Chrome Web StoreにDeveloper登録する(登録料 $5) 5. zipをアップロードして各種公開情報を設定し審査依頼 6. 公開される 7

8 Chrome拡張機能開発を 効率よく開始するには

Chrome拡張機能開発を効率よく開始するには 1. Chrome拡張機能開発用templateを使って開発を開始する 2. その後は ○ 拡張機能の構成要素やmanifest.jsonについて理解する ○ 自分が作りたい機能に似たコードを見つけて参考にする 9

(再掲)一般的なChrome拡張機能開発の流れ 1. manifest.json作成する 2. 必要なJS、HTML、CSSを作成する 3. 作成したファイルをzipに固める 4. Chrome Web StoreにDeveloper登録する(登録料 $5) 5. zipをアップロードして審査依頼 6. 公開される 10

必要なJS、HTML、CSSを作成する 11 ・・・ ・・・ ポップアップやオプション画面は今どきのツールで開発したい

初心者は覚えないといけないことが多い 例) TS + Vite + Svelteで開発する場合 1. TypeScriptの書き方 2. Viteの使い方 3. Svelteの書き方 4. Chrome拡張機能について 5. ... 12

13 挫折する前に 便利なtemplateを使おう

templateを使うことで得られる恩恵 1. とりあえず動くものがすぐ手に入る ○ 最低限の知識で開発を開始することができる ○ Transpile設定など必須設定もひとまず考えなくて良い 2. Chrome拡張機能用HMR機能サポートにより開発に集中できる ○ コード変更時の面倒な再読み込み周りをいい感じにしてくれている ○ 通常であれば開発時に拡張機能自体をChromeに再読込させたりページリ ロードなどが必要になる 14

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 拡張機能の構成要素や manifest.jsonについて理解する

Chrome拡張機能の構成要素と概要図 https://developer.chrome.com/docs/extensions/mv3/architecture-overview/ 17 templateで作成された拡張機能のコードをいじって それぞれの要素の動作や関係性などを理解すると良さそう

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 自分が作りたい機能に似たコードを参 考にする

自分が作りたい機能に似たコードを参考にする ● https://github.com/GoogleChrome/chrome-extensions-samples ○ Chrome拡張機能の公式Sample集 ○ これ以外にも自分が作りたい機能と似てるものをGitHub上などで探して コードを読んでみる 20

まとめ Chrome拡張機能を効率よく開始したければ 1. Chrome拡張機能開発用templateを使って開発を開始する 2. その後は ○ 拡張機能の構成要素やmanifest.jsonについて理解する ○ 自分が作りたい機能に似たコードを見つけて参考にする 21