help me help you (OcUK Shopper Chrome Extension) :)

Soldato
Joined
1 Apr 2009
Posts
9,950
I've been asked several times already if I could convert the OcUK shopper extension for Chrome to other browsers. However, I don't know much about Firefox, IE, Opera plugins (or even Chrome for that matter). It took me two whole days to create that extension from scratch due to my complete noobness at programming those things.

So, I could use some help, if you guys know about these sort of extensions / plugin / script development. Good sites, tutorials, examples, publishing and distributing, or even if you are willing to take on the challenge yourself (I have the code for Chrome somewhere). That would help me a bit. I do have a job afterall and not much spare time :)
 
Last edited:
Well, this is weirdly timed. I took your Chrome extension and re-wrote it into a cross-browser version over the weekend which works in IE/FF/Chrome that I've tested so far. I need to do a few more tweaks before I release it but it's all done :o.

I set-up a Google Code site for it which I was planning on pushing the changes into if you want to collaborate with me on it?
 
I'll try and sort something out later when I'm back from work. I basically turned it into a bookmarklet (for easy cross-browserness) and re-wrote the code using jQuery - it mimics the output from your original extension.

I had credited you in the code by the way :D.
 
Last edited:
Could you send me a link as well?

I was working on something very similar about a year ago but didn't have the time to finish it and get it working. Mine was also a bookmarklet using jQuery but it scraped the details from the page and sent them to a server using json where it transformed them into an image using PHP's GD library. This was the sort of thing that was generated after running the bookmarklet:

ocukjs_bookmarklet.jpg
 
That's a pretty nice way of doing it. Sounds like a lot of work getting it to work (getting GD to line things up and things) :D.

Sent to your trust.

This is the worst closed-beta ever :p.
 
Right then... trying a simple bookmarklet. This is the code for the java script I used.

From what I understand, all you need is a internet shortcut somewhere (bookmark bar) with that code as the url. Not quite working yet :)

