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
150
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
My Chrome Plugin
Syo Igarashi
July 17, 2017
More Decks by Syo Igarashi
See All by Syo Igarashi
2020冬開発合宿
igara
0
220
2019冬開発合宿
igara
0
99
2018夏開発合宿
igara
0
150
2018冬開発合宿
igara
0
1.3k
2017夏開発合宿
igara
0
210
Bariiiii
igara
0
110
2017冬合宿
igara
0
150
Other Decks in Technology
See All in Technology
やさしいA2A入門
minorun365
PRO
7
750
AIソロプレナー時代に2ヶ月で20人増員した事業創造会社の開発組織の話
miyatakoji
0
240
SIer20年! 培ったスキルがスタートアップで輝く時
shucho0103
0
780
Dynamic Workersについて
yusukebe
2
640
protovalidate-es を導入してみた
bengo4com
0
160
ポケモンの型をTypeScriptの型システムで表現してみた
subroh0508
0
360
「気づいたら仕事が終わっている」バクラクAIエージェント本番運用の裏側 / layerx-bakuraku-aie2026
yuya4
19
11k
生成 AI × MCP で切り拓く次世代 SRE!自律型運用への挑戦と開発者体験の進化
_awache
0
170
ブロックチェーン / Blockchain
ks91
PRO
0
110
2026.06.13_AI時代に事業会社が「SIer出身エンジニア」を求める理由 / Why Businesses Seek Engineers with a System Integrator Background in the AI Era
jumtech
0
940
自律型AIエージェントは何を破壊するのか
kojira
0
130
社内 AI エージェント Synapse と セマンティックレイヤーの育て方
hiroakis
0
880
Featured
See All Featured
Believing is Seeing
oripsolob
1
140
RailsConf 2023
tenderlove
30
1.5k
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
marcoroth
1
160
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
chikuwait
0
570
New Earth Scene 8
popppiees
3
2.3k
Leo the Paperboy
mayatellez
7
1.8k
Lightning talk: Run Django tests with GitHub Actions
sabderemane
0
200
Embracing the Ebb and Flow
colly
88
5.1k
Un-Boring Meetings
codingconduct
0
310
Fashionably flexible responsive web design (full day workshop)
malarkey
408
66k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
tmiket
1
190
How STYLIGHT went responsive
nonsquared
100
6.2k
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
お し ま い