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.3k
15年続くWebサービスの開発現場のイマ/muumu-development-env
litencatt
0
62
オブジェクト指向×思考×試行 / OOP x Study x Try
litencatt
1
460
とあるペパボカレッジ1期生がこの1年間で学習してきたこと / Studying to be a web engineer
litencatt
4
530
ムームードメイン ショッピングカートを支える技術! / muumuu-shopping-cart-tech
litencatt
2
5.4k
CI環境をDockerで再現する/Build the testing containers
litencatt
0
850
201612_一歩踏み出した先にあったもの
litencatt
4
1.3k
Other Decks in Technology
See All in Technology
地方拠点で エンジニアリングマネージャーってできるの? 〜地方という制約を楽しむオーナーシップとコミュニティ作り〜
1coin
1
130
ビジネスと現場活動をつなぐソフトウェアエンジニアリング~とあるスタートアッププロダクトの成長記録より~
mizunori
0
210
ハッキングの世界に迫る~攻撃者の思考で考えるセキュリティ~
nomizone
12
4.5k
Kubernetes x k6 で負荷試験基盤を開発して 負荷試験を民主化した話 / Kubernetes x k6
sansan_randd
2
730
Tech Blogを書きやすい環境づくり
lycorptech_jp
PRO
0
120
『AWS Distinguished Engineerに学ぶ リトライの技術』 #ARC403/Marc Brooker on Try again: The tools and techniques behind resilient systems
quiver
0
130
開発者が自律的に AWS Security Hub findings に 対応する仕組みと AWS re:Invent 2024 登壇体験談 / Developers autonomously report AWS Security Hub findings Corresponding mechanism and AWS re:Invent 2024 presentation experience
kaminashi
0
190
「海外登壇」という 選択肢を与えるために 〜Gophers EX
logica0419
0
500
30分でわかる『アジャイルデータモデリング』
hanon52_
9
2.2k
SCSAから学ぶセキュリティ管理
masakamayama
0
140
データの品質が低いと何が困るのか
kzykmyzw
6
1k
5分で紹介する生成AIエージェントとAmazon Bedrock Agents / 5-minutes introduction to generative AI agents and Amazon Bedrock Agents
hideakiaoyagi
0
220
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
32
6.4k
Facilitating Awesome Meetings
lara
51
6.2k
Building Adaptive Systems
keathley
40
2.4k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
GraphQLとの向き合い方2022年版
quramy
44
13k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
The Language of Interfaces
destraynor
156
24k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
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