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
78
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
60
オブジェクト指向×思考×試行 / 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
Emacs x Nostr
hakkadaikon
1
150
新卒1年目が向き合う生成AI事業の開発を加速させる技術選定 / ai-web-launcher
cyberagentdevelopers
PRO
7
1.5k
オニオンアーキテクチャで実現した 本質課題を解決する インフラ移行の実例
hryushm
14
3k
コンテンツを支える 若手ゲームクリエイターの アートディレクションの事例紹介 / cagamefi-game
cyberagentdevelopers
PRO
1
120
日経電子版におけるリアルタイムレコメンドシステム開発の事例紹介/nikkei-realtime-recommender-system
yng87
1
490
Product Engineer Night #6プロダクトエンジニアを育む仕組み・施策
hacomono
PRO
1
460
【技術書典17】OpenFOAM(自宅で極める流体解析)2次元円柱まわりの流れ
kamakiri1225
0
210
AWS CDKでデータリストアの運用、どのように設計する?~Aurora・EFSの実践事例を紹介~/aws-cdk-data-restore-aurora-efs
mhrtech
4
640
MAMを軸とした動画ハンドリングにおけるAI活用前提の整備と次世代ビジョン / abema-ai-mam
cyberagentdevelopers
PRO
1
110
Aurora_BlueGreenDeploymentsやってみた
tsukasa_ishimaru
1
120
新卒1年目が挑む!生成AI × マルチエージェントで実現する次世代オンボーディング / operation-ai-onboarding
cyberagentdevelopers
PRO
1
160
ネット広告に未来はあるか?「3rd Party Cookie廃止とPrivacy Sandboxの効果検証の裏側」 / third-party-cookie-privacy
cyberagentdevelopers
PRO
1
130
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
9
680
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Why Our Code Smells
bkeepers
PRO
334
57k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
7.9k
Unsuck your backbone
ammeep
668
57k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
328
21k
YesSQL, Process and Tooling at Scale
rocio
167
14k
The Pragmatic Product Professional
lauravandoore
31
6.3k
Building Adaptive Systems
keathley
38
2.2k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
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