JS Workshop - Nicole Chung - (Cross) Browser Extensions

Опубликовано: 11 Февраль 2025
на канале: Toronto JS

176

Feb 7 2022

Are you curious about how to build browser extensions, but not sure where to start?
We will begin by building two vanilla examples with some CSS and Javascript. After this, we'll build a popup with React.

Topics covered
1. Why build an extension?
2. Anatomy of an extension
3. Basics of using the web extensions API versus the Chrome API for extensions
4. Message sending
5. Installing an extension in developer mode
6. Debugging tips
7. Security considerations
8. Build tool considerations

Nicole Chung is a UX engineer at Crowdstrike.
https://redconservatory.com/

Slides
https://docs.google.com/presentation/...

Workshop repo:
https://github.com/nicolechung/webext...

Please make sure to install Firefox AND another Chrome-flavoured browser (Chrome, Edge or Brave)

https://www.mozilla.org/en-CA/firefox...
https://www.microsoft.com/en-us/edge
https://brave.com/download/
https://www.google.com/intl/en_ca/chr...

The workshop examples have been tested in both Firefox and Chrome.

First two examples
https://github.com/nicolechung/super-...

Boilerplate for last example
https://github.com/nicolechung/webext...

Polyfill for “webextensions”
https://github.com/mozilla/webextensi...

Manifest documentation
https://developer.mozilla.org/en-US/d...

Where to download “flat” icons:
https://www.flaticon.com/

Download PNGS (SVGS are not free)
say “ok” to attribution
don’t download a black icon if you use dark mode on your browser

Where to download images
https://unsplash.com/s/photos/kitten

How to use Parcel to build a React extension:
https://redconservatory.com/articles/...

Thanks to Sherry Yang and Localost8080 for facilitating!