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
150
My Chrome Plugin
Syo Igarashi
July 17, 2017
Tweet
Share
More Decks by Syo Igarashi
See All by Syo Igarashi
2020冬開発合宿
igara
0
210
2019冬開発合宿
igara
0
94
2018夏開発合宿
igara
0
150
2018冬開発合宿
igara
0
1.3k
2017夏開発合宿
igara
0
200
Bariiiii
igara
0
110
2017冬合宿
igara
0
150
Other Decks in Technology
See All in Technology
会社紹介資料 / Sansan Company Profile
sansan33
PRO
16
410k
GitHub Copilot CLI で Azure Portal to Bicep
tsubakimoto_s
0
150
2026年もソフトウェアサプライチェーンのリスクに立ち向かうために / Product Security Square #3
flatt_security
1
730
Laravelで学ぶOAuthとOpenID Connectの基礎と実装
kyoshidaxx
4
1.6k
「お金で解決」が全てではない!大規模WebアプリのCI高速化 #phperkaigi
stefafafan
4
2.1k
Phase11_戦略的AI経営
overflowinc
0
530
Goのerror型がシンプルであることの恩恵について理解する
yamatai1212
1
280
"作る"から"使われる"へ:Backstage 活用の現在地
sbtechnight
0
230
頼れる Agentic AI を支える Datadog のオブザーバビリティ / Powering Reliable Agentic AI with Datadog Observability
aoto
PRO
0
250
20年以上続く PHP 大規模プロダクトを Kubernetes へ ── クラウド基盤刷新プロジェクトの4年間
oogfranz
PRO
0
150
FastMCP OAuth Proxy with Cognito
hironobuiga
3
100
新規事業×QAの挑戦:不確実性を乗りこなす!フェーズごとに求められるQAの役割変革
hacomono
PRO
0
140
Featured
See All Featured
Producing Creativity
orderedlist
PRO
348
40k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.7k
Why You Should Never Use an ORM
jnunemaker
PRO
61
9.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
35
2.4k
Amusing Abliteration
ianozsvald
0
140
How GitHub (no longer) Works
holman
316
150k
The SEO Collaboration Effect
kristinabergwall1
0
400
Large-scale JavaScript Application Architecture
addyosmani
515
110k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
61k
It's Worth the Effort
3n
188
29k
Code Reviewing Like a Champion
maltzj
528
40k
Tell your own story through comics
letsgokoyo
1
860
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
お し ま い