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
83
My Chrome Plugin
Syo Igarashi
July 17, 2017
Tweet
Share
More Decks by Syo Igarashi
See All by Syo Igarashi
2020冬開発合宿
igara
0
150
2019冬開発合宿
igara
0
56
2018夏開発合宿
igara
0
100
2018冬開発合宿
igara
0
680
2017夏開発合宿
igara
0
140
Bariiiii
igara
0
84
2017冬合宿
igara
0
110
Other Decks in Technology
See All in Technology
Google Cloud の AI を支える裏側のインフラを垣間見る!
maroon1st
0
340
開発パフォーマンスを最大化するための開発体制
ham0215
2
330
20分で完全に理解するGrafanaダッシュボード
hamadakoji
3
430
レガシーをぶっ壊せ。AEONで始めるDevRelの話 / Qiita Night 2024-2-22
aeonpeople
3
1.3k
どうするコスト最適化のトレードオフ
tetsuyaooooo
1
510
Hands-on Gemini, the Google DeepMind LLM
meteatamel
1
110
複雑な構成要素を持つUIとの向き合い方 〜新・支出グラフでの実例〜 / B43 TECH TALK
nakamuuu
0
140
20240416_devopsdaystokyo
kzkmaeda
1
220
コンテナセキュリティの基本と脅威への対策
kyohmizu
3
760
[新卒向け研修資料] テスト文字列に「うんこ」と入れるな(2024年版)
infiniteloop_inc
3
13k
オーナーシップを持つ領域を明確にする
konifar
13
3.1k
Google Cloud Next '24 Recap(Cloud Run/k8s)
mokocm
0
110
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
Being A Developer After 40
akosma
57
580k
Building a Scalable Design System with Sketch
lauravandoore
456
32k
Unsuck your backbone
ammeep
663
57k
Optimising Largest Contentful Paint
csswizardry
8
2.4k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
Web development in the modern age
philhawksworth
202
10k
Become a Pro
speakerdeck
PRO
11
4.5k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Debugging Ruby Performance
tmm1
70
11k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.5k
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
お し ま い