Share Coding

Tutorials, Problems, Stuffs …

How to Build a Photobucket Album Viewer Extension of Chrome

To start building the viewer (View all Photos by one click), we should learn how to build a simple extension first.
A tutorial has already made by Google: http://code.google.com/chrome/extensions/getstarted.html
As you can see, the viewer extension’s layout is similar to the tutorial of Google.
Chrome Extension Tutorial by Google

 
Our Tutorial Start:


1. From the beginning, you should do exactly the Google Tutorial and build your own extension first.
After that, we can modify the example extension to be our Photobucket Viewer.

 
2. Since the viewer needs to get the information of current browsing tab (URL) to verify if it is surfing the Photobuck album, we need to add Permission “tabs” and Photobucket’s URL to manifest.json, and also remove the link of “flickr” because we are not using its service. After all, the manifest.json should look like this:

{
	"name": "Photobucket Album Viewer",
	"version": "1.0",
	"description": "An Album Viewer of Photobucket",
	"browser_action": {
		"default_icon": "icon.png",
		"popup": "popup.html"
	},
	"permissions": [
		"tabs",
		"http://*.photobucket.com/*"
	]
}

 
3. Next, edit the popup.html for the function of viewing all the pictures. On the example of Google, the layout of showing pictures is not bad, so we are going to keep the layout what it presents (CSS) and delete all the Javascript for our customize.

<style>
body {
	min-width:357px;
	overflow-x:hidden;
}

img {
	margin:5px;
	border:2px solid black;
	vertical-align:middle;
	width:75px;
	height:75px;
}
</style>

 
4. After that, we need some libraries for helping us to make our development easier: jQuery and cross-domain-ajax

// Include these libraries to popup.html
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="https://raw.github.com/padolsey/jQuery-Plugins/master/cross-domain-ajax/jquery.xdomainajax.js"></script>

 
5. We need to get the Current Tab’s URL to verify if it is a Photobucket Album URL.

<script>
$(document).ready(function() { // Start jQuery
	// To get the current tab's URL
	chrome.tabs.getSelected(null, function(tab) {
		var pbURL = '' + tab.url;

		 
		// All codes go here.
		
		 
	});
});
</script>

 
6. After we get the URL and store at pbURL, we verify it if it is a valid URL and redirect it to view all pictures of album.

if( pbURL.indexOf("photobucket") != -1 && pbURL.indexOf("albums") != -1 ) {
	// It is a valid URL, redirect to view all pictures
	if(pbURL.indexOf("?start=all") == -1) pbURL += "?start=all";
	
	 
	// All codes go here

	 
} else {
	// URL is Invalid, show message.
	$("body").append('<center><b>This is not a Photobucket Album Page!</b></center>');
}

 
7. Once the URL is valid, we should start to load all the pictures. Before that, add a “Loading” message.

$("body").append('<span id="loading"><center><b>Loading...</b></center></span>');

 
8. All codes is similar with this Post I’ve written before but something has changed:
https://sharecoding.wordpress.com/2012/02/18/script-of-getting-all-the-pictures-url-of-photobuckets-album-in-jquery/

$("body").append('<div id="pbContainer"></div>');
$('#pbContainer').hide().load(pbURL);

var loading = setInterval(function() {
	if($("#pbContainer").html().length != 0) {

		clearInterval(loading);
		
		$("#loading").html(''); // Remove the "Loading" message

		$('#pbContainer #thumbContainer img').each(function(){
			var imgURL = $(this).attr("src") + "";
			if(imgURL.indexOf("th_") != -1) {
				var img = document.createElement("image"); // Create an image element
				img.src = imgURL.replace("th_", ""); // Set it's URL
				document.body.appendChild(img); // Post to body
			}
		});
		$("#pbContainer").html("");
	}
}, 2000);
Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: