mirror of
https://github.com/microsoft/Web-Dev-For-Beginners.git
synced 2025-08-21 22:05:19 +02:00
Added intial files
This commit is contained in:
Sanjay
168
5-browser-extension/1-about-browsers/translations/README.hi.md
Normal file
168
5-browser-extension/1-about-browsers/translations/README.hi.md
Normal file
@@ -0,0 +1,168 @@
|
||||
# Browser Extension Project Part 1: All about Browsers
|
||||
|
||||
|
||||
> Sketchnote by [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
|
||||
|
||||
## Pre-Lecture Quiz
|
||||
|
||||
[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/23)
|
||||
|
||||
### Introduction
|
||||
|
||||
Browser extensions add additional functionality to a browser. But before you build one, you should learn a little about how browsers do their work.
|
||||
|
||||
### About the browser
|
||||
|
||||
In this series of lessons, you'll learn how to build a browser extension that will work on Chrome, Firefox and Edge browsers. In this part, you'll discover how browsers work and scaffold out the elements of the browser extension.
|
||||
|
||||
But what is a browser exactly? It is a software application that allows an end user to access content from a server and display it on web pages.
|
||||
|
||||
✅ A little history: the first browser was called 'WorldWideWeb' and was created by Sir Timothy Berners-Lee in 1990.
|
||||
|
||||
|
||||
> Some early browsers, via [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
|
||||
|
||||
When a user connected to the internet using a URL (Uniform Resource Locator) address, usually using Hypertext Transfer Protocol via an `http` or `https` address, the browser communicates with a web server and fetches a web page.
|
||||
|
||||
At this point, the browser's rendering engine displays it on the user's device, which might be a mobile phone, desktop, or laptop.
|
||||
|
||||
Browsers also have the ability to cache content so that it doesn't have to be retrieved from the server every time. They can record the history of a user's browsing activity, store 'cookies', which are small bits of data that contain information used to store a user's activity, and more.
|
||||
|
||||
A really important thing to remember about browsers is that they are not all the same! Each browser has its strengths and weaknesses, and a professional web developer needs to understand how to make web pages perform well cross-browser. This includes handling small viewports such as a mobile phone's, as well as a user who is offline.
|
||||
|
||||
A really useful website that you probably should bookmark in whatever browser you prefer to use is [caniuse.com](https://www.caniuse.com). When you are building web pages, it's very helpful to use caniuse's lists of supported technologies so that you can best support your users.
|
||||
|
||||
✅ How can you tell what browsers are most popular with your web site's user base? Check your analytics - you can install various analytics packages as part of your web development process, and they will tell you what browsers are most used by the various popular browsers.
|
||||
|
||||
## Browser extensions
|
||||
|
||||
Why would you want to build a browser extension? It's a handy thing to attach to your browser when you need quick access to tasks that you tend to repeat. For example, if you find yourself needing to check colors on the various web pages that you interact with, you might install a color-picker browser extension. If you have trouble remembering passwords, you might use a password-management browser extension.
|
||||
|
||||
Browser extensions are fun to develop, too. They tend to manage a finite number of tasks that they perform well.
|
||||
|
||||
✅ What are your favorite browser extensions? What tasks do they perform?
|
||||
|
||||
### Installing extensions
|
||||
|
||||
Before you start building, take a look at the process of building and deploying a browser extension. While each browser varies a bit in how they manage this task, the process is similar on Chrome and Firefox to this example on Edge:
|
||||
|
||||
|
||||
|
||||
In essence, the process will be:
|
||||
|
||||
- build your extension using `npm run build`
|
||||
- navigate in the browser to the extensions pane using the "Settings and more" button (the `...` icon) on the top right
|
||||
- if it's a new installation, choose `load unpacked` to upload a fresh extension from its build folder (in our case it is `/dist`)
|
||||
- or, click `reload` if you are reloading the already-installed extension
|
||||
|
||||
✅ These instructions pertain to extensions you build yourself; to install extensions that have been released to the browser extension store associated to each browser, you should navigate to those [stores](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) and install the extension of your choice.
|
||||
|
||||
### Get Started
|
||||
|
||||
You're going to build a browser extension that displays your region's carbon footprint, showing your region's energy usage and the source of the energy. The extension will have a form that collects an API key so that you can access
|
||||
CO2 Signal's API.
|
||||
|
||||
**You need:**
|
||||
|
||||
- [an API key](https://www.co2signal.com/); enter your email in the box on this page and one will be sent to you
|
||||
- the [code for your region](http://api.electricitymap.org/v3/zones) corresponding to the [Electricity Map](https://www.electricitymap.org/map) (in Boston, for example, I use 'US-NEISO').
|
||||
- the [starter code](../start). Download the `start` folder; you will be completing code in this folder.
|
||||
- [NPM](https://www.npmjs.com) - NPM is a package management tool; install it locally and the packages listed in you `package.json` file will be installed for use by your web asset
|
||||
|
||||
✅ Learn more about package management in this [excellent Learn module](https://docs.microsoft.com/en-us/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-13441-cxa)
|
||||
|
||||
Take a minute to look through the codebase:
|
||||
|
||||
dist
|
||||
-|manifest.json (defaults set here)
|
||||
-|index.html (front-end HTML markup here)
|
||||
-|background.js (background JS here)
|
||||
-|main.js (built JS)
|
||||
src
|
||||
-|index.js (your JS code goes here)
|
||||
|
||||
✅ Once you have your API key and Region code handy, store those somewhere in a note for future use.
|
||||
|
||||
### Build the HTML for the extension
|
||||
|
||||
This extension has two views. One to gather the API key and region code:
|
||||
|
||||
|
||||
|
||||
And the second to display the region's carbon usage:
|
||||
|
||||
|
||||
|
||||
Let's start by building the HTML for the form and styling it with CSS.
|
||||
|
||||
In the `/dist` folder, you will build a form and a result area. In the `index.html` file, populate the delineated form area:
|
||||
|
||||
```HTML
|
||||
<form class="form-data" autocomplete="on">
|
||||
<div>
|
||||
<h2>New? Add your Information</h2>
|
||||
</div>
|
||||
<div>
|
||||
<label for="region">Region Name</label>
|
||||
<input type="text" id="region" required class="region-name" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="api">Your API Key from tmrow</label>
|
||||
<input type="text" id="api" required class="api-key" />
|
||||
</div>
|
||||
<button class="search-btn">Submit</button>
|
||||
</form>
|
||||
```
|
||||
This is the form where your saved information will be input and saved to local storage.
|
||||
|
||||
Next, create the results area; under the final form tag, add some divs:
|
||||
|
||||
```HTML
|
||||
<div class="result">
|
||||
<div class="loading">loading...</div>
|
||||
<div class="errors"></div>
|
||||
<div class="data"></div>
|
||||
<div class="result-container">
|
||||
<p><strong>Region: </strong><span class="my-region"></span></p>
|
||||
<p><strong>Carbon Usage: </strong><span class="carbon-usage"></span></p>
|
||||
<p><strong>Fossil Fuel Percentage: </strong><span class="fossil-fuel"></span></p>
|
||||
</div>
|
||||
<button class="clear-btn">Change region</button>
|
||||
</div>
|
||||
```
|
||||
At this point, you can try a build. Make sure to install the package dependencies of this extension:
|
||||
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
This command will use npm, the Node Package Manager, to install webpack for your extension's build process. Webpack is a bundler that handles compiling code. You can see the output of this process by looking in `/dist/main.js` - you see the code has been bundled.
|
||||
|
||||
For now, the extension should build and, if you deploy it into Edge as an extension, you'll see a form neatly displayed.
|
||||
|
||||
Congratulations, you've taken the first steps towards building a browser extension. In subsequent lessons, you'll make it more functional and useful.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Challenge
|
||||
|
||||
Take a look at a browser extension store and install one to your browser. You can examine its files in interesting ways. What do you discover?
|
||||
|
||||
## Post-Lecture Quiz
|
||||
|
||||
[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/24)
|
||||
|
||||
## Review & Self Study
|
||||
|
||||
In this lesson you learned a little about the history of the web browser; take this opportunity to learn about how the inventors of the World Wide Web envisioned its use by reading more about its history. Some useful sites include:
|
||||
|
||||
[The History of Web Browsers](https://www.mozilla.org/en-US/firefox/browsers/browser-history/)
|
||||
|
||||
[History of the Web](https://webfoundation.org/about/vision/history-of-the-web/)
|
||||
|
||||
[An interview with Tim Berners-Lee](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want)
|
||||
|
||||
## Assignment
|
||||
|
||||
[Restyle your extension](assignment.md)
|
||||
|
||||
@@ -0,0 +1,224 @@
|
||||
# Browser Extension Project Part 2: Call an API, use Local Storage
|
||||
|
||||
## Pre-Lecture Quiz
|
||||
|
||||
[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/25)
|
||||
|
||||
### Introduction
|
||||
|
||||
In this lesson, you'll call an API by submitting your browser extension's form and display the results in your browser extension. In addition, you'll learn about how you can store data in your browser's local storage for future reference and use.
|
||||
|
||||
✅ Follow the numbered segments in the appropriate files to know where to place your code
|
||||
|
||||
### Set up the elements to manipulate in the extension:
|
||||
|
||||
By this time you have built the HTML for the form and results `<div>` for your browser extension. From now on, you'll need to work in the `/src/index.js` file and building your extension bit by bit. Refer to the [previous lesson](../about-browsers/README.md) on getting your project set up and on the build process.
|
||||
|
||||
Working in your `index.js` file, start by creating some `const` variables to hold the values associated with various fields:
|
||||
|
||||
```JavaScript
|
||||
// form fields
|
||||
const form = document.querySelector('.form-data');
|
||||
const region = document.querySelector('.region-name');
|
||||
const apiKey = document.querySelector('.api-key');
|
||||
|
||||
// results
|
||||
const errors = document.querySelector('.errors');
|
||||
const loading = document.querySelector('.loading');
|
||||
const results = document.querySelector('.result-container');
|
||||
const usage = document.querySelector('.carbon-usage');
|
||||
const fossilfuel = document.querySelector('.fossil-fuel');
|
||||
const myregion = document.querySelector('.my-region');
|
||||
const clearBtn = document.querySelector('.clear-btn');
|
||||
```
|
||||
|
||||
All of these fields are referenced by their css class, as you set it up in the HTML in the previous lesson.
|
||||
|
||||
### Add listeners
|
||||
|
||||
Next, add event listeners to the form and the clear button that resets the form, so that if a user submits the form or clicks that reset button, something will happen, and add the call to initialize the app at the bottom of the file:
|
||||
|
||||
```JavaScript
|
||||
form.addEventListener('submit', (e) => handleSubmit(e));
|
||||
clearBtn.addEventListener('click', (e) => reset(e));
|
||||
init();
|
||||
```
|
||||
|
||||
✅ Notice the shorthand used to listen for a submit or click event, and how the event it is passed to the handleSubmit or reset functions. Can you write the equivalent of this shorthand in a longer format? Which do you prefer?
|
||||
|
||||
### Build out the init() function and the reset() function:
|
||||
|
||||
Now you are going to build the function that initializes the extension, which is called init():
|
||||
|
||||
```JavaScript
|
||||
function init() {
|
||||
//if anything is in localStorage, pick it up
|
||||
const storedApiKey = localStorage.getItem('apiKey');
|
||||
const storedRegion = localStorage.getItem('regionName');
|
||||
|
||||
//set icon to be generic green
|
||||
//todo
|
||||
|
||||
if (storedApiKey === null || storedRegion === null) {
|
||||
//if we don't have the keys, show the form
|
||||
form.style.display = 'block';
|
||||
results.style.display = 'none';
|
||||
loading.style.display = 'none';
|
||||
clearBtn.style.display = 'none';
|
||||
errors.textContent = '';
|
||||
} else {
|
||||
//if we have saved keys/regions in localStorage, show results when they load
|
||||
displayCarbonUsage(storedApiKey, storedRegion);
|
||||
results.style.display = 'none';
|
||||
form.style.display = 'none';
|
||||
clearBtn.style.display = 'block';
|
||||
}
|
||||
};
|
||||
|
||||
function reset(e) {
|
||||
e.preventDefault();
|
||||
//clear local storage for region only
|
||||
localStorage.removeItem('regionName');
|
||||
init();
|
||||
}
|
||||
|
||||
```
|
||||
In this function, there is some interesting logic. Reading through it, can you see what happens?
|
||||
|
||||
- two `const` are set up to check if the user has stored an APIKey and region code in local storage.
|
||||
- if either of those is null, show the form by changing its style to display as 'block'
|
||||
- hide the results, loading, and clearBtn and set any error text to an empty string
|
||||
- if there exists a key and region, start a routine to:
|
||||
- call the API to get carbon usage data
|
||||
- hide the results area
|
||||
- hide the form
|
||||
- show the reset button
|
||||
|
||||
Before moving on, it's useful to learn about a very important concept available in browsers: [LocalStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage). LocalStorage is a useful way to store strings in the browser as a `key-value` pair. This type of web storage can be manipulated by JavaScript to manage data in the browser. LocalStorage does not expire, while SessionStorage, another kind of web storage, is cleared when the browser is closed. The various types of storage have pros and cons to their usage.
|
||||
|
||||
> Note - your browser extension has its own local storage; the main browser window is a different instance and behaves separately.
|
||||
|
||||
You set your APIKey to have a string value, for example, and you can see that it is set on Edge by "inspecting" a web page (you can right-click a browser to inspect) and going to the Applications tab to see the storage.
|
||||
|
||||
|
||||
|
||||
✅ Think about situations where you would NOT want to store some data in LocalStorage. In general, placing API Keys in LocalStorage is a bad idea! Can you see why? In our case, since our app is purely for learning and will not be deployed to an app store, we will use this method.
|
||||
|
||||
Notice that you use the Web API to manipulate LocalStorage, either by using `getItem()`, `setItem()` or `removeItem()`. It's widely supported across browsers.
|
||||
|
||||
Before building the `displayCarbonUsage()` function that is called in `init()`, let's build the functionality to handle the initial form submission.
|
||||
|
||||
### Handle the form submission
|
||||
|
||||
Create a function called `handleSubmit` that accepts an event argument `(e)`. Stop the event from propagating (in this case, we want to stop the browser from refreshing) and call a new function, `setUpUser`, passing in the arguments `apiKey.value` and `region.value`. In this way, you use the two values that are brought in via the initial form when the appropriate fields are populated.
|
||||
|
||||
```JavaScript
|
||||
function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
setUpUser(apiKey.value, region.value);
|
||||
}
|
||||
```
|
||||
✅ Refresh your memory - the HTML you set up in the last lesson has two input fields whose `values` are captured via the `const` you set up at the top of the file, and they are both `required` so the browser stops users from inputting null values.
|
||||
|
||||
### Set up the user
|
||||
|
||||
Moving on to the `setUpUser` function, here is where you set local storage values for apiKey and regionName. Add a new function:
|
||||
|
||||
```JavaScript
|
||||
function setUpUser(apiKey, regionName) {
|
||||
localStorage.setItem('apiKey', apiKey);
|
||||
localStorage.setItem('regionName', regionName);
|
||||
loading.style.display = 'block';
|
||||
errors.textContent = '';
|
||||
clearBtn.style.display = 'block';
|
||||
//make initial call
|
||||
displayCarbonUsage(apiKey, regionName);
|
||||
}
|
||||
```
|
||||
This function sets a loading message to show while the API is called. At this point, you have arrived at creating the most important function of this browser extension!
|
||||
|
||||
### Display Carbon Usage
|
||||
|
||||
Finally it's time to query the API!
|
||||
|
||||
Before going further, we should discuss APIs. APIs, or [Application Programming Interfaces](https://www.webopedia.com/TERM/A/API.html), are a critical element of a web developer's toolbox. They provide standard ways for programs to interact and interface with each other. For example, if you are building a web site that needs to query a database, someone might have created an API for you to use. While there are many types of APIs, one of the most popular is a [REST API](https://www.smashingmagazine.com/2018/01/understanding-using-rest-api/).
|
||||
|
||||
✅ The term 'REST' stands for 'Representational State Transfer' and features using variously-configured URLs to fetch data. Do a little research on the various types of APIs available to developers. What format appeals to you?
|
||||
|
||||
There are important things to note about this function. First notice the [`async` keyword](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function). Writing your functions so that they run asynchronously means that they wait for an action, such as data being returned, to be completed before continuing.
|
||||
|
||||
Here's a quick video about `async`:
|
||||
|
||||
[](https://youtube.com/watch?v=YwmlRkrxvkk "Async and Await for managing promises")
|
||||
|
||||
> Click the image above for a video about async/await.
|
||||
|
||||
Create a new function to query the C02Signal API:
|
||||
|
||||
```JavaScript
|
||||
import axios from '../node_modules/axios';
|
||||
|
||||
async function displayCarbonUsage(apiKey, region) {
|
||||
try {
|
||||
await axios
|
||||
.get('https://api.co2signal.com/v1/latest', {
|
||||
params: {
|
||||
countryCode: region,
|
||||
},
|
||||
headers: {
|
||||
'auth-token': apiKey,
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
let CO2 = Math.floor(response.data.data.carbonIntensity);
|
||||
|
||||
//calculateColor(CO2);
|
||||
|
||||
loading.style.display = 'none';
|
||||
form.style.display = 'none';
|
||||
myregion.textContent = region;
|
||||
usage.textContent =
|
||||
Math.round(response.data.data.carbonIntensity) + ' grams (grams C02 emitted per kilowatt hour)';
|
||||
fossilfuel.textContent =
|
||||
response.data.data.fossilFuelPercentage.toFixed(2) +
|
||||
'% (percentage of fossil fuels used to generate electricity)';
|
||||
results.style.display = 'block';
|
||||
});
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
loading.style.display = 'none';
|
||||
results.style.display = 'none';
|
||||
errors.textContent = 'Sorry, we have no data for the region you have requested.';
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
This is a big function. What's going on here?
|
||||
|
||||
- following best practices, you use an `async` keyword to make this function behave asyncronously. The function contains a `try/catch` block as it will return a promise when the API returns data. Because you don't have control over the speed that the API will respond (it may not respond at all!), you need to handle this uncertainty by call it asyncronously.
|
||||
- you're querying the co2signal API to get your region's data, using your API Key. To use that key, you have to use a type of authentication in your header parameters.
|
||||
- once the API responds, you assign various elements of its response data to the parts of your screen you set up to show this data.
|
||||
- if there's an error, or if there is no result, you show an error message.
|
||||
|
||||
✅ Using asyncronous programming patterns is another very useful tool in your toolbox. Read [about the various ways](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) you can configure this type of code.
|
||||
|
||||
Congratulations! If you build your extension (`npm run build`) and refresh it in your extensions pane, you have a working extension! The only thing that isn't working is the icon, and you'll fix that in the next lesson.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Challenge
|
||||
|
||||
We've discussed several types of API so far in these lessons. Choose a web API and research in depth what it offers. For example, take a look at APIs available within browsers such as the [HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API). What makes a great API in your opinion?
|
||||
|
||||
## Post-Lecture Quiz
|
||||
|
||||
[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/26)
|
||||
|
||||
## Review & Self Study
|
||||
|
||||
You learned about LocalStorage and APIs in this lesson, both very useful for the professional web developer. Can you think how these two things work together? Think about how you would architect a web site that would store items to be used by an API.
|
||||
|
||||
## Assignment
|
||||
|
||||
[Adopt an API](assignment.md)
|
||||
|
||||
@@ -0,0 +1,161 @@
|
||||
# Browser Extension Project Part 3: Learn about Background Tasks and Performance
|
||||
|
||||
## Pre-Lecture Quiz
|
||||
|
||||
[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/27)
|
||||
|
||||
### Introduction
|
||||
|
||||
In the last two lessons of this module, you learned how to build a form and display area for data fetched from an API. It's a very standard way of creating web presences on the web. You even learned how to handle fetching data asyncronously. Your browser extension is very nearly complete.
|
||||
|
||||
It remains to manage some background tasks, including refreshing the color of the extension's icon, so this is a great time to talk about how the browser manages this kind of task. Let's think about these browser tasks in the context of the performance of your web assets as you build them.
|
||||
|
||||
## Web Performance Basics
|
||||
|
||||
> "Website performance is about two things: how fast the page loads, and how fast the code on it runs." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
|
||||
|
||||
The topic of how to make your web sites blazingly fast on all kinds of devices, for all kinds of users, in all kinds of situations, is unsurprisingly vast. Here are some points to keep in mind as you build either a standard web project or a browser extension.
|
||||
|
||||
The first thing you need to do to ensure that your site is running efficiently is to gather data about its performance. The first place to do this is in the developer tools of your web browser. In Edge, you can select the "Settings and more" button (the three dots icon on the top right of the browser), then navigate to More Tools > Developer Tools and open the Performance tab. You can also use the keyboard shortcuts `Ctrl` + `Shift` + `I` on Windows, or `Option` + `Command` + `I` on Mac to open developer tools.
|
||||
|
||||
The Performance tab contains a Profiling tool. Open a web site (try, for example, https://www.microsoft.com) and click the 'Record' button, then refresh the site. Stop the recording at any time, and you will be able to see the routines that are generated to 'script', 'render', and 'paint' the site:
|
||||
|
||||
|
||||
|
||||
✅ Visit the [Microsoft Documentation](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/performance?WT.mc_id=academic-13441-cxa) on the Performance panel in Edge
|
||||
|
||||
> Tip: to get a true reading of your web site's startup time, clear your browser's cache
|
||||
|
||||
Select elements of the profile timeline to zoom in on events that happen while your page loads.
|
||||
|
||||
Get a snapshot of your page's performance by selecting a part of the profile timeline and looking at the summary pane:
|
||||
|
||||
|
||||
|
||||
Check the Event Log pane to see if any event took longer than 15 ms:
|
||||
|
||||
|
||||
|
||||
✅ Get to know your profiler! Open the developer tools on this site and see if there are any bottlenecks. What's the slowest-loading asset? The fastest?
|
||||
|
||||
## Profiling checks
|
||||
|
||||
In general there are some "problem areas" that every web developer should watch for when building a site, so as to avoid nasty surprises when it's time to deploy to production.
|
||||
|
||||
**Asset sizes**: The web has gotten 'heavier', and thus slower, over the past few years. Some of this weight has to do with the use of images.
|
||||
|
||||
✅ Look through the [Internet Archive](https://httparchive.org/reports/page-weight) for a historical view of page weight and more.
|
||||
|
||||
A good practice is to ensure that your images are optimized, delivered at the right size and resolution for your users.
|
||||
|
||||
**DOM traversals**: The browser has to build its Document Object Model based on the code you write, so it's in the interest of good page performance to keep your tags minimal, only using and styling what the page needs. To this point, excess CSS associated with a page could be optimized; styles that need to be used only on one page don't need to be included in the main style sheet, for example.
|
||||
|
||||
**JavaScript**: Every JavaScript developer should watch for 'render-blocking' scripts that must be loaded before the rest of the DOM can be traversed and painted to the browser. Consider using `defer` with your inline scripts (as is done in the Terrarium module).
|
||||
|
||||
✅ Try some sites on a [Site Speed Test website](https://www.webpagetest.org/) to learn more about the common checks that are done to determine site performance.
|
||||
|
||||
Now that you have an idea on how the browser renders the assets you send to it, let's look at the last few things you need to do to complete your extension:
|
||||
|
||||
### Create a function to calculate color
|
||||
|
||||
Working in `/src/index.js`, add a function called `calculateColor()` after the series of `const` variables you set to gain access to the DOM:
|
||||
|
||||
```JavaScript
|
||||
function calculateColor(value) {
|
||||
let co2Scale = [0, 150, 600, 750, 800];
|
||||
let colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];
|
||||
|
||||
let closestNum = co2Scale.sort((a, b) => {
|
||||
return Math.abs(a - value) - Math.abs(b - value);
|
||||
})[0];
|
||||
console.log(value + ' is closest to ' + closestNum);
|
||||
let num = (element) => element > closestNum;
|
||||
let scaleIndex = co2Scale.findIndex(num);
|
||||
|
||||
let closestColor = colors[scaleIndex];
|
||||
console.log(scaleIndex, closestColor);
|
||||
|
||||
chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } });
|
||||
}
|
||||
```
|
||||
|
||||
What's going on here? You pass in a value (the carbon intensity) from the API call you completed in the last lesson, and then you calculate how close its value is to the index presented in colors array. Then you send that closest color value over to the chrome runtime.
|
||||
|
||||
The chrome.runtime has [an API](https://developer.chrome.com/extensions/runtime) that handles all kinds of background tasks, and your extension is leveraging that:
|
||||
|
||||
> "Use the chrome.runtime API to retrieve the background page, return details about the manifest, and listen for and respond to events in the app or extension lifecycle. You can also use this API to convert the relative path of URLs to fully-qualified URLs."
|
||||
|
||||
✅ If you're developing this browser extension for Edge, it might surprise you that you're using a chrome API. The newer Edge browser versions run on the Chromium browser engine, so you can leverage these tools.
|
||||
|
||||
> Note, if you want to profile a browser extension, launch the dev tools from within the extension itself, as it is its own separate browser instance.
|
||||
|
||||
### Set a default icon color
|
||||
|
||||
Now, in the `init()` function, set the icon to be generic green to start by again calling chrome's `updateIcon` action:
|
||||
|
||||
```JavaScript
|
||||
chrome.runtime.sendMessage({
|
||||
action: 'updateIcon',
|
||||
value: {
|
||||
color: 'green',
|
||||
},
|
||||
});
|
||||
```
|
||||
### Call the function, execute the call
|
||||
|
||||
Next, call that function you just created by adding it to the promise returned by the C02Signal API:
|
||||
|
||||
```JavaScript
|
||||
//let CO2...
|
||||
calculateColor(CO2);
|
||||
```
|
||||
|
||||
And finally, in `/dist/background.js`, add the listener for these background action calls:
|
||||
|
||||
```JavaScript
|
||||
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
|
||||
if (msg.action === 'updateIcon') {
|
||||
chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) });
|
||||
}
|
||||
});
|
||||
//borrowed from energy lollipop extension, nice feature!
|
||||
function drawIcon(value) {
|
||||
let canvas = document.createElement('canvas');
|
||||
let context = canvas.getContext('2d');
|
||||
|
||||
context.beginPath();
|
||||
context.fillStyle = value.color;
|
||||
context.arc(100, 100, 50, 0, 2 * Math.PI);
|
||||
context.fill();
|
||||
|
||||
return context.getImageData(50, 50, 100, 100);
|
||||
}
|
||||
```
|
||||
In this code, you are adding a listener for any messages coming to the backend task manager. If it's called 'updateIcon', then the next code is run, to draw an icon of the proper color using the Canvas API.
|
||||
|
||||
✅ You'll learn more about the Canvas API in the [Space Game lessons](../6-space-game/2-drawing-to-canvas/README.md/drawing-to-canvas/README.md).
|
||||
|
||||
Now, rebuild your extension (`npm run build`), refresh and launch your extension, and watch the color change. Is it a good time to run an errand or wash the dishes? Now you know!
|
||||
|
||||
Congratulations, you've built a useful browser extension and learned more about how the browser works and how to profile its performance.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Challenge
|
||||
|
||||
Investigate some open source web sites have been around a long time ago, and, based on their GitHub history, see if you can determine how they were optimized over the years for performance, if at all. What is the most common pain point?
|
||||
|
||||
## Post-Lecture Quiz
|
||||
|
||||
[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/28)
|
||||
|
||||
## Review & Self Study
|
||||
|
||||
Consider signing up for a [performance newsletter](https://perf.email/)
|
||||
|
||||
Investigate some of the ways that browsers gauge web performance by looking through the performance tabs in their web tools. Do you find any major differences?
|
||||
|
||||
## Assignment
|
||||
|
||||
[Analyze a site for performance](assignment.md)
|
||||
|
||||
Reference in New Issue
Block a user