Here's what we'll be building Chrome extensions are small HTML, CSS and JS apps that we can install in the chrome browser. In this tutorial, We are going to build an extension that allows users get the most up to date data on the Coronavirus by simply typing the name of a country without having to navigate to a website. Let's get started! 1. Create a new directory and navigate into that directory. I'm a sucker for the command line so you'll see me use a number of Linux/Mac CLI commands in this post. You should have no problems following along. covid-extension && covid-extension mkdir cd Let's setup our app to make use of npm packages by running init -y npm 2. We need to create some files. I like to use webpack when developing apps so I can get that hot reload feature. to get setup to use webpack. Check out my article on Webpack To get set up quickly, run ```npm i webpack && npm i webpack-cli``` Next, create a dist folder. Inside the dist folder, create an index.html file and a manifest.json file. Then, create a src folder and an index.js file within it. (You can use the command line for this). ```mkdir src && touch index.js``` Get your code to compile by running ```webpack``` from the CLI. Running the `webpack` command automatically generates a `main.js` file inside our **dist** folder. It'll contain code generated by **webpack** based on the code we write inside our **index.js** file. 3. Head into your manifest.json and add the following code. This is the file that contains information on how Chrome should handle our extension. { : , : , : , : [ ], : { : } } "manifest_version" 2 "name" "C19-Search!" "version" "0.1.0" "permissions" "<all_urls>" "browser_action" "default_popup" "index.html" , and are important and MUST be declared. Your extension must have a of to work with the latest chrome browsers.(what google says), you can give it whatever name/version you wish. We're using semantic versioning here. manifest_version name version manifest_version 2 We set permissions to so that our extension can run on any page. instructs chrome to show our file as a popup when the icon is clicked. all_urls browser action index.html 4. Next, let's load our chrome extension into chrome. In your chrome browser's address bar, head to chrome://extensions/ Towards the top left corner, click the button. Navigate to the folder where you have your files to upload that folder. If you're using Webpack, upload the folder. Load unpacked dist Our extension should now be uploaded. See below. 5. Head to your index.html. Hook up your `main.js` JavaScript file to your HTML. Also create and hook up a file. styles.css Next, we create a simple form. Your file should look like below(your will be index.js if you aren't using Webpack). We will have a very basic UI. script src Our UI would not look like below. Nothing pretty, but it works. 5. Just before we start writing our script, we need to install . You should have an npm directory initialized already from step 1. Run axios npm axios --save i to install axios. Let's head into our file and get cracking. We'd be using an open source API. index.js We have an asynchronous function called and within that function, we can use . allows us to stop executing code that is dependent on a response from a server, while we wait for the response from a server. By using the keyword in front of a piece of code, we can get the rest of our code to stop executing while that piece of code executes. searchForCountry async-await Async await await In this example, we a response from our GET request before setting that response to our cases, recovered and deaths variable. await All of this happens within our block. Our block executes our GET request and if there’s an error, it is “caught” and handled inside the block. try — catch try catch Once you're done with your file and have it saved, head back to the and hit the reload button on the extension you have uploaded. index.js chrome://extensions/ Click the extension icon and watch it work! And that's it! You've a chrome extension. Here's a to my github repo for the source code. link
