How To Create Chrome Extension for your Blog in 2 minutes that shows recent posts.

How To Create Chrome Extension for your Blog in 2 minutes that shows recent posts.

Do you have a blog and you regularly write posts and still your blog still suck reaching enough audience. There are several things that you can do improve your blogs net worth, one such thing is create a dedicated chrome extension exclusively for your blog posts. It just take 30 minutes to entirely create a dedicated chrome plugin for your blog and to go live with the code included here.

Advantages of having chrome extension for your blog

• It’s considered to be search ranking signal, although Google doesn’t openly admit that it is a search ranking signal, I, from my personal experience could say it could make a huge difference on your blog’s /websites traffic
• It allow traffic from chrome web store to you blog.
• It establishes your brand name to wide range of audience through chrome webstore.
• People trust a website which have dedicated chrome extension or android app & they could take your words seriously.
• If more number of people install your blog/websites extension, Google consider that your blog is worth showing to people.
• You’ll receive traffic from your extension itself.
• If your website/blog involves selling of products/services then it may increase sales behind the scenes.

How chrome extension works for your blog?

1. Almost all blogs have a feed URL with rss that has most recent 10 posts you published with description and link that updates automatically.
   

   This blogs RSS feed URL http://feeds.feedburner.com/Phpcable

2. We use your RSS feed URL to read the recent posts and display in chrome extension public menu.

This is how it looks on chrome extension menu. On clicking the icon chrome opens extension menu with list of recent posts of your blog

How to create chrome extension for your blog in 2 minutes?

Step 1 – Download the zip file included in this

Get the customized Chrome Extension for your Blog to show latest posts

DOWNLOAD FREE

DEMO

Step 2 – Open manifest.json change name and description

{
 "manifest_version" : 2,
 "name": "PhpCable Web Developers",
 "description" : "An extension that shows the recent posts published on phpcable.com",
 "version" : "1.0",
 
 "browser_action" : {
  "default_icon" : "icon128.png",
  "default_popup" : "popup.html"
  
 }
}

Important Step 3 – Open Popup.js, goto line 5, change URL to your blogs feed URL. 

// JavaScript Document
jQuery(document).ready(function($) {

    //Change it to your blog feed URL here - Create and send request to get feed via google feed api 
    url = 'http://feeds.feedburner.com/Phpcable';
    url = 'http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q=' + encodeURIComponent(url);
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            var result = xhr.responseText;
            var result = jQuery.parseJSON(result);
            for (var i = 0; i < result.responseData.feed.entries.length; i++) {
                var entry = result.responseData.feed.entries[i];
                $('<div/>', {
                    'id': i,
                    'class': 'passenger popup-btn',
                    'style': 'cursor:pointer;',
                    'html': '<div class="entry" style="float:left;"> <div style="width: 315px;" class="name">' + entry.title + '</div><div class="fromto" style="width: 315px;"> <span class="from">Published on: </span><span class="traveldate">' + entry.publishedDate + '</span></div> </div> <div style="float:right; margin-top:20px;"> <a class="button-green copy" data-url=' + entry.link + ' href="javascript:;">Read Now</a></div> <div style="clear:both;"></div>',
                }).prependTo('#initdata');
            }
        }
    };
    xhr.send();


    $(document).on('click', '#acpdesign .copy', function() {
        $('#acpdesign .copy').text('Read Now').css("font-weight", "normal");
        $(this).text('Read').css("font-weight", "bold");
        var key = $(this).attr('data-key');
        var copiedUrl = $(this).attr('data-url');


        chrome.tabs.query({
            active: true,
            currentWindow: true
        }, function(arrayOfTabs) {
            var activeTabUrl = arrayOfTabs[0].url;
            if (activeTabUrl != copiedUrl) {
                chrome.tabs.update({
                    'url': copiedUrl
                });
            }
        });
    });
});

Step 4 – Change Icon files if required (Optional)

Step 5 – Play around the HTML & CSS to match your blog’s look and feel

Step 6. Zip the package again and upload to chrome webstore.

Let your blog get improve in net worth, gain the trust of one time visitors, let people take your words seriously, let Google consider your blog is worth showing to people, let your traffic increase tremendously – All this in 30 minutes of time assured.

Kennedy Sakala
www.phpcable.com
Whatsapp +260976196939