• Skip to primary navigation
  • Skip to main content
  • Skip to footer
WittySparks Logo White

WittySparks

Ignite Your Thoughts

  • Topics
  • Reviews
  • Subscribe
WittySparks / Marketing / Quickly Create Google Chrome Extension to promote your Blog or Site

Quickly Create Google Chrome Extension to promote your Blog or Site

Marketing May 4, 2010 by Sravan Kumar Kandagatla

Before you get started with this tutorial, I would like you to take a look at our final WittySparks Google Chrome Extension.

Liked it? and want to create one for your site? Then let’s start creating the Google Chrome Extension to promote your own blog or site or portal or application etc.

Quickly Create Google Chrome Extension to promote your Blog or Site
Quickly Create Google Chrome Extension to promote your Blog or Site

Actually, I just came across some cool Chrome Extension of a popular news site where they feature their news items under various categories as tabs. I found it so cool that one can easily and quickly read top news under various categories without actually going to the website.

The next second I thought that why not create a Google Chrome Extension which shows our sites/blog updates with just a single click? So just started exploring how to create a chrome extension by using RSS Feeds.

Here I found a quick tutorial to get started with Google Chrome Extension, where I can easily build a widget kind of extension within no time.

First, we have to create a page that you want to preview once your extension is clicked from Chrome Toolbar. So thought let me start with a simple page that has got RSS Feeds displayed from our network of sites. Since I wanted to get started with a simple page, I built a tab-based RSS Feed Reader by using Google AJAX Feed API.

Here is the final output of the page which I want to display when our Google Chrome Extension is clicked.

Quickly Create Google Chrome Extension to promote your Blog or Site
Quickly Create Google Chrome Extension to promote your Blog or Site

After downloading the code provided – don’t forget to have your own Google API Key in place.

Once you are done with changing the code as per your requirements, try to have your own look and feel which matches your Blog or Web site color schemes, obviously with your own graphics, logo, etc.

Here are the four files which Google Chrome Extension needs:

  1. A manifest file
  2. One or more HTML files
  3. One or more JS files (Optional)
  4. Any other files your extension needs like CSS, Image files, etc.

Let’s create the manifest file now: The manifest file is called manifest.json, which is used to store the information about your extension.

This is the basic code in the manifest file:

{
"name": "WittySparks",
"version": "1.1",
"description": "WittySparks - networked blog updates",
"icons": { "128": "ws_logo.gif" },
"browser_action": {
"default_title": "WittySparks",
"default_icon": "ws_favicon.gif",
"popup": "wittysparks.html"
},
"permissions": [
"tabs",
"http://www.wittysparks.com/*"
]
}

I am not going to get into the details of the above code as I said quickly create Google Chrome Extension for your blog, let me do it quickly. Go through this page for more information about manifest.

Observe the “popup” in the above code which says wittysparks.html which is the actual page that is displayed when your extension is clicked – so just place your HTML file name in that place – the HTML which you have prepared for preview once the extension is clicked.

So now make sure you have manifest.json – wittysparks.html – Image Files – CSS Files – JS Files etc. all in one main folder. Once you are ready with all the files – let’s start packaging your extension.

Google chrome extensions are packaged assigned ZIP files with the file extension “crx” – for example, myextension.crx.

Let’s start creating the package:

  1. Go to the chrome Extensions management page by going to this URL in Google Chrome browser:    chrome://extensions
  2. Right side you will find the Developer Mode link – click that
  3. Then click on Pack extension
  4. Then choose your extension folder as Extension Root Directory

That’s it you are done – your extension and private key files will be created.

Once you are done with the above steps, just drag and drop that .crx file into your Google Chrome Browser or try installing your unpacked extension by clicking on the “Load unpacked extension…..” button in the developer mode section of the Google Chrome Extensions page to preview your extension.

Once you have successfully previewed your extension, just go to the Google Chrome Extensions page and click on the “Publish your extensions” link to upload your extension to the Google Chrome Extension Library.

Just follow their step-by-step process to submit your Google Chrome Extension to their repository. Then observe an increase in traffic and monitor how many have installed your extension :)

I hope you liked this? Then why not try to create your own extension with this built-in code, you can download the full code here which was created by our team at WittySparks, and enjoy tweaking it. And don’t forget to give us a credit if you have created an extension with our sample code provided, would love to check your extension.

Good Luck with your new Google Chrome Extension.

Appreciate your opinion on this topic on social media by tagging us @wittysparks
  • LinkedIn
  • Twitter
  • Like
  • Pinterest

Related Topics

  • Google Bookmarks adds Lists as a new experimental feature!
  • Is your site Google Friendly Connected?
  • Boost Your Conversion Rate: How 3D Design Prove Saviour

Our Favorite Tools

Semrush - SEO and Marketing Tools
Semrush - SEO and Marketing Tools
$119.95/mo
Try for FREE Our Review
Lasso - All-in-one Affiliate Marketing Plugin for WordPress
Lasso - All-in-one Affiliate Marketing Plugin for WordPress
$29/month
Start Free Trial Our Review
Grammarly - AI-powered writing assistant
Grammarly - AI-powered writing assistant
$12.00 / month
Try for FREE Our Review
Previous Post: « Simple jQuery Zebra Stripe Table with Row Hover and Highlight class
Next Post: Less space and more content the new trend in web sites »

Reader Interactions

Profile picture for Anonymous

About Sravan Kumar Kandagatla

Founder of WittySparks
WittySparks Staff

Sravan is a highly experienced web designer, user experience designer and developer. You can connect with him on Twitter or LinkedIn and initiate a chat.

View all posts by Sravan Kumar Kandagatla
  • LinkedIN
  • Twitter
  • Pinterest
  • Facebook
  • Instagram

Comments

  1. Profile picture for Marhgil of Batangas TodayMarhgil of Batangas Today says

    September 9, 2010 at 12:19 pm

    Thank you very much for this guide. I was able to create a Google Chrome extension for Batangas Today news site. Check it out on our sidebar!

  2. Profile picture for Jay / @tcmanilaJay / @tcmanila says

    May 2, 2011 at 1:02 pm

    I hope you can make a How-to tutorial about this on Firefox.

  3. Profile picture for ChickcrChickcr says

    September 28, 2011 at 3:03 am

    Have you thought about applying the badge text to notify when a new feed comes in?

Footer

Search

Exclusive Coupons

  • Moqups Review - Use coupon code “WITTYSPARKS" for 20% off or "PARTNERS50" for 50% discount on all plans.
  • Serpstat Review - Use coupon code "wittysparks_discount" for 30% off.
  • WPForms Review - Use coupon code "WITTYSPARKS" for 50% off.
  • WPPayForm Review - Use coupon code "wittysparks" for 10% to 40% off.

Affiliate Disclosure

If you make a purchase from WittySparks links, we will receive a small commission. See our Affiliate Disclosure.

Sponsors

Partnered with FreePik to use the licensed images.

turn to dhgate for smartphone

Follow Us

  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn
  • Instagram
  • YouTube
  • RSS

Copyright © 2022 · Hosting sponsored by Rocket.net (Affiliate link)

  • About Us
  • Contact Us
  • Privacy Policy
  • Affiliate Disclosure