Successfully reported this slideshow.

BayCHI 5/11/2010 Greasemonkey Intro

1,291 views

Published on

Stone Knives, Bear Skins, and Greasemonkey: Tools for Tearing Down the Walls between Engineering and Design (given at BayCHI, 5 May 2010)

Published in: Technology
  • Be the first to comment

BayCHI 5/11/2010 Greasemonkey Intro

  1. 1. You Will Need: • Firefox: firefox.com • Firebug: getfirebug.com • Greasemonkey: greasespot.net • Resources here: kentbrewster.com/baychi
  2. 2. Stone Knives, Bear Skins, and Greasemonkey: Tools for Tearing Down the Walls between Engineering and Design Kent Brewster http://kentbrewster.com @kentbrew, most places http://kentbrewster.com/baychi
  3. 3. But first, it's time to play America's favorite game show.... http://kentbrewster.com/baychi
  4. 4. Disclaimerama! http://kentbrewster.com/baychi
  5. 5. Disclaimerama! • About Me http://kentbrewster.com/baychi
  6. 6. Disclaimerama! • About Me • About My Relationship with Netflix http://kentbrewster.com/baychi
  7. 7. Disclaimerama! • About Me • About My Relationship with Netflix • About the Code http://kentbrewster.com/baychi
  8. 8. About Me http://kentbrewster.com/baychi
  9. 9. About Me • No formal education in computer science. http://kentbrewster.com/baychi
  10. 10. About Me • No formal education in computer science. • No degree of any sort, actually. http://kentbrewster.com/baychi
  11. 11. About Me • No formal education in computer science. • No degree of any sort, actually. • Got my start programming in BASIC on a TRS-80 in 1977. http://kentbrewster.com/baychi
  12. 12. About Me • No formal education in computer science. • No degree of any sort, actually. • Got my start programming in BASIC on a TRS-80 in 1977. • Prototyped the Yahoo! front page in 2008. http://kentbrewster.com/baychi
  13. 13. About Me • No formal education in computer science. • No degree of any sort, actually. • Got my start programming in BASIC on a TRS-80 in 1977. • Prototyped the Yahoo! front page in 2008. • Living proof that just about anybody can do this stuff. http://kentbrewster.com/baychi
  14. 14. About Me and Netflix http://kentbrewster.com/baychi
  15. 15. About Me and Netflix • None of what I'm about to show is official content or opinion, nor will I address questions about Netflix. That said.... http://kentbrewster.com/baychi
  16. 16. About Me and Netflix • None of what I'm about to show is official content or opinion, nor will I address questions about Netflix. That said.... • Yeah, it's awesome. If you want to know more, visit netflix.com/jobs http://kentbrewster.com/baychi
  17. 17. About Me and Netflix • None of what I'm about to show is official content or opinion, nor will I address questions about Netflix. That said.... • Yeah, it's awesome. If you want to know more, visit netflix.com/jobs • Do watch that 128-slide corporate culture presentation. They are dead serious about every single page. http://kentbrewster.com/baychi
  18. 18. About the Code http://kentbrewster.com/baychi
  19. 19. About the Code • Not great JavaScript examples. http://kentbrewster.com/baychi
  20. 20. About the Code • Not great JavaScript examples. • Not great Greasemonkey examples, either. http://kentbrewster.com/baychi
  21. 21. About the Code • Not great JavaScript examples. • Not great Greasemonkey examples, either. • They don't have to be great. http://kentbrewster.com/baychi
  22. 22. About the Code • Not great JavaScript examples. • Not great Greasemonkey examples, either. • They don't have to be great. • All they have to do is run once, for the right person. http://kentbrewster.com/baychi
  23. 23. What We Already Know About Prototyping http://kentbrewster.com/baychi
  24. 24. What We Already Know About Prototyping • Working prototypes work best. http://kentbrewster.com/baychi
  25. 25. What We Already Know About Prototyping • Working prototypes work best. • It's very hard to get the experience right. http://kentbrewster.com/baychi
  26. 26. What We Already Know About Prototyping • Working prototypes work best. • It's very hard to get the experience right. • It's expensive. Really, really expensive. http://kentbrewster.com/baychi
  27. 27. What We Already Know About Prototyping • Working prototypes work best. • It's very hard to get the experience right. • It's expensive. Really, really expensive. • You throw it away when you're done. http://kentbrewster.com/baychi
  28. 28. About Engineers http://kentbrewster.com/baychi
  29. 29. About Engineers • They already know why what you're asking for is impossible, and are already frustrated that you're not listening to them when they explain why. (Yes, they already know everything. That's why they are engineers.) http://kentbrewster.com/baychi
  30. 30. About Engineers • They already know why what you're asking for is impossible, and are already frustrated that you're not listening to them when they explain why. (Yes, they already know everything. That's why they are engineers.) • If they build prototypes for too long, it will make them crazy. They will burn out and go someplace their work lasts longer and is seen by more people. http://kentbrewster.com/baychi
  31. 31. How Designers See Engineers http://kentbrewster.com/baychi
  32. 32. How Designers See Engineers • Flinchy. http://kentbrewster.com/baychi
  33. 33. How Designers See Engineers • Flinchy. • Hypersensitive to deadlines. http://kentbrewster.com/baychi
  34. 34. How Designers See Engineers • Flinchy. • Hypersensitive to deadlines. • Full of reasons why it cannot be done. http://kentbrewster.com/baychi
  35. 35. How Designers See Engineers • Flinchy. • Hypersensitive to deadlines. • Full of reasons why it cannot be done. • Full of reasons why it should not be done. http://kentbrewster.com/baychi
  36. 36. How Engineers See Designers http://kentbrewster.com/baychi
  37. 37. How Engineers See Designers • Flighty. http://kentbrewster.com/baychi
  38. 38. How Engineers See Designers • Flighty. • Unable to understand the concept that time continues to progress at the rate of one second per second, no matter what. http://kentbrewster.com/baychi
  39. 39. How Engineers See Designers • Flighty. • Unable to understand the concept that time continues to progress at the rate of one second per second, no matter what. • Full of reasons why it has to be done even though it cannot (and should not, dammit!) be done. http://kentbrewster.com/baychi
  40. 40. Tearing Down the Wall http://kentbrewster.com/baychi
  41. 41. Tearing Down the Wall • Involve your engineers early. http://kentbrewster.com/baychi
  42. 42. Tearing Down the Wall • Involve your engineers early. • Ask for help before the important choices have already been made. http://kentbrewster.com/baychi
  43. 43. Tearing Down the Wall • Involve your engineers early. • Ask for help before the important choices have already been made. • Please don't ask for the logo to spin and be on fire. http://kentbrewster.com/baychi
  44. 44. Tearing Down the Wall • Involve your engineers early. • Ask for help before the important choices have already been made. • Please don't ask for the logo to spin and be on fire. • Other non-starters: IE6 support for rounded corners, drop shadows, and PNG transparency. Don't even go there. http://kentbrewster.com/baychi
  45. 45. Plan B: Do It Yourself http://kentbrewster.com/baychi
  46. 46. Plan B: Do It Yourself • If what you are looking for is an incremental change, try building it. http://kentbrewster.com/baychi
  47. 47. Plan B: Do It Yourself • If what you are looking for is an incremental change, try building it. • It will work well enough to show to your boss, or to a user test group. http://kentbrewster.com/baychi
  48. 48. Plan B: Do It Yourself • If what you are looking for is an incremental change, try building it. • It will work well enough to show to your boss, or to a user test group. • When you show it to an engineer, she will be impressed with your commitment and initiative, and much more likely to want to help out when the project gets real. http://kentbrewster.com/baychi
  49. 49. Strategy http://kentbrewster.com/baychi
  50. 50. Strategy • Bring up the page in your browser. • After it renders, make changes to the structure, presentation, and behavior. • Do this by injecting JavaScript into the browser. • For best results, do this automatically when the page loads. http://kentbrewster.com/baychi
  51. 51. JavaScript Injection http://kentbrewster.com/baychi
  52. 52. JavaScript Injection • from the console: javascript:alert('ding'); http://kentbrewster.com/baychi
  53. 53. JavaScript Injection • from the console: javascript:alert('ding'); • with a toolbar bookmarklet http://kentbrewster.com/baychi
  54. 54. JavaScript Injection • from the console: javascript:alert('ding'); • with a toolbar bookmarklet • with a scripting tool, such as Greasemonkey http://kentbrewster.com/baychi
  55. 55. Toolbar Bookmarklets http://kentbrewster.com/baychi
  56. 56. Toolbar Bookmarklets • limited in size (~2000 characters) http://kentbrewster.com/baychi
  57. 57. Toolbar Bookmarklets • limited in size (~2000 characters) • tricky to set up for installation http://kentbrewster.com/baychi
  58. 58. Toolbar Bookmarklets • limited in size (~2000 characters) • tricky to set up for installation • hard to debug http://kentbrewster.com/baychi
  59. 59. Toolbar Bookmarklets • limited in size (~2000 characters) • tricky to set up for installation • hard to debug • very powerful: can include foreign scripts http://kentbrewster.com/baychi
  60. 60. Toolbar Bookmarklets • limited in size (~2000 characters) • tricky to set up for installation • hard to debug • very powerful: can include foreign scripts • have to be installed, managed, and manually clicked with every page load http://kentbrewster.com/baychi
  61. 61. Bookmarklet Examples <a href="javascript:alert('ding');">Annoy Me</a> <a href="javascript:(function(){var %20a=document.getElementsByTagName('A');for(i=0;i<a .length;i++){a[i].style.color='#f00';}})();">Turn My Links Red</a> <a href="javascript:(function(){var %20t=document.getElementsByTagName('TITLE') [0];t.textContent='HACKED! '+t.textContent;}) ();">Hack My Title</a> http://kentbrewster.com/baychi
  62. 62. Greasemonkey Scripts http://kentbrewster.com/baychi
  63. 63. Greasemonkey Scripts • Do exactly what toolbar bookmarklets do: modify the page after it's loaded. http://kentbrewster.com/baychi
  64. 64. Greasemonkey Scripts • Do exactly what toolbar bookmarklets do: modify the page after it's loaded. • Can be much more complex; have local storage and a robust API. http://kentbrewster.com/baychi
  65. 65. Greasemonkey Scripts • Do exactly what toolbar bookmarklets do: modify the page after it's loaded. • Can be much more complex; have local storage and a robust API. • Have a much better development environment, right there in Firefox. http://kentbrewster.com/baychi
  66. 66. Greasemonkey Scripts • Do exactly what toolbar bookmarklets do: modify the page after it's loaded. • Can be much more complex; have local storage and a robust API. • Have a much better development environment, right there in Firefox. • Work automatically, with every page load. http://kentbrewster.com/baychi
  67. 67. Fixing Your Editor http://kentbrewster.com/baychi
  68. 68. Fixing Your Editor • Enter about:config http://kentbrewster.com/baychi
  69. 69. Fixing Your Editor • Enter about:config • Reassure Firefox that you know what you're doing. http://kentbrewster.com/baychi
  70. 70. Fixing Your Editor • Enter about:config • Reassure Firefox that you know what you're doing. • Enter greasemonkey in Filter. http://kentbrewster.com/baychi
  71. 71. Fixing Your Editor • Enter about:config • Reassure Firefox that you know what you're doing. • Enter greasemonkey in Filter. • Click greasemonkey.editor and pick your favored editor. I'll be using TextMate tonight. http://kentbrewster.com/baychi
  72. 72. Load Your Script
  73. 73. Load Your Script • Go back to kentbrewster.com/baychi
  74. 74. Load Your Script • Go back to kentbrewster.com/baychi • Make sure Greasemonkey is running. (You should see a smiling brown monkey, not a constipated-looking gray monkey).
  75. 75. Load Your Script • Go back to kentbrewster.com/baychi • Make sure Greasemonkey is running. (You should see a smiling brown monkey, not a constipated-looking gray monkey). • Click the view raw link at the bottom of the page after the script listing, and then Install in the Greasemonkey add box.
  76. 76. Load Your Script • Go back to kentbrewster.com/baychi • Make sure Greasemonkey is running. (You should see a smiling brown monkey, not a constipated-looking gray monkey). • Click the view raw link at the bottom of the page after the script listing, and then Install in the Greasemonkey add box. • Go to twitter.com and see if you notice anything different.
  77. 77. Edit Your Script http://kentbrewster.com/baychi
  78. 78. Edit Your Script • Right-click the monkey at the bottom of your page. http://kentbrewster.com/baychi
  79. 79. Edit Your Script • Right-click the monkey at the bottom of your page. • Choose Manage User Scripts http://kentbrewster.com/baychi
  80. 80. Edit Your Script • Right-click the monkey at the bottom of your page. • Choose Manage User Scripts • Monkeying with Twitter should be highlighted; if it isn't, click it. http://kentbrewster.com/baychi
  81. 81. Edit Your Script • Right-click the monkey at the bottom of your page. • Choose Manage User Scripts • Monkeying with Twitter should be highlighted; if it isn't, click it. • Click the Edit button at the bottom left. Your editor should launch. http://kentbrewster.com/baychi
  82. 82. Edit Your Script • Right-click the monkey at the bottom of your page. • Choose Manage User Scripts • Monkeying with Twitter should be highlighted; if it isn't, click it. • Click the Edit button at the bottom left. Your editor should launch. • Make changes, save, and reload the page. http://kentbrewster.com/baychi
  83. 83. Intermission (In which much hacking occurs.) http://kentbrewster.com/baychi
  84. 84. Sharing Your Scripts http://kentbrewster.com/baychi
  85. 85. Sharing Your Scripts • In your editor, do Save As http://kentbrewster.com/baychi
  86. 86. Sharing Your Scripts • In your editor, do Save As • Name your script yourfile.user.js http://kentbrewster.com/baychi
  87. 87. Sharing Your Scripts • In your editor, do Save As • Name your script yourfile.user.js • Save it to your desktop. http://kentbrewster.com/baychi
  88. 88. Sharing Your Scripts • In your editor, do Save As • Name your script yourfile.user.js • Save it to your desktop. • To install somewhere else, make sure Greasemonkey is enabled and drag it into the browser. http://kentbrewster.com/baychi
  89. 89. All Done? http://kentbrewster.com/baychi
  90. 90. All Done? • Don't forget to disable Greasemonkey. Do this by clicking the little brown monkey- face and making it turn gray. http://kentbrewster.com/baychi
  91. 91. All Done? • Don't forget to disable Greasemonkey. Do this by clicking the little brown monkey- face and making it turn gray. • Or, maybe you want to leave him running. Find more monkey-powered awesomeness at userscripts.org http://kentbrewster.com/baychi
  92. 92. Recommended Reading http://kentbrewster.com/baychi
  93. 93. Recommended Reading • Mark Pilgrim's Dive Into Greasemonkey (outdated, but still useful): diveintogreasemonkey.org http://kentbrewster.com/baychi
  94. 94. Recommended Reading • Mark Pilgrim's Dive Into Greasemonkey (outdated, but still useful): diveintogreasemonkey.org • The Greasemonkey wiki: wiki.greasespot.net http://kentbrewster.com/baychi
  95. 95. Questions? Kent Brewster http://kentbrewster.com @kentbrew on the remaining social networks that haven't kicked me off yet. http://developer.netflix.com http://kentbrewster.com/baychi

×