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
63
オブジェクト指向×思考×試行 / OOP x Study x Try
litencatt
1
460
とあるペパボカレッジ1期生がこの1年間で学習してきたこと / Studying to be a web engineer
litencatt
4
540
ムームードメイン ショッピングカートを支える技術! / 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
EMConf JP 2025 懇親会LT / EMConf JP 2025 social gathering
sugamasao
2
200
OCI Success Journey OCIの何が評価されてる?疑問に答える事例セミナー(2025年2月実施)
oracle4engineer
PRO
2
170
Introduction to OpenSearch Project - Search Engineering Tech Talk 2025 Winter
tkykenmt
2
110
設計を積み重ねてシステムを刷新する
sansantech
PRO
0
180
AWS Well-Architected Frameworkで学ぶAmazon ECSのセキュリティ対策
umekou
2
150
フォーイット_エンジニア向け会社紹介資料_Forit_Company_Profile.pdf
forit_tech
1
1.7k
JAWS DAYS 2025 アーキテクチャ道場 事前説明会 / JAWS DAYS 2025 briefing document
naospon
0
150
Two Blades, One Journey: Engineering While Managing
ohbarye
4
2.2k
Potential EM 制度を始めた理由、そして2年後にやめた理由 - EMConf JP 2025
hoyo
2
2.8k
スキルだけでは満たせない、 “組織全体に”なじむオンボーディング/Onboarding that fits “throughout the organization” and cannot be satisfied by skills alone
bitkey
0
190
データエンジニアリング領域におけるDuckDBのユースケース
chanyou0311
9
2.2k
AWSではじめる Web APIテスト実践ガイド / A practical guide to testing Web APIs on AWS
yokawasa
8
730
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
693
190k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
What's in a price? How to price your products and services
michaelherold
244
12k
The Cult of Friendly URLs
andyhume
78
6.2k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
RailsConf 2023
tenderlove
29
1k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Building an army of robots
kneath
303
45k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
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