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”: “LinkToHow”, “version”: “1.0″, “description”: “LinkToHow is a Website which have ability to give all answer about How Tos”, “browser_action”: { “default_icon”: “icon.png”, “popup”:”popup.html” }, “permissions”: [ "http://www.linktohow.blogspot.com/" ] }
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.linktohow.blogspot.com/” target=”_blank”><img src=”sfb.png” alt=”flipcard” width=”250″ height=”65″ /></a></p><p><a href=”http://www.linktohow.blogspot.com/view/flipcard” target=”_blank”><img src=”flipcard.png” alt=”flipcard” width=”108″ height=”38″ /></a></p><p><a href=”http://www.linktohow.blogspot.com/view/mosaic” target=”_blank”><img src=”mosaic.png” alt=”mosaic” width=”108″ height=”38″ /></a></p><p><a href=”http://www.linktohow.blogspot.com/view/sidebar” target=”_blank”><img src=”sidebar.png” alt=”sidebar” width=”108″ height=”38″ /></a></p><p><a href=”http://www.linktohow.blogspot.com/view/snapshot” target=”_blank”><img src=”snapshot.png” alt=”snapshot” width=”108″ height=”38″ /></a></p><p><a href=”http://www.linktohow.blogspot.com/view/timeslide” target=”_blank”><img src=”timeslide.png” alt=”timeslide” width=”108″ height=”38″ /></a></p><div align=”left”><span>Developed by LinkToHow</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.
Or Go To Directly chrome://extensions/
Step6:
Click Load Unpacked Version, Choose the location of the folder that we created initially. You may observe that the extension is loaded.
No comments:
Post a Comment