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 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.
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.
Thanks atish for sharing your useful tips to create chrome extension.
Good to read the whole article. I think I should also share this article.
Great tutorial,
I have followed your guide and made this – http://chrome.google.com/webstore/detail/bankexamstoday/ffdcifpkcnafgejmnhifacidbobkecbl/related
But search is taking me to 405 error. Please it.
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.
Wonderful tutorial bro. I will try to create one extension for my blog soon.
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 🙂
Great Post. Will try these tutorial for sure. Thanks for sharing information! 🙂
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?
Hello Aquif,
Thanks for coming by. This is a very basic extension which pulls out the rss feed of your blog. It doesn’t have notification code in it. But, you can customize it by adding your own code for the same.
Yep, a few tweaks could surely make it really handy. Anyways, thanks for sharing this idea.
Great.
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.
Thanks for posting this detailed tutorial on how to build and publish a chrome extension.
Hey Atish,
Thank you For explaining steps in brief.
Finally learnt to make crome extension.
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.
Hi Aatish,
What a post you have crafted, really today I learned something new.
Thanks for the great share man.
And keep up the good work.
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.
Nice article.Today i had learn a new topic.but whether the code is written in html,css .
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.