PHP:
javascript:(function()
            {
                var shoppingBasket = document.getElementById("shoppingBkt");

                if(shoppingBasket == null)
				{
					alert("shopping basket not found");
                    return;   
				}

                var tbdy = shoppingBasket.getElementsByTagName('tbody')[0];

                var rows = tbdy.getElementsByTagName('tr');
                
                var str = "[COLOR=\"Yellow\"][b]YOUR BASKET[/b][/COLOR]\n";
                
                var images = "";
                
                var thumbnails = 'yes';
                
                console.log('Your Basket');

                for (var i=1; i < rows.length - 4; i++) 
                {
	                var row = rows[i];
            	    
	                var cells = row.getElementsByTagName('td');
            		    
	                if (row.className == "basket_option")
	                {		    
	                    var inputs = row.getElementsByTagName('input');
            	        
	                    /* a complete system with no option price or count */
	                    if(inputs.length == 0)
	                    {
	                        var cell = cells[0];
            	            		            
	                        for (var j=0; j <  cell.childNodes.length; j ++)
	                        {	
                                var option = cell.childNodes[j];
                                
                                if(option.nodeName == "#text")
                                {
                                    var desc = "[COLOR=\"Wheat\"]" + option.data + "[/COLOR]\n";
    		                        console.log('    option desc: ' + desc);
                                    str += desc;
                                }
                            }
                        }
                        /* a fully configurable build. */
	                    else if(inputs.length == 1)
	                    {
		                    var desc = cells[0].childNodes[2].data;
	                        var qty = cells[1].childNodes[0].value;
	                        var price = cells[2].childNodes[0].innerText;
	                            		        
		                    console.log('    option desc: ' + desc);
		                    console.log('    option qty: ' + qty);
		                    console.log('    option price: ' + price);

	                        str += "[COLOR=\"Wheat\"]" + qty + " x " + desc + "[/COLOR]  [b][COLOR=\"Yellow\"]" + price + "[/COLOR][/b]\n"; 
                        }
	                }
	                else
	                {
	                    var image = cells[0].childNodes[0].src;
	                    var desc = cells[1].childNodes[0].textContent;
	                    var link = cells[1].childNodes[0].href;
	                    var qty = cells[2].childNodes[0].value;
	                    var price = cells[3].childNodes[0].innerText;
	                    var total = cells[4].childNodes[0].innerText;

		                console.log('image: ' + image);
		                console.log('desc: ' + desc);
		                console.log('link: ' + link);
		                console.log('qty: ' + qty);
		                console.log('price: ' + price);

	                    images += "[url=\"" + link + "\"]" + "[img]" + image + "[/img][/url] ";
            		    
	                    str += qty + " x " + "[url=\"" + link + "\"]" + desc + "[/url]  " + "[b][COLOR=\"Yellow\"]" + price + "[/COLOR][/b]";
            	        
	                    if(qty > 1)
	                    {
	                        str += " [b][COLOR=\"DarkOrange\"](" + total + ")[/COLOR][/b]";
	                    }
	                    str += "\n"; 
                    }
                }
               
                /* shipping costs */
                var shipping = rows[rows.length - 3];
                
                var shippingCells = shipping.getElementsByTagName('td');
                
                var shippingValue = shippingCells[2].textContent;
                
                /* grand total */
                var total = document.getElementById('orderTotal');
                
                var totalCells = total.getElementsByTagName('td');
                
                var totalValue = totalCells[2].textContent;

                console.log('Total: ' + totalValue + "(shipping " + shippingValue + ")");
                
                str +=  "[b]Total : [COLOR=\"Yellow\"]" + totalValue + "[/COLOR][/b] " + "(includes shipping : " + shippingValue + ").\n";
                
                /* thumbnails*/
                if(thumbnails == 'yes') str += "\n" + images + "\n\n";
        
        	    console.log(str);

				function copyIntoClipboardIE(text)
				{
					if (window.clipboardData && window.clipboardData.getData)
					{
						window.clipboardData.setData("Text", str);
					}
				};
								
				function copyIntoClipboardSWF(text) 
				{
					var flashId = 'flashId-HKxmj5';

					var clipboardSWF = '_clipboard.swf';/*'http://appengine.bravo9.com/copy-into-clipboard/clipboard.swf';*/

					if(!document.getElementById(flashId)) {
						var div = document.createElement('div');
						div.id = flashId;
						document.getElementById('maincell').appendChild(div);
					}
					document.getElementById(flashId).innerHTML = '';
					var content = 	'<div id=\"OcUKBBGenerator\"><h1 class=\"bigred\">Your Cart Contents BB-Code</h1><p>Copy and paste the following into the forums:</p><textarea id=\"OcUKBBGeneratorTextArea\" cols=\"130\" rows=\"20\" onclick=\"this.focus();this.select()\" style=\"width:99%\" readonly=\"readonly\">' + 
					
									text + 
									'</textarea></div>';

					/*
					var content = '<embed src="' + 
						clipboardSWF +
						'" FlashVars="clipboard=' + encodeURIComponent(text) +
						'" width="0" height="0" type="application/x-shockwave-flash"></embed>';
					*/
					document.getElementById(flashId).innerHTML = content;
					document.getElementById('OcUKBBGeneratorTextArea').focus();
					document.getElementById('OcUKBBGeneratorTextArea').select();
				};
				
				copyIntoClipboardIE(str);
				copyIntoClipboardSWF(str);
			})();




