$30 off During Our Annual Pro Sale. View Details »
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
140
My Chrome Plugin
Syo Igarashi
July 17, 2017
Tweet
Share
More Decks by Syo Igarashi
See All by Syo Igarashi
2020冬開発合宿
igara
0
200
2019冬開発合宿
igara
0
90
2018夏開発合宿
igara
0
140
2018冬開発合宿
igara
0
1.2k
2017夏開発合宿
igara
0
190
Bariiiii
igara
0
110
2017冬合宿
igara
0
150
Other Decks in Technology
See All in Technology
マイクロサービスへの5年間 ぶっちゃけ何をしてどうなったか
joker1007
14
6.5k
regrowth_tokyo_2025_securityagent
hiashisan
0
250
初めてのDatabricks AI/BI Genie
taka_aki
0
200
MySQLとPostgreSQLのコレーション / Collation of MySQL and PostgreSQL
tmtms
1
500
コンテキスト情報を活用し個社最適化されたAI Agentを実現する4つのポイント
kworkdev
PRO
1
1.5k
RAG/Agent開発のアップデートまとめ
taka0709
0
190
MLflowで始めるプロンプト管理、評価、最適化
databricksjapan
1
260
NIKKEI Tech Talk #41: セキュア・バイ・デザインからクラウド管理を考える
sekido
PRO
0
150
Python 3.14 Overview
lycorptech_jp
PRO
1
120
OCI Oracle Database Services新機能アップデート(2025/09-2025/11)
oracle4engineer
PRO
1
210
MariaDB Connector/C のcaching_sha2_passwordプラグインの仕様について
boro1234
0
410
生成AI活用の型ハンズオン〜顧客課題起点で設計する7つのステップ
yushin_n
0
240
Featured
See All Featured
Leading Effective Engineering Teams in the AI Era
addyosmani
9
1.3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
122
21k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
1
100
How to Think Like a Performance Engineer
csswizardry
28
2.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
254
22k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
17k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
4 Signs Your Business is Dying
shpigford
186
22k
The Cult of Friendly URLs
andyhume
79
6.7k
Embracing the Ebb and Flow
colly
88
4.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.6k
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
お し ま い