Plugin

Chrome Crawler, HaXe, Three.js, WebGL and 2D Sprites

Had a little free time this weekend so thought I would scratch an itch that has been bugging me for a while.

I started the second version of my Chrome Crawler extension a little while back. I have been using the language HaXe to develop it in. It’s a great language and I wanted to explore its JS target a little more so I thought, why not make a chrome extension using it. I have had several emails from various people requesting features for Chrome Crawler so I thought I would extend the extension and rewrite it in HaXe at the same time.

I managed to get the basics of the crawler working a few months back but through lack of time got no further. The second thing I wanted to work on after the basic crawling code was how to represent the crawled data. The current method is simply as a list:

 

A while back however I recieved a mail from “” who sent me a link to a video he had made using Chrome Crawler and Gephi:

 

 

As you can see its pretty cool, visually graphed out as a big node tree.

So it got me thinking, can I replicate this directly in Chrome Crawler? To do this I would need to be able to render thousands of nodes and hopefully have them all moving about in a spring like manner determined by the relationships of the crawled pages.

The first thing I tried was using the HaXe version of the Raphael library. The library is designed for graphing and uses the Canvas with SVG for rendering, so I thought it would be perfect for replicating Gephi. I tested it however and only managed about 300 circles moving and updating at 25FPS:

 

300 nodes just wasnt going to cut it, I needed more.

Enter the recent HaXe externs for Three.js and its WebGL renderer. Three.js is rapidly becoming the defacto 3D engine for Javascript and takes alot of the headaches away from setting up and rendering to WebGL.

After a little jiggery pokery with the still very new externs I managed to get something running:

Thats 2000 sprites running at 25fps which is less that I would have hoped for WebGL but still probably enough for ChromeCrawler. Im not too sure why the sprites are upside-down, nothing I can do seems to right them, perhaps someone can suggest the solution?

If you have a compatible browser you can check it out here. I have also uploaded the source to its own project if you are interested.

The next step is to take the data from the crawl and then render it as a node graph, exiting stuff!

Post To Tumblr Version 0.3

Just made a quick little update to my chrome extension “Post To Tumblr”.

In this update I finally worked out how to catch bad username or password returns from the Tumbr API. Basically it just involved me using the ajax rather than the post jQuery function and using “async:false” like so:

$.ajax({
		  url: 'http://www.tumblr.com/api/write',
		  type: 'POST',
		  data:o,
		  async: false,
		  complete: function(transport)
		  {
				if(transport.status == 200 || transport.status == 201)
				{
					 postingNote.cancel();
					 var postedNote = webkitNotifications.createNotification('images/icon48.png', "Image Posted!", info.srcUrl);
					 setTimeout(function() { postedNote.cancel(); }, 5000);
					 postedNote.show();
				}
				else if(transport.status == 403)
				{
					postingNote.cancel();
					var errorNote = webkitNotifications.createNotification('images/icon48.png', "Posting Error!", "Bad email or password");
					setTimeout(function() { errorNote.cancel(); }, 5000);
					errorNote.show();
				}
 
			}
		 });

In addition I have added some notifications to indicate when the extension is doing something.

I have made a little demo video below to show this off:

Chrome should auto update for you. If you dont have the extension yet head over to the extension gallery to grab it now!

My First Chrome Extension – “Post To Tumblr”

Mummy wow! Im a big boy now! I have just published my first Chrome extension.

It was really annoying me that when I found a funny cat or some other silly image I would have to go through a whole ball-ache process to get that image on my Tumblr account.

What I really wanted was some right-click-post action going on and wondered why no one had one it yet. So with an hour or so to spare I whipped this extension up really quick.

It uses the Chrome 6 Context Menu API so you obviously need to have Chrome 6 to be able to use it.

Currently it only posts images as that’s all I needed for now but if enough people want more then ill whip out the other data types.

The source couldn’t be any simpler really, infact this is it here:

  1. chrome.contextMenus.create({"title": "Post Image To Tumblr", "contexts":["image"], "onclick": postImage});
  2.  
  3. function postImage(info, tab)
  4. {
  5. 	var email = localStorage["tumblr_email"];
  6. 	var password = localStorage["tumblr_pass"];
  7.  
  8. 	if(!email || email=="" || !password || password=="")
  9. 	{
  10. 		alert("Need to set your Tumblr username and password in the options before posting!");
  11. 	}
  12. 	else
  13. 	{
  14. 		var o =
  15. 		{
  16. 			"email":email,
  17. 			"password":password,
  18. 			"type":"photo",
  19. 			"source":info.srcUrl
  20. 		};
  21.  
  22. 		var success = function(data,textStatus,request)
  23. 		{
  24. 			if(textStatus=="success"){ alert("Image posted to Tumblr. Image -> "+info.srcUrl); }
  25. 			else { alert("Bad email or password"); }
  26. 		}
  27.  
  28. 		$.post("http://www.tumblr.com/api/write",o, success);
  29. 	}
  30. }

Simples!

Theres even an option page where you put in your Tumblr details:

Oh, there is one issue.

No matter what I tried I couldn’t manage to get the Tumblr API to return an error. So if you enter your username or password incorrectly it still reports success, not entirely sure why, if someone knows I would love to hear why!

Interested? You can go grab it over on the chrome extensions gallery page -> HERE

1 2  Scroll to top