condensed form :
PHP:
javascript:(function() { var shoppingBasket = document.getElementById("shoppingBkt");  if(shoppingBasket == null) { alert("shopping basket not found"); return; }  var tbdy = shoppingBasket.getElementsByTagName('tbody')[0];  var rows = tbdy.getElementsByTagName('tr');  var str = "[COLOR=\"Yellow\"][b]YOUR BASKET[/b][/COLOR]\n";  var images = "";  var thumbnails = 'yes';  console.log('Your Basket');  for (var i=1; i < rows.length - 4; i++) { var row = rows[i];  var cells = row.getElementsByTagName('td');  if (row.className == "basket_option") { var inputs = row.getElementsByTagName('input');  /* a complete system with no option price or count */ if(inputs.length == 0) { var cell = cells[0];  for (var j=0; j <  cell.childNodes.length; j ++) { var option = cell.childNodes[j];  if(option.nodeName == "#text") { var desc = "[COLOR=\"Wheat\"]" + option.data + "[/COLOR]\n"; console.log('    option desc: ' + desc); str += desc; } } } /* a fully configurable build. */ else if(inputs.length == 1) { var desc = cells[0].childNodes[2].data; var qty = cells[1].childNodes[0].value; var price = cells[2].childNodes[0].innerText;  console.log('    option desc: ' + desc); console.log('    option qty: ' + qty); console.log('    option price: ' + price);  str += "[COLOR=\"Wheat\"]" + qty + " x " + desc + "[/COLOR]  [b][COLOR=\"Yellow\"]" + price + "[/COLOR][/b]\n"; } } else { var image = cells[0].childNodes[0].src; var desc = cells[1].childNodes[0].textContent; var link = cells[1].childNodes[0].href; var qty = cells[2].childNodes[0].value; var price = cells[3].childNodes[0].innerText; var total = cells[4].childNodes[0].innerText;  console.log('image: ' + image); console.log('desc: ' + desc); console.log('link: ' + link); console.log('qty: ' + qty); console.log('price: ' + price);  images += "[url=\"" + link + "\"]" + "[img]" + image + "[/img][/url] ";  str += qty + " x " + "[url=\"" + link + "\"]" + desc + "[/url]  " + "[b][COLOR=\"Yellow\"]" + price + "[/COLOR][/b]";  if(qty > 1) { str += " [b][COLOR=\"DarkOrange\"](" + total + ")[/COLOR][/b]"; } str += "\n"; } }  /* shipping costs */ var shipping = rows[rows.length - 3];  var shippingCells = shipping.getElementsByTagName('td');  var shippingValue = shippingCells[2].textContent;  /* grand total */ var total = document.getElementById('orderTotal');  var totalCells = total.getElementsByTagName('td');  var totalValue = totalCells[2].textContent;  console.log('Total: ' + totalValue + "(shipping " + shippingValue + ")");  str +=  "[b]Total : [COLOR=\"Yellow\"]" + totalValue + "[/COLOR][/b] " + "(includes shipping : " + shippingValue + ").\n";  /* thumbnails*/ if(thumbnails == 'yes') str += "\n" + images + "\n\n";  console.log(str);  function copyIntoClipboardIE(text) { if (window.clipboardData && window.clipboardData.getData) { window.clipboardData.setData("Text", str); } };  function copyIntoClipboardSWF(text) { var flashId = 'flashId-HKxmj5';  var clipboardSWF = '_clipboard.swf';/*'http://appengine.bravo9.com/copy-into-clipboard/clipboard.swf';*/  if(!document.getElementById(flashId)) { var div = document.createElement('div'); div.id = flashId; document.getElementById('maincell').appendChild(div); } document.getElementById(flashId).innerHTML = ''; var content = 	'<div id=\"OcUKBBGenerator\"><h1 class=\"bigred\">Your Cart Contents BB-Code</h1><p>Copy and paste the following into the forums:</p><textarea id=\"OcUKBBGeneratorTextArea\" cols=\"130\" rows=\"20\" onclick=\"this.focus();this.select()\" style=\"width:99%\" readonly=\"readonly\">' +  text + '</textarea></div>';  /* var content = '<embed src="' + clipboardSWF + '" FlashVars="clipboard=' + encodeURIComponent(text) + '" width="0" height="0" type="application/x-shockwave-flash"></embed>'; */ document.getElementById(flashId).innerHTML = content; document.getElementById('OcUKBBGeneratorTextArea').focus(); document.getElementById('OcUKBBGeneratorTextArea').select(); };  copyIntoClipboardIE(str); copyIntoClipboardSWF(str); })();     

/*end of function */

This is Internet Explorer Only. Only IE allows to paste to the clipboard :)

Need some other way for other browser (apart from Chrome which uses extensions).
 
Last edited:
Back
Top Bottom