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

Google

Initialized

How to Deploy Your Node.js Apps to AWS Elastic Beanstalk without EB CLI

Implement Dark Mode in Your React Apps Using SCSS [A Step By Step Guide]

Read My Stories

Website

Blog

Too Long; Didn't Read

Make resilience your competitive advantage

How to Build a Chrome Extension That Makes API calls

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

All the Firebase Functions you Need to Build Your Next Serverless Application

10 Useful Tips & Tricks That Will Help You Make the Most of Chrome Devtools

10 Must Have Chrome Extensions for a Web Developer

10 Chrome Extensions to Transform Your SEO Game

10 Best Search Tool Extensions In Chrome Web Store

All the Firebase Functions you Need to Build Your Next Serverless Application

10 Useful Tips & Tricks That Will Help You Make the Most of Chrome Devtools

10 Must Have Chrome Extensions for a Web Developer

10 Chrome Extensions to Transform Your SEO Game

10 Best Search Tool Extensions In Chrome Web Store

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps