How to Build/Publish your V3 chrome extension!✨
Tags: tutorial, javascript, productivity, webdev
Published: 2022-07-11 22:20:45

Have you ever wanted to create your chrome extension and publish it on the chrome web store?
In this article, we will walk through the process of building a demo extension, and for this to be achieved, we will separate this article into three main parts.

## 1. How to build your extension?

Let's start by creating an empty "Demo" folder.
![Screenshot of an empty folder created](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v1br8cmldp74vtslx388.JPG)

Then we will create three simple files (.html, .css, .js) and name them as you want. I will name them `popup.html`, `popup.css` and `popup.js`
![Naming all files to popup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qj0gzwck1ge291jno4o7.JPG)

Here is our HTML one.

```html
<meta charset="UTF-8" />
<link href="popup.css" rel="stylesheet" type="text/css" />
<script type="module" src="popup.js"></script>

<body>
  <h2 class="message">
    Congratulations 🥳, You have built your own chrome extension!
  </h2>

  <button class="btn" id="redirectButton">
    Press me, I'm working!
  </button>
</body>
```

And here is our CSS one.

```css
body {
  width: 500px;
  background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.message {
  text-align: center;
  margin: 20px 0;
}
.btn {
  font-size: 16px;
  font-weight: 200;
  letter-spacing: 1px;
  padding: 13px 50px 13px;
  outline: 0;
  cursor: pointer;
  position: relative;
  background-color: #000;
  margin-bottom: 40px;
  color: white;
}
```

And finally our JS one.

```js
document.querySelector('#redirectButton').addEventListener(
  'click',
  function () {
    window.open('https://www.linkedin.com/in/adhamniazy/')
  }
)
```

And guess what!. We finished the markup of our extension!!
As you can see that all the files that we have created are just HTML, CSS, and JS? So what makes the chrome extension different from any website?
The answer is: (`manifest.json`)

The `manifest.json` file is the only file that every extension using WebExtension APIs must contain.

Using `manifest.json`, you specify basic metadata about your extension, such as the name and version and aspects of your extension's functionality (such as background scripts, content scripts, and browser actions).

So Let's create our `manifest.json` file, and here is what we will write.

```json
{
  "manifest_version": 3,
  "name": "Adham Niazy",
  "version": "1.0.0",
  "description": "My First Chrome Extension",
  "permissions": [
    "storage",
    "tabs"
  ]
  "action": {
    "default_icon": "logo.png",
    "default_title": "My First Extension",
    "default_popup": "popup.html"
  }
}
```
(JUST FOR UNDERSTANDING) Let's discuss each **Key** in this file.

1. `manifest_version`: This key specifies the version of `manifest.json` used by this extension, we will use the latest version which is `3`.
2. `name`: Name of the extension. This is used to identify the extension in the browser's user interface.
3. `version`: Version of the extension, formatted as numbers and ASCII characters separated by dots.
4. `description`: Description of the extension. This is used to identify a detailed explanation of your extension
5. `permissions`: Use the permissions key to request special powers for your extension. This key is an array of strings, and each string is a request for permission. for our example we are giving the array two values: `storage` => which means that we inform google that our extension needs local storage, and `tabs` => this informs google that our extension needs permission to access Tabs Google API. for more details I highly recommend [Permissions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions)
6. `action`: An action is a button that your extension adds to the browser's toolbar. The button has an icon, and may optionally have a popup whose content is specified using HTML, CSS, and JavaScript. for example: `default_icon` specify the default icon that you want to be in the browser's toolbar, `default_title` specify a title that appear while hovering the extension button, `default_popup` specify the HTML file that you want to open when the user clicks your extension button. for more details I highly recommend [Action](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions)

(Those are just the basic ones I highly recommend you to reach [MDN - documentation](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json) to checkout other keys there are a tons of them.)

Offff!! That was a lot of explanation I know, but lets have a look on the bright side, After this `manifest.json` file NOW WE HAVE OUR EXTENSION!! 🙌🎯

---
## 2. How to run & test your extension on chrome?

Now we are missing something!, how to test it in the browser? Because all we have now is just those files.

![Screenshot of our state till now](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g8mmek97ax6w4tpc5hu1.JPG)

It's easier than you think. Let's open a new chrome window and do the following:
1. Go to the top right corner icon that has three vertical dots and click on it.
2. Select More tools option.
3. Select Extensions option.


![Extensions Manager Steps](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u0765xzn9b2h7lypr184.png)

In the Extensions page you will find a toggle button called `Developer Mode` Toggle it to ON

![Developer Mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ada5nk709ozu6ni91tt.JPG)

After that you will find three buttons appeared click on `Load unpacked` Button

![Load unpacked](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x1l00ipmy90y909335z8.png)

Then select the folder that we have created together.

![Selecting Your Extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t6ytajkykm5z9tb5uwaa.JPG)

After selecting your extension folder this will happen.


![Your extension have been loaded](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijaqm20veqzjlauvbxlr.png)

By clicking on the extension this will appear. Congrats!! You did it ✔️🎯
![Working extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v84lt7z3nhtx23hjn1tp.JPG)

------

## 3. How to Publish your extension?

We have built our extension. So what about publishing it?
(The following points are from Google Docs)

Before you can publish items on the Chrome Web Store, you must register as a CWS developer and pay a one-time registration fee 5 USD. You must provide a developer email when you create your developer account.

To register, just access the [Developer Console](https://chrome.google.com/webstore/devconsole). The first time you do this, the following registration screen will appear. First agree to the developer agreement and policies then pay the registration fee.


![Registration Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lghroub7p5v44lxq4eyu.JPG)

Once you pay the registration fee and agree to the terms, you will not see this registration page again.

After all, those steps go to your dashboard and click on `New Item` button

![How to upload extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m7dl2gdm0f5s53225lmn.JPG)

Then upload your extension to chrome as a `.zip` file then you will be directed to this form. Complete all mandatory fields then hit the `Submit for review` button.

![Extension publishing form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f67pl03fcdyhqjwlwrkj.JPG) 

After submitting your extension now your mission is done, just relax and let google review your extension then it will send you an email for the feedback. 💖

---

Finally, I'm excited that we reached this point together. I hope this article was helpful to you and didn't waste your time. You will find the code of this demo [Github Repo](https://github.com/Adham-Niazy/Chrome_Extension_Guide) 👀

And thanks for reading, waiting for you in the upcoming articles 👋