You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
29 lines
2.0 KiB
29 lines
2.0 KiB
4 years ago
|
# Building a browser extension
|
||
|
|
|
||
|
|
Building browser extensions is a fun and interesting way to think about the performance of your apps while building a different type of web asset. This module includes lessons on how browsers work and how to deploy a browser extension, how to build a form, call an API, and use local storage, and how to gauge the performance of your website and improve it.
|
||
|
|
|
||
|
|
You'll build a browser extension that works on Edge, Chrome, and Firefox. This extension, which is like a mini web site that is tailored to a very specific task, checks the [C02 Signal API](https://www.co2signal.com) for a given region's electricity usage and carbon intensity, and returns a reading on the region's carbon footprint.
|
||
|
|
|
||
|
|
This extension can be called ad hoc by a user once an API key and region code is input into a form to determine local electricity usage and thereby offer data that can influence a user's electricity decisions. For example, it may be preferable to delay running a clothes dryer (a carbon-intense activity) during a period of high electricity usage in your region.
|
||
|
|
|
||
|
|
### Topics
|
||
|
|
|
||
|
|
1. [About the browser](1-about-browsers/README.md)
|
||
|
|
2. [Forms and local storage](2-forms-browsers-local-storage/README.md)
|
||
|
|
3. [Background tasks and performance](3-background-tasks-and-performance/README.md)
|
||
|
|
|
||
|
|
### Credits
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
## Credits
|
||
|
|
|
||
|
|
The idea for this web carbon trigger was offered by Asim Hussain, lead at Microsoft of the Green Cloud Advocacy team and author of the [Green Principles](https://principles.green/). It was originally a [web site project](https://github.com/jlooper/green).
|
||
|
|
|
||
|
|
The structure of the browser extension was influenced by [Adebola Adeniran's COVID extension](https://github.com/onedebos/covtension).
|
||
|
|
|
||
|
|
The concept behind the 'dot' icon system was suggested by the icon structure of the [Energy Lollipop](https://energylollipop.com/) browser extension for California emissions.
|
||
|
|
|
||
|
|
These lessons were written with ♥️ by [Jen Looper](https://www.twitter.com/jenlooper)
|
||
|
|
|