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
My Chrome Plugin
Search
Syo Igarashi
July 17, 2017
Technology
0
130
My Chrome Plugin
Syo Igarashi
July 17, 2017
Tweet
Share
More Decks by Syo Igarashi
See All by Syo Igarashi
2020冬開発合宿
igara
0
190
2019冬開発合宿
igara
0
85
2018夏開発合宿
igara
0
130
2018冬開発合宿
igara
0
1.2k
2017夏開発合宿
igara
0
180
Bariiiii
igara
0
110
2017冬合宿
igara
0
140
Other Decks in Technology
See All in Technology
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
690
バイブスに「型」を!Kent Beckに学ぶ、AI時代のテスト駆動開発
amixedcolor
2
530
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
350
落ちる 落ちるよ サーバーは落ちる
suehiromasatoshi
0
150
dbt開発 with Claude Codeのためのガードレール設計
10xinc
2
1.1k
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
10
3k
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
oracle4engineer
PRO
0
110
BPaaSにおける人と協働する前提のAIエージェント-AWS登壇資料
kentarofujii
0
130
KotlinConf 2025_イベントレポート
sony
1
120
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
osawa
1
270
Flutterでキャッチしないエラーはどこに行く
taiju59
0
230
La gouvernance territoriale des données grâce à la plateforme Terreze
bluehats
0
150
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Designing Experiences People Love
moore
142
24k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Producing Creativity
orderedlist
PRO
347
40k
Docker and Python
trallard
45
3.6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
840
A better future with KSS
kneath
239
17k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Transcript
僕のChrome拡張 五十嵐 翔
アジェンダ ・自己紹介 ・作成意欲 ・Chrome Extension ・作成のひとくふう ・Extensionの術 ・まとめなど
自己紹介 ・五十嵐 翔(いがらし しょう) ・お仕事 Web作成〜PHP、JavaScript ・趣味のプログラミング システムプログラミング学習〜Rust VR〜Unity、Mono C#
作成意欲 ・みんなブラウザ使っているならば ブラウザ内で使えるツールで楽になること あるのでは? ブラウザの操作を楽にできるツールとか 需要ありそう
Chrome Extension ・Chromeが提供しているAPIを使用して ブラウザの拡張を行う 拡張例)左クリック時に表示される メニューの追加とか manifestに記載できるpermission参照 https://developer.chrome.com/extensions/declare_permissions
作成のひとくふう ・IntelliSense強化 ・ただのJavaScriptでも TypeScriptの型定義ファイル使用して 補完強化 ライブラリのグローバル変数の補完など jQueryの「$」 Chrome Extensionなら「chrome」
None
作成のひとくふう ・IntelliSense強化 ・JSDocちゃんと書こ? コメントによる入力補完 functionのreturn、paramに型情報が あることで補完の恩恵受けることできる
None
Extensionの術 ・Element Jack 指定した箇所のElementを取得し、 DOMの変更など行わせる igara/XPathToolForChromeでは XPath(Elementの絶対位置)を取得し Select一覧変更ができるようになっている https://github.com/igara/XPathToolForChrome
Extensionの術 ・Basic Admin Passing Basic認証に失敗した時に 右クリックのメニューから 半強制的に認証成功させに行く ※igara/XPathToolForChromeにない機能 で紹介程度に記載
None
まとめなど ・background.jsとcontent_script.jsの イベントのはしごリレーが厄介 ブラウザで表示中のElementいじれるのは content_script.jsだけなのでどうしても sendMessage→content_scriptで受け取る やりとりが多発する
まとめなど ・自分のPC内のファイル操作に弱い Native Messaging使いこなせば 可能性ある? Native Messaging Chrome Extensionから 実行ファイルを呼び出すことができるAPI
https://developer.chrome.com/extensions/nativeMessaging
お し ま い