Make Money Online Queries? Struggling To Get Traffic To Your Blog? Sign Up On (HBB) Forum Now!
HOW TO: Create Your Own Google Chrome Extension
- Updated On 01/01/2016
- Author : A.k.A
- Topic : Chrome
- Short URL : https://hellboundbloggers.com/?p=25438
CONNECT WITH HBB ON SOCIAL MEDIA
Since the launch of Google Chrome, it’s been chaos in and around the web. Why Chrome is so popular? It’s simplicity and easy to use and users experience is so easy and no wonder to mention, millions of extensions. So, do you want to create one for your blog for free? Well as a developer its not available. But if can show case it to your friends and publicize about the same. To publish your chrome extension you will need a developer license which will cost $5 per extension. But always you can promote it for free with the help of Dropbox. Only thing is it won’t be published.
So lets get started: In this tutorial I will teach you the most easiest way to create Google Chrome Extension using JSON script.
Step1: Make a folder with you blog name as the folder name in Documents directory or any other suitable location. In this tutorial I’ll teach you how I created for my blog, you will need to make suitable changes as per your blog.
Step2: Open Notepad, save as “manifest.json” and type the following code in it,
{
“name”: “SmartFatBlogger”,
“version”: “1.0”,
“description”: “Smart Fat Blogger is now on Chrome where you can access the dynamic ability of our full site!”,“browser_action”:
{
“default_icon”: “icon.png”,
“popup”:”popup.html”
},“permissions”: [ “http://www.smartfatblogger.in/” ]
}
Step3: Create another file using Notepad or Dreamweaver as “popup.html” This is file that will go into extension and act as the service that you want to provide for the user.
Step4a: Customize your popup.html, Here in this HTML I’ve posted some links so as to make this tutorial easy, this is what I created using Dreamweaver.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Dynamic Smart Fat Blogger</title>
<script type=”text/javascript” src=”http://ajax.googleapis.com/
ajax/libs/jquery/1.5/jquery.min.js”></script>
<script type=”application/javascript”>
$(“div.contentToChange p.firstparagraph:hidden”).slideDown(“slow”);
$(“div.contentToChange p.firstparagraph:visible”).slideUp(“slow”);
</script>
<style type=”text/css”>
<!–
.style1 {
font-family: Georgia, “Times New Roman”, Times, serif;
font-style: italic;
font-size: 9px;
color: #666666;
}
–>
</style>
</head><body>
<div>
<p><a href=”http://www.smartfatblogger.in/” target=”_blank”><img src=”sfb.png” alt=”flipcard” width=”250″ height=”65″ /></a></p>
<p><a href=”http://www.smartfatblogger.in/view/flipcard” target=”_blank”><img src=”flipcard.png” alt=”flipcard” width=”108″ height=”38″ /></a></p>
<p><a href=”http://www.smartfatblogger.in/view/mosaic” target=”_blank”><img src=”mosaic.png” alt=”mosaic” width=”108″ height=”38″ /></a></p>
<p><a href=”http://www.smartfatblogger.in/view/sidebar” target=”_blank”><img src=”sidebar.png” alt=”sidebar” width=”108″ height=”38″ /></a></p>
<p><a href=”http://www.smartfatblogger.in/view/snapshot” target=”_blank”><img src=”snapshot.png” alt=”snapshot” width=”108″ height=”38″ /></a></p>
<p><a href=”http://www.smartfatblogger.in/view/timeslide” target=”_blank”><img src=”timeslide.png” alt=”timeslide” width=”108″ height=”38″ /></a></p>
<div align=”left”><span>Developed by SurajKV</span></div>
</div>
</body>
</html>
You can create anything custom, depending on your choice, this HTML file basically represents what you want to do the most as a extension, you can also add RSS feed URL or Subscription box.
Step4b: Have a icon.png file also in that folder for your icon on chrome for display.
Step5: Open Chrome, click “Customize and Control Google Chrome” Option (spanner symbol)> Tools>Extensions.
Step6: Click Load Unpacked Version, Choose the location of the folder that we created initially. You may observe that the extension is loaded. And a small icon to right of address bar you can see your extension.
Click that and Voila! You just created your first Google Chrome Extension for your blog. You can also simply publish, this on Chrome Web store as a developer, follow here! The publish will cost you $5.
From The Author : The quotes used in the code is different from the quotes you use by your keyboard. If this is not working I kindly recommend you to replace all the quotes with your keyboard quotes key.
Did you enjoy this article?
This article is written by Suraj KV. He writes about hot deals and coupon site that offers coupons and discounts for technology and other products including Havahart Wireless fence and Oakley Designs.
By A.k.A
Want to discuss your queries and interact with experts? You can connect with HellBound Bloggers (HBB) Facebook group for free!
Join HellBound Bloggers (HBB) and get Instant Updates. We'll also notify you with Great Deals, Discounts and other Interesting Tips. We won't SPAM or SHARE your Email Address with anyone.
Other Interesting Articles From Chrome
YOU CAN ALSO SEARCH FOR YOUR DESIRED TOPICS:
Thank you for reading! We welcome and appreciate your comments, but at the same time, make sure you are adding something valuable to this article. If you have any serious queries, suggestions or anything related to this article, feel free to share them, we really appreciate that.
But, if your blog comments are a random "Thank you", "Useful Post", or anything that doesn't actually upscale the article, then we'll be removing them and it won't be appeared below. Thanks for understanding and thanks for connecting with us. If you want to give us any feedback or report any errors, you can kindly contact us and we'll revert back soon.
- Comments
- Facebook Comments
-
Comments
Leave a Reply
16 Comments
Facebook Comments
Luis
The error is the version of the extention put this in the second line
“manifest_version”: 2,
simon
I found I couldnt cut and paste from a json file i found on the web; had to retype. you need to have a line with “manifest_version”: 2, to get it to work
Habot
I’m making a theme and well, it says “Manifest is not valid JSON. Line: 29, column: 6, Syntax error.” Help?
Francisco
Thanks for this good example. I’ve thinking about creating one for the blogs I manage but did not know I had to pay a license.
Till
I made sure to use the " from my keyboard and now I am getting a syntax error in line 4, column 2
Suraj @Seekably
Tell me which statement: please reply with your statement in line4
Till
There is not much else, it says "Manifest is not valid JSON. Line: 4, column: 2, Syntax error". Thanks for your help!
navigaweb
Thank you for this code, i was looking for publish it in the Chrome Store and now i will have my extension.. i hope…
Pulkit Kaushik | TheDolt
@Everyone Don't copy paste the code as you would normally do. It won't work that way.
Lorenz
Hi, thanks for the tutorial, it really helps…;)
Ifham khan
Same problem wid me dude 🙁
Sandeep Singh
Looks to be something interesting ! Shall give a try soon !
Sandeep
Its not working properly man, it says that the Line 2 column 1 of the manifest.json should be quoted or else it is invalid. I tried making all necessary things but still no results yet.
S.Pradeep Kumar
A screenshot would be great mate. Normally these errors occur if " (quotes) and , (commas) not used properly. You can mail me the code, I'll check it. 🙂
Sandeep
I just copy-pasted the whole thing explained here and ultimately came out with what I mentioned before. if you have tried it out I would request you send me the folder with the files in in via email. I would understand it better then. Hope won't be a problem for u. 🙂
Suraj KV
Please don't copy paste the code. It doesn't work….The quotes used in the code is different from quotes you use by your keyboard. If you copy paste the code, then I recommend you replace all the quotes with your keyboard quotes key.
The procedure works!