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
80
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
62
オブジェクト指向×思考×試行 / 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
OTelCol_TailSampling_and_SpanMetrics
gumamon
1
220
オープンソースAIとは何か? --「オープンソースAIの定義 v1.0」詳細解説
shujisado
10
1.2k
Amazon CloudWatch Network Monitor のススメ
yuki_ink
1
210
Terraform Stacks入門 #HashiTalks
msato
0
360
Making your applications cross-environment - OSCG 2024 NA
salaboy
0
200
OCI Network Firewall 概要
oracle4engineer
PRO
0
4.2k
TypeScript、上達の瞬間
sadnessojisan
46
13k
OCI 運用監視サービス 概要
oracle4engineer
PRO
0
4.8k
SREが投資するAIOps ~ペアーズにおけるLLM for Developerへの取り組み~
takumiogawa
1
450
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
3.9k
複雑なState管理からの脱却
sansantech
PRO
1
160
初心者向けAWS Securityの勉強会mini Security-JAWSを9ヶ月ぐらい実施してきての近況
cmusudakeisuke
0
130
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
24k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
Visualization
eitanlees
145
15k
Speed Design
sergeychernyshev
25
620
Producing Creativity
orderedlist
PRO
341
39k
The Invisible Side of Design
smashingmag
298
50k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
Agile that works and the tools we love
rasmusluckow
327
21k
Being A Developer After 40
akosma
87
590k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
47
2.1k
Designing for Performance
lara
604
68k
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