Google Chrome Plugin/Extension Support: The Baconizer!
18 Mar
Google Chrome, Google’s quick and open foray into the browser world, is quickly becoming more than just “the prettiest browser.” The Chrome team recently released a little program that allows anyone to pick the “channel” of Chrome they would like to use: Regular, Beta, or Developer. Developer has lots of subtle new features, one of which allows for rudimentary Extensions, helpful add-ons that many Firefox users say they cannot do without.
Given the internet’s recent love affair with bacon, I whipped fried up this crispy little extension that ADDS BACON TO GOOGLE!!! Most helpful was Matt Cutts’ Blog entry on Adding Extensions to Chrome. Then the helpful, albeit sparse official Chrome help page here got me through the rest of the way, with some additional javascript help here.
Step 1: Learn how to switch your installation of Chrome over to the Developer Channel
Step 2: Read through the official HowTo here.
Step 3: For the manifest.json file in your Extension’s folder, I just have this:
{ "format_version": 1, "id": "00123456789ABCDEF0123456789ABCDEF0123456", "version": "1.0", "name": "Baconizer", "description": "Rich, crispy bacon at your fingertips!", "content_scripts": [ { "matches": ["http://www.google.com/*"], "js": ["baconize.js"] } ] }
And then for the Javascript file, I have a file in the extensions folder named baconize.js with the following code:
var Dom = { get: function(el) { if (typeof el === 'string') { return document.getElementById(el); } else { return el; } }, add: function(el) { var el = this.get(el); document.body.appendChild(el); }, remove: function(el) { var el = this.get(el); el.parentNode.removeChild(el); } }; var Event = { add: function() { if (window.addEventListener) { return function(el, type, fn) { Dom.get(el).addEventListener(type, fn, false); }; } else if (window.attachEvent) { return function(el, type, fn) { var f = function() { fn.call(Dom.get(el), window.event); }; Dom.get(el).attachEvent('on' + type, f); }; } }() }; Event.add(window, 'load', function() { var i = 0; var btn = document.createElement('div'); btn.innerHTML = 'BACONIZE!'; btn.style.backgroundColor="#EE8080"; btn.style.top="0px"; btn.style.right="0px"; btn.style.position="absolute"; btn.style.zIndex="2" Dom.add(btn); Event.add(btn, 'click', function() { var el = document.createElement('img'); el.src = 'http://bacolicious.s3.amazonaws.com/bacon.png'; el.style.position="absolute"; el.style.top="20%"; el.style.right="20%"; el.style.zindex="2"; Dom.add(el); Event.add(el, 'click', function(e) { Dom.remove(this); }); }); });
Step 4: Once you have the two files, simply Right-Click on your Chrome shortcut, and add this text to the end of the Target field: –enable-extensions –load-extension=”c:\myextension” (where myextension is the path to the extensions folder)
Badabing. Google BACON STYLE!!!!!
Credit for the saliva-inducing Bacon image goes to http://bacolicio.us, go there now to baconify any website!



i don’t understand the “bacon” bit. is the joke meant for fat people? if it is, then i lmao @ fat people.
so what do i do with regular version then?
I have seen this page many times but didn’t got it. It is the thing that i was looking for to develop an extension. Thanks a lot!
I want to add the image for every page. I tried using but it gave an error. what should i do so that i can add the image to any page that i browse ( ex: file:/// ,http:// ,chromes new page…. etc). thank you!