How to Build and Publish a Chrome Extension for Your Blog?

Today I have built and published Chrome Extension and Chrome App for TechTricksWorld on Chrome Web Store. So, if you are a regular reader of my blog, you should get its extension for your Chrome browser to get the regular updates in just one click.

I never built such apps, but when I got any idea from a friend that I should create an extension for the blog, I thought to create it. And, I loved the guide by Mr. Amit Agarwal for building Chrome app and extension on his blog labnol.org. I followed that and easily created the app and extension.

After successfully creating and publishing them, I thought to share with my readers too, and that’s why I am here explain the way to build and publish a chrome extension for your blog on Chrome Web Store.

This blog post is inspired by Labnol.org’s blog post about writing a Chrome app for your website in 5 minutes.

Google Chrome is the most used web browser all over the world. Thus, you must not leave any chance for branding your blog through it. When you look at the Chrome App and Extension, they look very professional, and you will be thinking it may take a lot of time and money to create them. But, let me tell you that it won’t take more than 5-15 minutes to create and publish them on Web Store.

How to Build a Chrome App for your blog?

Don’t stress! It’s extremely easy.

First of all download chrome_app.zip on your computer system. Now, extract it. You will see two files in it as shown in the screenshot below:

All you need to do is to replace the icon.png with your blog’s icon and that should be of 128 x 128 pixels in size. After this, open manifest.jason file.

Before I tell you what you need to edit in this file, I would like to tell you that this manifest.jason is a file that you will find in almost every Chrome extension or app. It defines the name, description, version, type, and other details of the app or extension.

Okay, back to the editing. Open manifest.jason in a text editor such as Notepad.

Just check the marked ones which are Name, Description, URLs, and web_url. Update these all with your blog’s details. In the name section, write your blog name, write your blog’s description in the description, and update the URLs in the both URL fields.

You can see, icon.png there too which refer to the icon you have in the folder already.

Once updated, save the file and close.

That’s it!

Now, the only thing you need to do is to put these files into a zip file and upload on the Web store.

I will tell you how to upload and publish this on Chrome Web Store later in the article. Let’s first talk about building a Chrome extension of your blog.

As I displayed in the first screenshot, Chrome app and Chrome extension are two different things. What we have discussed above is used to create a Chrome App. Now, we will talk about building an extension.

How to Build a Chrome Extension for Your Blog?

Again, I would say, don’t stress as it is very easy too. However, you need to do a little more work to create an extension.

First of all, download chrome_extension.zip on your computer system, and extract it. You will see 5 files as shown in the screenshot below:

You will again have to replace the icon with yours’ with 128 x128 pixels dimension. Now, let me describe you what changes you need to make in other 4 files.

First of all, replace the names of the files. Don’t change the extension, though. Just replaces “techtricksworld” with “Your blog name”. However, this is optional. If you don’t want to change file names, there is no problem. Still, I would suggest you to replace them with your blog name.

Let’s rename it as yourblogname.html, yourblogname.css, and yourblogname.js

Manifest.jason

Open the file in notepad.

Change all the marked sections in the file just as we did while editing the file for creating the Chrome app.
Don’t forget to change the techtricksworld.html in default_popup section as well because remember that I have suggested you above to change the name of all the files you find in the folder. So, just edit the name of the file with what you have set. It will be yourblogname.html.

That’s it in the manifest.jason file. Save and close the file.

CSS file [techtricksworld.css]

You don’t need to edit the CSS if you don’t want to change the look. If you know how to edit CSS, then you can do a little bit of editing to make the look and feel even better.

While editing the file that I downloaded from Labnol, I just changed the font color by changing the color code in CSS. However, you can modify this CSS as per your requirement.

HTML File [techtricksworld.html]

Open it in Notepad.

Look at the marked ones above, and make changes. Where you see techtricksworld.css, you need just to change the name of the CSS file with what you have changed which will be yourblogname.css. Do same with techtricksworld.js, and replace it with yourblogname.js

In the 3^rd, place your blog link, and in the 4^th, again place your blog link, and also place the link to your blog’s logo.

Save and close the file.

JS file [techtricksworld.js]

Now, look at the JS file, and open it in Notepad.

Just replace the Techtricksworld’s feed address and put your blog’s feed. Save the file, and close it.

That’s it. The extension is ready.

How to Publish Chrome App or Extension on Chrome Web Store?

Let me tell you that the process of publishing Chrome App or Extension is same. There is no difference while uploading and publishing them. Below is how you can upload any of them?

Open Chrome Web Store, and you will see this.

Now since you have your extension files on your computer system, you have to zip them and upload using Choose File option.

Once you upload the file, you will be directed to a page where you have to enter the name, description, icon, screenshots, Promotional tile images, Website, Category, Regions, Pricing, and other details. You can fill them all, and click on Preview Changes to see how your extension page looks like. Once you are satisfied, you can click on Publish Changes.

The screen is long, so I am not putting up the screenshot of the whole page here. You just fill the details as required. And click on Publish Changes if you are sure your extension’s preview is good and final.

If this is your first time publishing any extension on Chrome Web Store, you will need to pay $5 as registration fee which Google asks to avoid fraudulent.

So, once you click on Publish Changes, you will be asked to pay. Make the payment. And Your Extension will be live.

Now, you can click on your extension or app from the dashboard to get their exact links.

If for some reasons you want to take down your app or extension, you can just click on Unpublish. You can also click on Edit to make edits in the details, and even you can update the next version of the extension when you have any.

That’s it!

Final Words

You can see, how easy is to build and publish a Chrome App or Extension on Chrome Web Store. It’s simple and affordable. Just one-time cost of 5 USD, and you can upload 20 apps/extensions in your account.

I don’t find a reason for not getting a chrome extension for your blog. Just follow the process and build one for your blog too.

Let me know if you have any problem understanding the whole process.