Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
chrome-extention-development-start-with-template
Search
litencatt
August 23, 2021
Technology
1
77
chrome-extention-development-start-with-template
Fukuoka.ts #3 Online 2021.08.23
https://fukuokats.connpass.com/event/218556/
litencatt
August 23, 2021
Tweet
Share
More Decks by litencatt
See All by litencatt
実例から学ぶ、最後まで諦めない決済サービス移行方法/phperkaigi-2020
litencatt
2
1.2k
15年続くWebサービスの開発現場のイマ/muumu-development-env
litencatt
0
59
オブジェクト指向×思考×試行 / OOP x Study x Try
litencatt
1
450
とあるペパボカレッジ1期生がこの1年間で学習してきたこと / Studying to be a web engineer
litencatt
4
530
ムームードメイン ショッピングカートを支える技術! / muumuu-shopping-cart-tech
litencatt
2
5.3k
CI環境をDockerで再現する/Build the testing containers
litencatt
0
840
201612_一歩踏み出した先にあったもの
litencatt
4
1.3k
Other Decks in Technology
See All in Technology
O'Reilly Superstream: Building a RAG App to Chat with Your Data
pamelafox
0
110
これはPerl? それともRuby? クイズ〜〜〜〜〜!!!- Perl or Ruby Quiz
moznion
2
1.6k
【shownet.conf_】ネットワークテストの最適化と利便性の追求
shownet
PRO
0
310
Pythonを活用したLLMによる構造的データ生成の手法と実践
brainpadpr
3
280
Oracle GoldenGate 23ai 導入Tips
oracle4engineer
PRO
1
240
「ばん・さく・つき・たー!」にならないためにSHIROBAKOから 学んだこと
ysknsid25
3
630
山手線一周のパフォーマンス改善
suzukahr
0
120
エムスリー全チーム紹介資料 / Introduction of M3 All Teams
m3_engineering
1
270
【shownet.conf_】クロージングセッション
shownet
PRO
0
290
【shownet.conf_】ShowNet x 宇宙ネットワーク
shownet
PRO
0
380
リスクから学ぶKubernetesコンテナセキュリティ/k8s-risk-and-security
mochizuki875
1
310
過去のインプットとアウトプットを振り返る
diggymo
0
110
Featured
See All Featured
Designing for Performance
lara
604
68k
Rails Girls Zürich Keynote
gr2m
93
13k
A Tale of Four Properties
chriscoyier
155
22k
Faster Mobile Websites
deanohume
304
30k
Clear Off the Table
cherdarchuk
91
320k
Designing on Purpose - Digital PM Summit 2013
jponch
114
6.9k
Optimizing for Happiness
mojombo
375
69k
Infographics Made Easy
chrislema
239
18k
For a Future-Friendly Web
brad_frost
174
9.3k
How STYLIGHT went responsive
nonsquared
94
5.1k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.3k
Transcript
初めての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