Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

[links]
We Are JavaScripters!@10th
https://wajs.connpass.com/event/63502/

Vue.js devtools
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=ja

Chrome DevTools概念図
https://developer.chrome.com/extensions/devtools

jumtech/web_tool_detector | GitHub
https://github.com/jumtech/web_tool_detector

Chromeデベロッパーツールに独自機能を追加する6つのステップ | PLAID engineer blog
http://tech.plaid.co.jp/extending_chrome_devtools/

ep.22 楽しいChromeHack | しがないラジオ
https://shiganai.org/ep/ep22-chromehack

sp.4a 【ゲスト: ta__miyan】楽しいセブ島エンジニア留学 | しがないラジオ
https://shiganai.org/ep/sp4a-tami

2f19948521a196215b63c4362af6c6c7?s=128

jumpei_ikegami

August 25, 2017
Tweet

Transcript

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

  2. ࣗݾ঺հ w !KVNQFJ@JLFHBNJ w ݩ$0#0-FS!෋࢜௨ w גࣜձࣾϓϨΠυ$9&OHJOFFS w /PEFKT 7VFKT

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

    w ϙουΩϟελʔʢʮ͕͠ͳ͍ϥδΦʯύʔιφϦςΟʣ w ޷͖ͳϒΩ͸ɺʮϓϩϞσϥʔ.(ʯ
  4. ࠓ೔͢Δ࿩

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

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

  7. ͜Ε

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

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

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

  11. ΊͬͪΌศརʂ

  12. ͔͠͠ɺ

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

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

  15. ֦ ு ͦ ͏ ͩ ɺ ɻ ͠ Α ͏

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

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

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

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

  20. $ISPNF֦ுͷ֓೦ਤ

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

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

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

  24. #BDLHSPVOEQBHF $POUFOUTDSJQUT %FWUPPMTQBHF 1BOFM 1BOFM ɾɾɾ w%FW5PPMT"1*ʹΞΫηεͰ͖Δ ʢ/FUXPSLΛ؂ࢹͨ͠Γʣ w1BOFM λϒ

    Λෳ਺΋ͭ ࢀߟIUUQTEFWFMPQFSDISPNFDPNFYUFOTJPOTEFWUPPMT $ISPNF֦ுͷ֓೦ਤ
  25. ॳΊͯͷ $ISPNF%FW5PPMT֦ு

  26. ࠷খϑΝΠϧߏ੒  NBOJGFTUKTPO  EFWUPPMTIUNM  EFWUPPMTKT  QBOFMIUNM 

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

    QBOFMKT  QBOFMDTT { "name": "Web Tools Detector", "manifest_version": 2, "version": "1", “devtools_page": "devtools.html" } w $ISPNF֦ுͱͯ͠ͷઃఆΛهड़ w EFWUPPMTIUNMΛΤϯτϦʔϙΠϯτʹࢦఆ
  28. ࠷খϑΝΠϧߏ੒  NBOJGFTUKTPO  EFWUPPMTIUNM  EFWUPPMTKT  QBOFMIUNM 

    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Λੜ੒
  29. ࠷খϑΝΠϧߏ੒  NBOJGFTUKTPO  EFWUPPMTIUNM  EFWUPPMTKT  QBOFMIUNM 

    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ΛಡΈࠐΉ
  30. ͜ΕΛ͜͏ͯ͠ʜ ʈТʈ  㲇㱭㱬㲇

  31. ͜͏͡Ό ʈТʈ  㱭㱬

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

    Ͱ։͘
  33. $ISPNFσϕϩούʔπʔϧΛ ࣗ෼৭ʹછΊΔ

  34. ͓΋ΉΖʹ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: { /* ϝιου */ } });
  35. ϦΫΤετΛ؂ࢹ  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ͷ߳Γ͕͢ΔͰήι"; } }); }, …
  36. ը໘ભҠ࣌ʹදࣔΛΫϦΞ  ಉ༷ʹɺ$ISPNF͕ఏڙ͢ΔPO/BWJHBUFEΠϕϯτʹΠ ϕϯτϦεφΛొ࿥  ը໘ભҠ΍ը໘ߋ৽͕͋ͬͨΒɺදࣔΛΫϦΞ͢Δ … created: function() {

    … // ը໘ભҠ/ը໘ߋ৽࣌ chrome.devtools.network.onNavigated.addListener((url) => { this.msg = ""; } ); }, …
  37. 8FC5PPMT%FUFDUPSͷ࣮૷ w ֤πʔϧͷϦΫΤετઌυϝΠϯͷϦετΛ͓͖࣋ͬͯɺ ͦͷυϝΠϯ΁ͷϦΫΤετ͕͋ͬͨΒDMBTTΛ෇༩

  38. ΊͬͪΌ؆୯ʂ

  39. ଞʹ࡞Εͦ͏ͳ΋ͷ

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

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

  42. એ఻

  43. એ఻ 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 ͕͠ͳ͍ϥδΦ
  44. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