How to Build a Chrome Extension* (*or anything else, for that matter)

Talk given at Codebar London's September monthly event at Unruly.

How do you build a Chrome extension? And what happens when, no matter what you're building, you run into inevitable roadblocks.

This talk will give a high level overview of the steps needed to create any Chrome extension (with the example used in the presentation being a new tab productivity extension like Momentum or Lagom) and then hopefully some inspiration for getting any project done, no matter what it is.

Transcript

1. How to build a Chrome extension* *or anything else, for that matter
2. Why a Chrome extension?
3. 1. Simplicity
4. 2. Creativity
5. 3. Documentation
8. Let’s go!
9. 1. The manifest manifest.json is the information pack for the extension. It requires a name, version, and manifest_version. Everything else you add according to your extension’s needs (i.e. permissions, overrides, etc.)
10. 2. HTML + CSS Next it’s good to lay out the basics of your page and get a tiny bit of styling on there so we can load the extension into Chrome. Then you can refresh and see changes you make live (for the most part).
11. 3. Load it into Chrome Go to the Chrome extensions page (Window > Extensions), turn on developer mode, and click ‘load unpacked extension’. Make sure the extension is turned on, then open a new tab - voila!
12. 4. Add stuff! For this extension we’re going to have a section that prompts you for your name and greets you; one to display weather for your location; another for the local time; and finally, one for photos of shiba inus because the ‘shibes as a service’ API is a thing.
13. 5a. Storage Modern browsers make use of client-side storage in the form of local storage and session storage. They’re both object-like and hold key-value pairs, i.e. {“myName”: “Kate”}
14. 5b. Greetings! So we can make use of local storage to store the user’s name and greet them with that name in every new tab, because local storage will persist until the user clears it.
15. 5b. Greetings! So we can make use of local storage to store the user’s name and greet them with that name in every new tab, because local storage will persist until the user clears it.
16. 5b. Greetings! So we can make use of local storage to store the user’s name and greet them with that name in every new tab, because local storage will persist until the user clears it.
17. 5b. Greetings! So we can make use of local storage to store the user’s name and greet them with that name in every new tab, because local storage will persist until the user clears it.
18. * A quick note on APIs • Most APIs out there require you to have a key to access them. You should never reveal this key anywhere or use it in client-side code. • Unfortunately, this is an issue for making simple extensions like this one. • The APIs used in this extension don’t require keys, which is a good option unless you want to take on a bigger challenge.
19. 6. Fetch shibes XMLHttpRequest? Luckily, for Chrome extensions we can use the more modern fetch method, which is much simpler and cleaner to use. Pop in the URL, grab the JSON response, then do something with it.
20. 6. Fetch shibes XMLHttpRequest? Luckily, for Chrome extensions we can use the more modern fetch method, which is much simpler and cleaner to use. Pop in the URL, grab the JSON response, then do something with it.
21. 6. Fetch shibes XMLHttpRequest? Luckily, for Chrome extensions we can use the more modern fetch method, which is much simpler and cleaner to use. Pop in the URL, grab the JSON response, then do something with it.
22. 6. Fetch shibes XMLHttpRequest? Luckily, for Chrome extensions we can use the more modern fetch method, which is much simpler and cleaner to use. Pop in the URL, grab the JSON response, then do something with it.
23. 7. Share your location You can use HTML5 geolocation to get the user’s location. getCurrentPosition() gets the lat/lon, and passes it on to be used by the function you put as a parameter.
24. 7. Share your location You can use HTML5 geolocation to get the user’s location. getCurrentPosition() gets the lat/lon, and passes it on to be used by the function you put as a parameter.
25. 8. Yahoo Weather API • Free and also happens to be one of the best weather APIs out there • Queries are made using YQL (Yahoo Query Language) which is somewhat human-readable: SELECT * FROM weather.forecast WHERE woeid IN (SELECT woeid FROM geo.places WHERE text="(51.51, -0.040)");
27. 8. Weather time! Still inside the usePosition() function, we’re going to fetch the Yahoo weather API using the lat/lon and use the response to plug in the various bits of weather info we want.
28. 8. Weather time! Still inside the usePosition() function, we’re going to fetch the Yahoo weather API using the lat/lon and use the response to plug in the various bits of weather info we want.
29. 8. Weather time! Still inside the usePosition() function, we’re going to fetch the Yahoo weather API using the lat/lon and use the response to plug in the various bits of weather info we want.
30. 9. Time time! Use the Date() object to get all your info, then use as much as you want. You will need to do a bit to format it, but it’s pretty straightforward.
31. 9. Time time! Use the Date() object to get all your info, then use as much as you want. You will need to do a bit to format it, but it’s pretty straightforward.
32. 9. Time time! Use the Date() object to get all your info, then use as much as you want. You will need to do a bit to format it, but it’s pretty straightforward.
33. 9. Time time! Use the Date() object to get all your info, then use as much as you want. You will need to do a bit to format it, but it’s pretty straightforward.
34. 10. Put it out into the world! • Create a zip file of the folder containing all your files, including the manifest • Go to the web store developer dashboard • Click ‘Add new item’ and upload the zip file, then fill in the information (icon, description, screenshot, etc) • Pay developer fee ($5) • Publish!
36. But I almost didn’t have something to show today...
37. *how to build anything else, for that matter
38. 1. Start small
39. 2. Be a perfectionist, but not too much
41. 2. Be a perfectionist, but not too much
42. 3. Yes, your idea is worth making
43. Inspiration
50. Go forth and build! make something
51. Follow me on Github and Twitter @sbinlondon
52. Links • Chrome developer docs: https://developer.chrome.com/extensions • Shibes as a Service: https://shibe.online/ • JSONView: https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc • Yahoo Weather API: https://developer.yahoo.com/weather/ • Momentum: https://chrome.google.com/webstore/detail/momentum/laookkfknpbbblfpciffpaejjkokdgca • Lagom: https://chrome.google.com/webstore/detail/lagom/kmklifknlepgmbbigahhphncmgkppbjb • Tabby Cat: https://chrome.google.com/webstore/detail/tabby-cat/mefhakmgclhhfbdadeojlkbllmecialg?hl=en • Tabagotchi: http://tabagotchi.com/ • Just DO It: https://chrome.google.com/webstore/detail/do-it-shia-labeouf-super/miagjfhahnjmnnmhdgelhmbpjgojfnok • Libdoge: https://chrome.google.com/webstore/detail/libdoge/ifbchccfedjkkhlnffjckaghjdpchhmo • nCage: https://chrome.google.com/webstore/detail/ncage/hnbmfljfohghaepamnfokgggaejlmfol And last but not least... • shibe.ly! https://chrome.google.com/webstore/detail/shibely/okphejkfibpegbllmmlomdngdoabmajh