Chromeデベロッパーツールを自分色に染める

$ISPNFσϕϩούʔπʔϧΛ ࣗ෼৭ʹછΊΔ !KVNQFJ@JLFHBNJ !8F"SF+BWB4DSJQUFST!UI

ࣗݾ঺հ w !KVNQFJ@JLFHBNJ w ݩ$0#0-FS!෋࢜௨ w גࣜձࣾϓϨΠυ$9&OHJOFFS w /PEFKT 7VFKT
w ϙουΩϟελʔʢʮ͕͠ͳ͍ϥδΦʯύʔιφϦςΟʣ w ޷͖ͳϒΩ͸ɺʮϓϩϞσϥʔ.(ʯ

ࠓ೔͢Δ࿩

$ISPNFσϕϩούʔπʔϧ֦ு ָ͍͠Αʂ

$ISPNFσϕϩούʔπʔϧͱ͸

σϕϩούʔπʔϧͰΑ͘΍Δ͜ͱ w &MFNFOUTλϒ w %0.ΛݟΔ

σϕϩούʔπʔϧͰΑ͘΍Δ͜ͱ w $POTPMFλϒ w +4Λ࣮ߦ

σϕϩούʔπʔϧͰΑ͘΍Δ͜ͱ w /FUXPSLλϒ w ϦΫΤετͷத਎ΛݟΔ

ΊͬͪΌศརʂ

͔͠͠ɺ

ͭΒΈ ࣗ෼͕୳͍ͯ͠Δ৘ใʹ ͨͲΓͭ͘ͷ͕େม ಛʹɺ/FUXPSLλϒͭΒ͍

ཧ૝ ࣗ෼͕ݟ͍ͨ৘ใ͚ͩΛ ࣗ෼͕ݟ͍ͨܗࣜͰ ද͍ࣔͨ͠

֦ ு ͦ ͏ ͩ ɺ ɻ ͠ Α ͏

$ISPNFσϕϩούʔπʔϧ֦ுྫ

7VFKTEFWUPPMT w 7VFͷ$PNQPOFOUΛՄࢹԽ

,"35&"DUJPO7JFXFS w ,"35&ͷτϥοΩϯάσʔλΛՄࢹԽ w ࢓ࣄͰ7VFKT࢖ͬͯॻ͍ͨ

8FC5PPMT%FUFDUPS w ࠓճͷษڧձͷͨΊʹॻ͍ͨ w ͜͜ͰσϞ

$ISPNF֦ுͷ֓೦ਤ

$ISPNF֦ுͷ֓೦ਤ ࢀߟIUUQTEFWFMPQFSDISPNFDPNFYUFOTJPOTEFWUPPMT $POUFOUTDSJQUT #BDLHSPVOEQBHF %FW5PPMTQBHF 1BOFM 1BOFM ɾɾɾ

#BDLHSPVOEQBHF %FWUPPMTQBHF 1BOFM 1BOFM ɾɾɾ $POUFOUTDSJQUT wର৅ϖʔδͷ%0.΍%0.Πϕϯτʹ ΞΫηεͰ͖Δ ࢀߟIUUQTEFWFMPQFSDISPNFDPNFYUFOTJPOTEFWUPPMT $ISPNF֦ுͷ֓೦ਤ

$POUFOUTDSJQUT %FWUPPMTQBHF 1BOFM 1BOFM ɾɾɾ #BDLHSPVOEQBHF w$POUFOUTDSJQUTͱ%FW5PPMTQBHFͷ ڮ౉͠Λ͢Δ ࢀߟIUUQTEFWFMPQFSDISPNFDPNFYUFOTJPOTEFWUPPMT $ISPNF֦ுͷ֓೦ਤ

#BDLHSPVOEQBHF $POUFOUTDSJQUT %FWUPPMTQBHF 1BOFM 1BOFM ɾɾɾ w%FW5PPMT"1*ʹΞΫηεͰ͖Δ ʢ/FUXPSLΛ؂ࢹͨ͠Γʣ w1BOFM λϒ
Λෳ਺΋ͭ ࢀߟIUUQTEFWFMPQFSDISPNFDPNFYUFOTJPOTEFWUPPMT $ISPNF֦ுͷ֓೦ਤ

ॳΊͯͷ $ISPNF%FW5PPMT֦ு

࠷খϑΝΠϧߏ੒ NBOJGFTUKTPO EFWUPPMTIUNM EFWUPPMTKT QBOFMIUNM
QBOFMKT QBOFMDTT

QBOFMKT QBOFMDTT { "name": "Web Tools Detector", "manifest_version": 2, "version": "1", “devtools_page": "devtools.html" } w $ISPNF֦ுͱͯ͠ͷઃఆΛهड़ w EFWUPPMTIUNMΛΤϯτϦʔϙΠϯτʹࢦఆ

QBOFMKT QBOFMDTT <!DOCTYPE html> <html> <head> <script src="./devtools.js"></script> </head> <body> </body> </html> w EFWUPPMTKTΛಡΈࠐΉ chrome.devtools.panels.create( “WebTools", // Tab Title "", "./panel.html", (panel) => {} ); w QBOFMIUNMΛ౉ͯ͠ɺ1BOFMΛੜ੒

QBOFMKT QBOFMDTT <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel=“stylesheet" href=“./panel.css“> </head> <body> <h1>Web Tools Detactor</h1> <script src="./panel.js"></script> </body> </html> w 1BOFM಺ͷදࣔΛ)5.-Ͱهड़ w QBOFMKTΛಡΈࠐΉ w QBOFMDTTΛಡΈࠐΉ

͜ΕΛ͜͏ͯ͠ʜ ʈТʈ 㲇㱭㱬㲇

͜͏͡Ό ʈТʈ 㱭㱬

ࡉ͔͍͚Ͳॏཁͳ͜ͱ w $ISPNFͰ͸ɺϖʔδʹର͚ͯͩ͠Ͱ͸ͳ͘ɺσϕϩο ύʔπʔϧʹରͯ͠΋σϕϩούʔπʔϧ͕։͚Δ w VOEPDL͠ɺσϕϩούʔπʔϧʹϑΥʔΧεΛ౰ͯͯ ͔ΒɺDNE PQUJPO J .BD
Ͱ։͘

$ISPNFσϕϩούʔπʔϧΛ ࣗ෼৭ʹછΊΔ

͓΋ΉΖʹ7VFKTΛಋೖ 7VFͷ$41ରԠ൛Λ%- ͠ɺσΟϨΫτϦ಺ʹ഑ ஔ QBOFMIUNM಺ͰTDSJQUλ άΛ͔ͭͬͯಡΈࠐΉ QBOFMKT಺Ͱ7VFΠϯε
λϯεΛੜ੒ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src=“./vendor/vue.js"></script> </head> <body> <div id="container"> <h1>{{msg}}</h1> </div> <script src=“./panel.js"></script> </body> </html> new Vue({ el: "#container", data: { msg: “hoge” }, created: function() { /* ॳظॲཧ */ }, methods: { /* ϝιου */ } });

ϦΫΤετΛ؂ࢹ 7VFͷDSFBUFEͷதͰɺ$ISPNF͕ఏڙ͢Δ PO3FRVFTU'JOJTIFEΠϕϯτʹΠϕϯτϦεφΛొ࿥ ಛఆͷ৚݅ʹ߹க͢ΔϦΫΤετ͕͋ͬͨΒԿ͔͢Δ … created: function() {
chrome.devtools.network.onRequestFinished.addListener((req) => { const url = req.request.url; if (url.indexOf("google-analytics.com") !== -1) { this.msg = "͜ͷαΠτ͔ΒɺGoogleAnalyticsͷ߳Γ͕͢ΔͰήι"; } }); }, …

ը໘ભҠ࣌ʹදࣔΛΫϦΞ ಉ༷ʹɺ$ISPNF͕ఏڙ͢ΔPO/BWJHBUFEΠϕϯτʹΠ ϕϯτϦεφΛొ࿥ ը໘ભҠ΍ը໘ߋ৽͕͋ͬͨΒɺදࣔΛΫϦΞ͢Δ … created: function() {
… // ը໘ભҠ/ը໘ߋ৽࣌ chrome.devtools.network.onNavigated.addListener((url) => { this.msg = ""; } ); }, …

8FC5PPMT%FUFDUPSͷ࣮૷ w ֤πʔϧͷϦΫΤετઌυϝΠϯͷϦετΛ͓͖࣋ͬͯɺ ͦͷυϝΠϯ΁ͷϦΫΤετ͕͋ͬͨΒDMBTTΛ෇༩

ΊͬͪΌ؆୯ʂ

ଞʹ࡞Εͦ͏ͳ΋ͷ

ଞʹ࡞Εͦ͏ͳ΋ͷ w8FCαΠτ্ͷ4/4ຒΊࠐΈݕ஌ wϒϥ΢βήʔϜ)BDL w8FCϖʔδͷఴ࡟

օ͞Μ΋ɺ֦ுͯ͠Έͯ͸ʁ

એ఻

એ఻ w ຊ೔ͷιʔείʔυ͸ͪ͜Β w KVNUFDIXFC@UPPM@EFUFDUPSc(JU)VC w ձࣾͷΤϯδχΞϒϩάͰಉ͡ωλΛॻ͍ͯ·͢ w $ISPNFσϕϩούʔπʔϧʹಠࣗػೳΛ௥Ճ͢Δͭͷεςο ϓc1-"*%FOHJOFFSCMPH
w ϙουΩϟετͰ΋࿩ͯ͠·͢ w FQָ͍͠$ISPNF)BDLc͕͠ͳ͍ϥδΦ w 8F+4ओ࠵ͷUBNJ͞ΜήετճϙουΩϟετ΋͋Γ·͢ w TQBʲήετUB@@NJZBOʳָ͍͠ηϒౡΤϯδχΞཹֶc ͕͠ͳ͍ϥδΦ

͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ

Chromeデベロッパーツールを自分色に染める

Chromeデベロッパーツールを自分色に染める

More Decks by jumpei_ikegami

Other Decks in Technology

Featured

Transcript