How to hack VS Code: evil ways (Japanese)

Presented at Kyoto.js 15 https://kyotojs.connpass.com/event/113442/

Transcript

1. amagitakayosi
   amagitakayosi
   HOW TO HACK
   VSCODE
   :Evil Ways
   HOW TO HACK
   VSCODE
   :Evil Ways
   

   View Slide

2. @amagitakayosi
   

   View Slide

3. View Slide

4. ϥΠϒίʔσΟϯά7+΍ͬͯ·͢
   

   View Slide

5. 7&%"
   (-4-ϥΠϒίʔσΟϯά؀ڥ
   
   Λ࡞͍ͬͯ·͢
   

   View Slide

6. 7&%"ͷྑ͍ͱ͜Ζ
   w 7+Ͱ͖Δ
   w "UPNͰ7+Ͱ͖Δ
   

   View Slide

7. 7&%"ͷѱ͍ͱ͜Ζ
   w "UPNͰ͔͠ಈ͔ͳ͍
   

   View Slide

8. View Slide

9. ΍Γ·ͨ͠
   ΍Γ·ͨ͠
   ΍Γ·ͨ͠
   ΍Γ·ͨ͠
   

   View Slide

10. ࠓ೔ͷϝχϡʔ
    w 7&%"ͷ෮श
    w ͳͥ74$PEFͩͱ೉͍͠ͷ͔
    w 74$PEFͰͲ͏΍ͬͯಈ͔͔ͨ͠
    w ࠓޙͷ՝୊
    

    View Slide

11. veda
    veda
    veda
    

    View Slide

12. ɹ7&%"
    w "UPN্Ͱ(-4-Λ࣮ߦ͢Δύοέʔδ
    w ಈըΛ੾Γସ͑ͯΤϑΣΫτ͔͚ͨΓɺ

    ϨΠϚʔνϯά͚ͩͰ7+ͨ͠Γ
    w Ի੠ೖྗɺ.*%*ɺ04$ೖྗͳͲ

    ͞·͟·ͳೖྗʹରԠ
    

    View Slide

13. ɹ"UPN
    w &MFDUSPOͰ࡞ΒΕͨΤσΟλ(JU)VC੡
    w $ISPNFؙ͕͝ͱೖͬͯΔΑ͏ͳ΋Μ
    w ֦ுػೳͰ%0.͍͡Γ์୊ͳͷͰ

    8FC(-Ͱ΋8FC"VEJPͰ΋ԿͰ΋ग़དྷΔ
    

    View Slide

14. 7&%"ͷ࢓૊Έ
    UIཁૉ
    ΢Πϯυ΢
    ←canvasཁૉΛૠೖͯ͠

    ɹWebGLΛඳը
    

    View Slide

15. ɹɹ74$PEF 7JTVBM4UVEJP$PEF
    
    w .JDSPTPGU͕։ൃ
    w "UPNͱಉ͘͡&MFDUSPOϕʔε
    w ଟػೳɺߴ଎ɺิ׬͕ڧ͍
    w ࠷ۙΈΜͳ࢖ͬͯΔ
    

    View Slide

16. https://insights.stackoverflow.com/survey/2018
    ೥࠷΋ਓؾͷΤσΟλ
    

    View Slide

17. 7&%"ɼͳͥ74$PEFʹҠ২Ͱ͖ͳ͍ͷʁ
    w 74$PEF͸"UPNͱಉ͘͡&MFDUSPOϕʔε
    w ύϑΥʔϚϯεͱ҆શੑͷͨΊɺ

    ֦ுػೳͷݖݶ͸͔ͳΓ੍ݶ͞ΕΔ
    w ֦ுػೳͷ+4͸ผϓϩηεͰ࣮ߦ͞ΕΔ
    w %0.৮Εͳ͍ʜʜ
    

    View Slide

18. “VS Codeの拡張機能は、エディターのUIにHTML要素を

    　　追加したり、カスタムCSSを適用する事はできません”
    

    View Slide

19. View Slide

20. ຊ࣭
    w ίʔυͷഎ໘ʹ
    w 8FC(-Ͱඳըͨ͠എܠΛ
    w ϦΞϧλΠϜͰඳը͍ͨ͠
    

    View Slide

21. Ξϓϩʔν
    w ֎෦ϓϩηεͰϏϡʔΞʔΛ૸ΒͤΔ
    w ΤσΟλͷඳը݁ՌΛ֎෦ϓϩηεʹૹΔ
    w ͳΜͱͯ͠΋74$PEF্Ͱಈ͔͢
    

    View Slide

22. ֎෦ϓϩηεͰϏϡʔΞʔΛ૸ΒͤΔ
    w 74$PEFͷ΢Πϯυ΢͸൒ಁ໌ʹͰ͖Δ
    w ݱ࣌఺Ͱ͸8JOEPXT൛ͷΈ
    w .BD൛ରԠ΋#BDLMPHʹೖͬͨ
    w 74$PEFͷ΢Πϯυ΢ҐஔΛऔಘ͠ɺ

    ϏϡʔΞʔͷҐஔΛ௥ਵͤ͞Ε͹ྑ͍ʁ
    

    View Slide

23. ֎෦ϓϩηεͰϏϡʔΞʔΛ૸ΒͤΔ
    VSCode
    Ϩϯμϥʔ
    

    View Slide

24. w ಈըͱͯ͠ૹΔ
    w ಛఆͷ΢Πϯυ΢ͷඳը݁ՌΛऔಘ͢Δͷ͸

    ͳΜ͔ؤுΕ͹Ͱ͖Δ͸ͣʢ7%.9౳͕ରԠ
    w ΤσΟλͷഎܠΛࠇʹͯ͠ɺ

    ࠇ͍ॴΛൈ͍ͯग़ྗʹॏͶΕ͹Α͍ʁ
    w ݟਏͦ͏
    ΤσΟλͷඳը݁ՌΛ֎෦ϓϩηεʹૹΔ
    

    View Slide

25. ΤσΟλͷඳը݁ՌΛ֎෦ϓϩηεʹૹΔ
    ඳը݁Ռ
    Ϩϯμϥʔ
    VSCode
    

    View Slide

26. ͏ʙʙΜʜʜʜʜʜʜ
    

    View Slide

27. Μʁ
    

    View Slide

28. View Slide

29. w ଧݤ͢ΔͱΧʔιϧ͕രൃ͢ΔΞϨ
    w ࠷ॳ͸"UPNͰ࣮૷͞Εͨ
    w "UPNͰ͸DBOWBTΞχϝʔγϣϯɺͳ͸ͣ
    w 74$PEFͰ͸%0.Λ͍͡Εͳ͍ͷͰ

    ෆՄೳͩͱࢥΘΕ͕ͨʜʜʁ
    vscode-power-mode
    

    View Slide

30. w ࣄલʹΤϑΣΫτΛ(*'Ξχϝʹॻ͖ग़͠
    w %FDPSBUJPOͷCBDLHSPVOEJNBHFͱͯ͠

    (*'ΞχϝΛදࣔ
    1PXFS.PEFͷ࢓૊Έ
    

    View Slide

31. w ίʔυͷಛఆͷൣғʹ૷০Λ௥ՃͰ͖Δ
    w MJOUΤϥʔ΍ɺΧϥʔίʔυͷ৭ϓϨϏϡʔ౳
    w CFGPSF΍BGUFSʹ$44Λ౰ͯΒΕΔʂʂʂ
    w CBDLHSPVOEJNBHFͰը૾ΛಡΈࠐΊΔ
    %FDPSBUJPO"1*
    

    View Slide

32. ࢼ͠ʹը૾Λදࣔͯ͠ΈΔ
    

    View Slide

33. ը૾͸ಡΈࠐΊΔ
    w ຖϑϨʔϜɺඳը݁ՌΛը૾ϑΝΠϧʹ

    ॻ͖ग़ͤ͹ྑ͍ʂʂʂʂʂ
    w ΊͬͪΌॏͦ͏͚ͩͲ΍ͬͯΈΑ͏
    w γΣʔμʔΛಡΈࠐΜͰը૾Λు͖ग़͢

    Ϩϯμϥʔ࡞Γɺ74$PEF͔Βݺͼग़ͤ͹ྑ͍
    

    View Slide

34. ࡞ઓ
    1. γΣʔμʔΛϑΝΠϧʹอଘ
    

    View Slide

35. ࡞ઓ
    2. Ϩϯμϥʔ͕γΣʔμʔΛಡΈࠐΉ
    

    View Slide

36. ࡞ઓ
    3. Ϩϯμϥʔ͸ຖϑϨʔϜ

    ɹ ը૾ϑΝΠϧΛॻ͖ग़͠ଓ͚Δ
    

    View Slide

37. ࡞ઓ
    4. ΤσΟλʔ͸ॻ͖ग़͞Εͨը૾Λ

    ɹ ຖϑϨʔϜDecoratorʹදࣔ͢Δ
    

    View Slide

38. w ཁ݅
    w γΣʔμʔͷύεɺग़ྗαΠζΛड͚औΔ
    w 0QFO(-Ͱ(-4-Λඳը͠ɺϑΝΠϧʹॻग़
    w ग़ྗͨ͠ϑΝΠϧ໊Λඪ४ग़ྗʹදࣔ
    w 74$PEF͕ಡΈࠐΊΔΑ͏ʹ
    Ϩϯμϥʔ࡞੒
    

    View Slide

39. w ΫϩείϯύΠϧ͍ͨ͠
    w 8FC(-͸ΫϩεϓϥοτϑΥʔϜͰҒ͍ʜʜ
    w (Pͱ3VTUͰ0QFO(-ͷνϡʔτϦΞϧ΍ͬͨॴ

    (Pͷํָ͕ͦ͏ͩͬͨ
    w (P0QFO(-νϡʔτϦΞϧ

    IUUQTNFEJVNDPN!ESHPNFTQPQFOHMBOEHPMBOHHFUUJOHTUBSUFEBCDEEGEC
    
    w 3VTU0QFO(-νϡʔτϦΞϧ

    IUUQTXXXSFEEJUDPNSSVTUDPNNFOUTBCLH
    SVTU@BOE@PQFOHM@GSPN@TDSBUDI@B@CMPH@QPTU@TFSJFT
    ࠓճ͸(PΛ࠾༻
    

    View Slide

40. View Slide

41. w QPTJUJPOpYFE͕ޮ͔ͳ͍ʜʜʂʁ ୭͔ॿ͚ͯ
    
    
    w શը໘ʹද͍ࣔͨ͠ͷͰɺ%FDPSBUPSͷൣғΛ

    
    ʹ͕ͨ͠ɺεΫϩʔϧ͢Δͱফ͑ͯ͠·͏
    w 74$PEF͸ɺը໘֎ʹग़ͨཁૉΛ

    ଈ࠲ʹফͯ͠͠·͏Ͱରॲ
    w FEJUPSWJTJCMF3BOHFTͰରॲ
    %FDPSBUPS஍ຯʹۤ࿑ͨ͠఺
    

    View Slide

42. w ࠷ॳ͸GQT͘Β͍͔͠ग़ͳ͔ͬͨʜʜʂʂ
    w ΍ͬͨ͜ͱ
    w ඪ४ग़ྗɺϑΝΠϧॻ͖ग़͠ɺ

    γΣʔμʔߋ৽ͷରԠΛHPSPVUJOFͰ
    w 1/(ॻ͖ग़͠Λௐ੔
    ύϑΥʔϚϯεվળ
    

    View Slide

43. ૉ๿ͳ࣮૷
    

    View Slide

44. ૉ๿ͳ࣮૷
    ˡϑΝΠϧ*0ͰϒϩοΫ
    ˡඪ४ग़ྗͰϒϩοΫ
    

    View Slide

45. ը૾ϑΝΠϧ
    ॻ͖ग़͠
    ඪ४ग़ྗ
    ϝΠϯ
    描画したよ
    描画！
    ファイル
    書き出し！
    書き出したよ
    出力
    

    View Slide

46. ը૾ϑΝΠϧ
    ॻ͖ग़͠
    ඪ४ग़ྗ
    ϝΠϯ
    

    View Slide

47. ը૾ϑΝΠϧ
    ॻ͖ग़͠
    ඪ४ग़ྗ
    ϝΠϯ
    

    View Slide

48. վળޙͷ࣮૷
    ˡඇಉظͰը૾ॻ͖ग़͠
    

    View Slide

49. վળޙͷ࣮૷
    ˡඇಉظͰඪ४ग़ྗ
    

    View Slide

50. w (-'8͸ϝΠϯεϨουͰ͔͠ݺ΂ͳ͍ͷͰ

    Կ౓͔ϋϚͬͨ
    w ը૾ϑΝΠϧॻ͖ग़͠HPSPVUJOFͰ

    HMΦϒδΣΫτݺΜͰͯ4&(7ͨ͠Γ
    w HPͷඪ४ϕϯνϚʔΫπʔϧͰ͸

    ϝΠϯεϨουͰ࣮ߦ͢Δͷେมͦ͏ͩͬͨ
    HPSPVUJOFศརͰ͢Ͷ
    

    View Slide

51. w 0QFO(-͔Βऔಘͨ͠3(#"ΛJNBHFQOHʹ౉͢ͱ

    ্Լ൓సͯ͠ग़ྗ͞ΕΔ
    w 8FC(-ͩͱHM6/1"$,@'-*1@:@8(-Ͱ

    ඳը݁Ռ൓సͯ͠औಘͰ͖Δͷʹʜʜ
    w άάͬͯΈΔͱɺΈΜͳૉ๿ʹGPSϧʔϓͰ

    ্Լ൓సͯ͋͛ͯ͠ΔΑ͏ͩͬͨ
    1/(ॻ͖ग़͠Λௐ੔
    

    View Slide

52. w σʔλॻ͖ࠐΈͷGPSϧʔϓΛมߋͯ͠

    ԼͷϐΫηϧ͔Βॱ൪ʹॻ͖ग़͢Α͏ʹͨ͠

    IUUQTHJUIVCDPNHPMBOHHPCMPCNBTUFSTSDJNBHFQOHXSJUFSHP-
    
    
    w ͍ͭͰʹ#VpPΛ౉ͯ͠

    ϑΝΠϧॻ͖ࠐΈΛόοϑΝϦϯά͢ΔΑ͏ʹ
    w 'JMFXSJUF͸όοϑΝϦϯά͞Εͳ͍
    JNBHFQOHΛGPSL
    

    View Slide

53. YͰGQT͘Β͍ग़ΔΑ͏ʹ
    

    View Slide

54. w ΫϩεϓϥοτϑΥʔϜͳԻ੠ೖྗϥΠϒϥϦɺ

    ͋Μ·Γແ͍΋ΜͳΜͰ͢Ͷʜʜ
    w ࠓճ͸HPQPSUBVEJPΛ࠾༻
    w ΫϩείϯύΠϧͰ͖ͳ͍ʜʜ(Pͳͷʹ
    w 3VTU͸Ի੠ೖྗपΓ͔ͳΓ͔ͬ͠Γͯ͠ΔͷͰ

    ͍ͣΕ3VTUʹҠߦ͢Δ͔΋
    Ի੠ೖྗ
    

    View Slide

55. w HPඪ४ͷJNBHFQOHΛ࢖ͬͯͨ
    w 0QFO(-͔Βऔಘͨ͠3(#"Λ౉͢ͱ

    ্Լ൓సͯ͠ग़ྗ͞ΕΔ
    w 8FC(-ͩͱHM6/1"$,@'-*1@:@8(-Ͱ

    ඳը݁Ռ൓సͯ͠औಘͰ͖Δͷʹʜʜ
    w ௐ΂ͯΈΔͱɺΈΜͳૉ๿ʹGPSϧʔϓͰ

    ্Լ൓సͯ͋͛ͯ͠ΔΑ͏ͩͬͨ
    1/(ॻ͖ग़͠Λௐ੔
    

    View Slide

56. DEMO
    https://github.com/fand/veda-vscode
    

    View Slide

57. w ύϑΥʔϚϯεվળ
    w ςΫενϟಡΈࠐΈ
    w .*%*ͱ͔ରԠ
    ࠓޙͷ՝୊
    

    View Slide

58. w ը૾ॻ͖ग़͕͠Ͳ͏ͯ͠΋ϘτϧωοΫʹͳΔ
    w ॻ͖ग़͠ऴΘΓΛ଴ͨͣʹϩʔυͯ͠ΈΔʁ
    w ్த·Ͱ͔͠ಡΈࠐΊͣϒπ੾Εͨ͠
    w ϑΝΠϧ*0ݮΒ͢ʹ͸"1/(͕࢖͑Δʁ
    ύϑΥʔϚϯεվળ
    

    View Slide

59. w ߴը࣭Ξχϝʔγϣϯը૾ϑΥʔϚοτ
    w -*/&ελϯϓͱ͔Ͱ࢖ΘΕͯΔ
    w ϑΝΠϧͷߏ଄తʹ͸ɺ

    ෳ਺ͷ1/(Λ·ͱΊͯϔομ௥Ճ͢Δ͚ͩ
    w ϦΞϧλΠϜੑ͕ࣦΘΕΔͷͰϘπ
    "1/(
    

    View Slide

60. w 7&%"Ͱ͸ɺಈըૉࡐΛϩʔυͯ͠

    ςΫενϟͱͯ͠ར༻Ͱ͖Δ
    w 8FC(-ͷ"1*ʹWJEFPཁૉΛ౉ͯ͠Δ͚ͩ

    ʢϒϥ΢β͸Ғ͍ʜʜʣ
    w EDHNG ''.QFHͷϥούʔ
    Λ࢖͑͹ɺ

    ಈըͷ֤ϑϨʔϜΛ3(#"ͱͯ͠औಘͰ͖Δʜʁ
    ςΫενϟಡΈࠐΈ
    

    View Slide

61. ͜͜Ͱ࣌ؒ੾Ε
    

    View Slide

62. ·ͱΊ
    w ͳΜ͔ແཧ΍ΓؤுͬͨΒͦΕͳΓʹಈ͍ͨ
    w 74$PEFݫ͍͠ɻ"UPNͷᨳ͍จ۟

    ʮA hackable text editor for the 21st Centuryʯ

    ͸ӕ͡Όͳ͍ͳʜʜ
    w ϒϥ΢β͸Ғ͍Ϥ
    

    View Slide

63. ϒϥ΢βͬͯੌ͍ɺҒ͍
    w 8FC(-΋Ғ͍
    w UFY*NBHF%ʹDBOWBT΍WJEFPཁૉΛ౉ͨ͠Β

    ෆࢥٞͳྗͰϩʔυग़དྷΔΑ͏ʹͳΔ
    w 8FC"VEJP"1*ɺϓϥοτϑΥʔϜͷࣄߟ͑ͣʹ

    Ի੠ೖྗͱΕΔ
    w "1/(ಡΈࠐΈͱ͔΋Կ΋ߟ͑ͣʹߦ͚Δ
    

    View Slide

64. !74$PEF։ൃνʔϜ֤Ґ
    ֦ுػೳͰ%0.͍͡ΕΔΑ͏ʹ

    ͯ͘͠Εʂʂʂʂʂʂʂʂʂʂʂ
    ʂʂʂʂʂʂʂʂʂʂʂʂʂʂʂ
    ʂཔΉʂʂʂʂʂʂʂʂʂʂʂʂ
    ʂʂʂʂʂʂʂʂʂʂʂʂʂʂ
    ʂʂʂʂʂʂʂʂʂʂʂʂʂʂʂ
    

    View Slide

65. @amagitakayosi
    

    View Slide

66. https://veda.gl/
    

    View Slide