How to compile a Google Chrome extension out of code I found at userscripts.org?

Question

I came across this userscript which works in Google Chrome.

I want to use it as Google Chrome extension as this will give me experience to convert many other codes from userscripts to Google Chrome Extensions.

Can someone give me a step by step tutorial of how to make a Google Chrome Extension out of this userscript code?

// ==UserScript==
// @name           Facebook Ads Hider
// @author         Jose Luis Martin
// @namespace      http://joseluismartin.info
// @description    Hide Ads on Facebook
// @include        http://www.facebook.com/*
// @run-at         document-start
// 
// ==/UserScript==

if (document.addEventListener) {
    document.addEventListener("DOMNodeInserted", onNodeInserted, false);
}

// Event listener to hide ads containers
function onNodeInserted(event) {
    target = event.target;
    if (target.className == "ego_column") {
        hideElement(target);
    }
}

// trivial hide of ads container
function hideElement(elto) {
    elto.style.visibility = "hidden";
    elto.style.hight = "0px";
    elto.style.width = "0px";
}

Please do not give a reply that there is no need for this as userscripts can be natively run on Google Chrome. I am doing this to learn how to make Google Chrome extensions.

The Google Chrome extension tutorial is very bad for understanding and makes me vomit - I don't know who made it!

Answer 1

In Google Chrome, userscripts are extensions. The script gets packaged as a content script, and the extension manifest.json gets automatically generated.

To move towards a "full fledged" extension:

1. First organize your script, source file(s) and explicitly create the manifest.json as shown in this answer.

2. You do not need to alter that userscript's code, at this point, but you will want to transfer the values of the @include and @run-at directives to the manifest.json file you will generate. Refer to the example in that linked answer.

3. Read the Content Scripts page and note how the manifest can be used to easily add CSS, jQuery, your userscript (AKA content script), etc.

4. Content scripts are 1 of the 3 main tools available to Chrome extensions. The other 2 are the background page and UI pages. Learn more about those starting with the extension-development Overview.

5. Finally, you can package your extension as explained in this answer.