DEV Community

Cover image for Make a Chrome Extention in 4 steps
c0bweb
c0bweb

Posted on

Make a Chrome Extention in 4 steps

In this article, I'll show you how to create the setup for a simple new tab Chrome Extention.

  • Make a new folder.

  • In this folder, we'll need to create a manifest.json file and an index.html file.

{
  "manifest_version": 2,
  "name": "Name of your extention",
  "version": "0.1.0",
  "chrome_url_overrides": {
    "newtab": "index.html"
  }
}
Enter fullscreen mode Exit fullscreen mode
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Name of your extention</title>
  </head>
  <body>
    <p>Hello world!</p>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode
  • Turn on 'Developer mode' by going to chrome://extensions/ in your Chrome browser and switch the developer mode on in the top right.
  • Click the 'Load unpacked' button on the left and select the newly created folder containing the files we just made.

Now when you open a new tab, you should see your Hello world page! 🎉

helloworld.png

Get creative and customize it until you're happy with how it works.

The next step would be uploading your Extention to the Chrome web store. I'll be making an article on how to do that soon, so be sure to give me a follow!

This is my first blog post ever. So if you have any tips or feedback let me know below.

Thanks for reading. :)

Header photo by Alvarado on Unsplash

Top comments (1)

Collapse
 
aeinyx profile image
Bablu Sinha

This was a very wonderful intro to web extention.Loved it!