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
86
2018夏開発合宿
igara
0
130
2018冬開発合宿
igara
0
1.2k
2017夏開発合宿
igara
0
180
Bariiiii
igara
0
110
2017冬合宿
igara
0
150
Other Decks in Technology
See All in Technology
PLaMoの事後学習を支える技術 / PFN LLMセミナー
pfn
PRO
9
4k
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
takaking22
7
4k
Function calling機能をPLaMo2に実装するには / PFN LLMセミナー
pfn
PRO
0
1k
衛星画像超解像化によって実現する2D, 3D空間情報の即時生成と“AI as a Service”/ Real-time generation spatial data enabled_by satellite image super-resolution
lehupa
0
120
extension 現場で使えるXcodeショートカット一覧
ktombow
0
220
Git in Team
kawaguti
PRO
3
330
空間を設計する力を考える / 20251004 Naoki Takahashi
shift_evolve
PRO
4
450
ACA でMAGI システムを社内で展開しようとした話
mappie_kochi
1
310
防災デジタル分野での官民共創の取り組み (2)DIT/CCとD-CERTについて
ditccsugii
0
120
Access-what? why and how, A11Y for All - Nordic.js 2025
gdomiciano
1
120
Simplifying Cloud Native app testing across environments with Dapr and Microcks
salaboy
0
120
Modern_Data_Stack最新動向クイズ_買収_AI_激動の2025年_.pdf
sagara
0
240
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Automating Front-end Workflow
addyosmani
1371
200k
Speed Design
sergeychernyshev
32
1.2k
YesSQL, Process and Tooling at Scale
rocio
173
14k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
Visualization
eitanlees
148
16k
Six Lessons from altMBA
skipperchong
28
4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.9k
The Invisible Side of Design
smashingmag
301
51k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
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
お し ま い