How To

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.

create chrome app and extension 1

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:

create chrome app and extension 2

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.

create chrome app and extension 3

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:

create chrome app and extension 4

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.

create chrome app and extension 5

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.

create chrome app and extension 6

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.

create chrome app and extension 7

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 3rd, place your blog link, and in the 4th, 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.

create chrome app and extension 8

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.

Uploading chrome extension to web store

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.

image10

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.

image11

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.

image12

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.


Short URL: http://ttw.tips/2bsuk4g

About the author

Atish Ranjan

Atish Ranjan is an established and independent voice dedicated to providing you unique, well researched and original information from the field of technology, SEO, social media, and blogging.

34 Comments

Click here to post a comment

All the data shown above will be stored by Techtricksworld.com on https://www.techtricksworld.com. At any point of time, you can contact us and select the data you wish to anonymise or delete so it cannot be linked to your email address any longer. When your data is anonymised or deleted, you will receive an email confirmation. We also use cookies and/or similar technologies to analyse customer behaviour, administer the website, track users' movements, and to collect information about users. This is done in order to personalise and enhance your experience with us.

    • Hello Raman,

      I guess we had the discussion on Facebook, right? And, you have already solved the issue I think 🙂 Keep up the good work.

  • Thanks atish bro.. I would surely try making one. I recently made Android app for my Blog and i think chrome extension for my blog would be great 🙂

  • Hi Atish,

    It would be really great to have a chrome extension for a blog. I was just wondering if this extension gives out a notification if a new post is published or one has to manually click on the extension to see the latest posts?

  • Hey Atish,

    You made the tutorial so detailed and easy to understand. I have not yet thought of making an extension though. However, this guide will help many who want to publish one for their blog. A very useful share on building a chrome extension.

    • Hello Manidipa,

      Thanks for reading the post, and your comment. Making an extension for blog is surely a good thing for branding.

  • Hi Atish,

    From long time I am looking for this tutorial to create a chrome extension for my blog but I never searched about this information on Google, this really excellent informative guide to go about step by step.

    I think creating an extension even gives us a dofollow link to our blog, I am not sure about it but I read it somewhere.

    Thanks for sharing the information which is very useful to so many bloggers like me, see you soon with another article.

    • Oh great that you finally found it, Siddaiah.

      You are correct that we get backlinks from Google as well.

  • This weekend I decided to start a little Chrome extension as a pet project and this article was a huge help for me. Thanks a ton!

  • Hi Atish ,

    Thats new for every one whoever wanna try own Chrome extension for own blog. I have not tried this yet due to time. But I Will try building own extension for my blog next week.

  • It’s a great extension and so useful.I noticed your point that post on your article.This extension is a really helpful for blog platforms.
    Thanks.

  • Hi Atish, Thank You Very Much Atish, Basically, I want to find How to Make Chrome Extension, but I never visit on your blog, after few days I visit your blog and found this post. Really I like it and helpful post. Can You Tell Me Now? If I will make a Chrome Extension and I will include my site link. This link is beneficial for SEO or Not? Please Tell me?

    • Hello Asif,

      Of course, if you get a backlink from Google, that will be beneficial for your site’s SEO>

  • Wow bro, I was thinking like we must have coding skills to create a chrome extension and app. But it’s very simple as we need to make some tweaks in the existing files. I would surely try it. Bro, what if we want to add more functionality? At that instance, Do we need of coding skills?

    Nikhil
    (myquickidea)

    • Hello Nikhil,

      Yes this is easy. About adding more features, I would say that I am not a programmer however you can edit into the HTML, CSS, and .JS files to add more codes. If you can get readymade code then you can just place it in the correct file, and that will work. But, if you don’t have readymade code for a particular function then you will have to code yourself, and then you might need a little bit of coding skills.

  • Hey Atish,

    Building a chrome extension seems to be a great idea. Though most of the people don’t even think about it. But still, you have described it in a clear way.

    I am sure people would love to do that. The cost isn’t that much high. It may help newbies who want to enable a chrome extension of their business.

    Great post indeed.
    Have a nice day.
    ~Ravi

  • Hi Atish,

    Wow…As you know, I have zero technical skills. But reading this is so impressive. For a person like me who doesn’t even know html or coding, I could still follow along this post and get some idea of how to do it. That’s saying a lot because you have showing a step by step way to build it.

    Now, if I wanted one, I would just hire you 🙂

    You amaze me!

    -Donna

    • Hello Donna,

      That’s great to know that you find my guides so easy to understand. If you want to create one, do let me know. I would love to help.

      Have a productive week ahead.

  • Hi, Atish
    I would say fabulous post and help me out for publishing as well as to build chrome extension for my personal blog.
    Thanks for sharing the necessary post.

  • Wow, I never knew building chrome extensions is so uncomplicated, before this article, I supposed we need to be a developer and go through some hard coding to build an extension for chrome. But this article proved how light it is.

    Thanks for sharing.

    • Hello Priyam,

      Complications depend on the extension you are creating. This is just a simple extension that calls the feed of a blog, and that is why it is quite easier. But, when you create complex extensions, you must be prepared for more complications.

      Thanks sharing your views though.

    • HTML and CSS is just to structure and styling the extension. The main code is written into Javascript.

  • Google Chrome is my favourite browser and I always use lots of extensions which help me to do the various task in very short time but I am not aware of how to build an extension and how to publish it, and you share all details. I am also tech blogger and link the way you writing.

Pin It on Pinterest