msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity
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.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'c7bff17c57'
${ noResults }
Web-Dev-For-Beginners/5-browser-extension
History
Roberto Pauletto c7bff17c57
Italian translation - Some more localization query strings in quizzes missing 		4 years ago
..
1-about-browsers Italian translation - Added query string for localization in quizzes where missing 4 years ago
2-forms-browsers-local-storage Italian translation - Some more localization query strings in quizzes missing 4 years ago
3-background-tasks-and-performance Italian translation - Added query string for localization in quizzes where missing 4 years ago
solution editing this PR for english version mistakes, missed link, and un-translating the code 4 years ago
start editing this PR for english version mistakes, missed link, and un-translating the code 4 years ago
translations Italian Translation - Ch. 5 4 years ago
.DS_Store folder names 4 years ago
README.md folder names 4 years ago
extension-screenshot.png folder names 4 years ago
install-on-edge.png folder names 4 years ago

README.md

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 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
  2. Forms and local storage
  3. Background tasks and performance

Credits

a green browser extension

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. It was originally a web site project.

The structure of the browser extension was influenced by Adebola Adeniran's COVID extension.

The concept behind the 'dot' icon system was suggested by the icon structure of the Energy Lollipop browser extension for California emissions.

These lessons were written with ♥️ by Jen Looper