[Tutorial] Hide ads from Microsoft live mail Extension, check the links below!

EDIT:
---------------------------------------------------------------------------
The extension is submitted and the tutorial is online!
http://my.opera.com/frankdd89/blog/2011/10/24/hide-microsoft-hotmail-ads-the-making-of-a-operas-extension

This project is hosted in: https://github.com/frankdd89/Hide-Hotmail-ads
---------------------------------------------------------------------------

Hi everyone, i'd like to make an Opera Extension that hide ads on Microsoft live mail service.
This is my first Opera Extension and I need some help.
The url on which the extension should be activated is this *.mail.live.com/mail/InboxLight.aspx?*
I should remove the "SkyscraperContent" node from the DOM, the javascript code would be something like this:

var d = document.getElementById('myDiv');

  var olddiv = document.getElementById(SkyscraperContent);

  d.removeChild(olddiv);

After this i should edit the css class to align the "MainContainer" container to the right border of the window changing the class from this:

.Managed .WithSkyscraper #MainContent { 
right: 163px;
 }

to this:

.Managed .WithSkyscraper #MainContent { 
right: 0px;
 }

this class is contained in hig.css stylesheet.

Please Help me guys.

Untested, but this should do all you want. Package it as includes/removeliveads.js in an extension, and it should be good to go.

// ==UserScript==
// @include http://*.mail.live.com/mail/InboxLight.aspx?*
// ==/UserScript==

var oexRemoveLiveMailAds = function()
{
  var d = document.getElementById('myDiv'),
  olddiv = document.getElementById(SkyscraperContent);
  d.removeChild(olddiv);
  document.getElementByID('MainContent').style.right = '0px';
}();

PS: You could consider blocking the URL from loading instead.

Related reading: Converting User JavaScript to an Extension and Dev Opera on Extensions

I hope this helps. Let us know when your extension is done!

Thank you daniel for your help, seems that the script is not working, i've modified it this way

// ==UserScript==
// @include http://*.mail.live.com/mail*
// @include https://*.mail.live.com/mail*
// ==/UserScript==

var oexRemoveLiveMailAds = function()
{
var d = document.getElementById('ManagedContentWrapper');
var olddiv = document.getElementById('SkyscraperContent');
d.removeChild(olddiv);

}();

i'm just concentrating in removing the element right now, i've also enabled the extensione for secure pages since I connect to hotmail with https protocol.
I tried also to make a similar script to try to remove the facebook bluebar, but this do not work the same way, I think i'm missing something.

EDIT: here is a sample extension that should remove the header node from myopera sites, not working
http://www.mediafire.com/?n46l6bqc0e62j4o

Here is a complete example that waits for the DOM to be ready, and the uses a re-usable remove element by ID function to get rid of the unwanted content.

// ==UserScript==
// @include http://*.mail.live.com/mail*
// @include https://*.mail.live.com/mail*
// ==/UserScript==

var oexRemoveLiveMailAds = function()
{
  window.addEventListener('DOMContentLoaded', function()
  {
    removeElementByID('ads');
    removeElementByID('SkyscraperContent');
  }, false);

  function removeElementByID(id)
  {
    var elem = document.getElementById(id);
    if (elem != null) elem.parentNode.removeChild(elem);
  }
}();

yes, i was using document.addEventListener to catch the event, but even with this change the script is not working, the node is still there, cant get it work even in other pages with other nodes

ps: thank you again anyway

Use Dragonfly (Opera Developer Tools) and insepct the page as it loads. It could be that the advert is inserted after the DOM is ready. Finding out what event is called on what element should make it easier to figure out when to call your code. Alternatively, you could try a timing Dependant delay on the execution of your script:

    setTimeout((function() { removeElementByID('SkyscraperContent'); }), 5000);

PS: The Error Console (in Dragonfly or stand alone) should give you a stack trace of what went wrong and where.

Did it daniel, one parameter was missing from the addEventListener method, the false one in the end, this is the final script:
// ==UserScript==
// @include http://*.mail.live.com/mail*
// @include https://*.mail.live.com/mail*
// ==/UserScript==

var oexRemoveMyOperaHeader = function()
{
window.addEventListener('DOMContentLoaded', function()
{
function removeElementByID(id)
{
var elem = document.getElementById(id);
if (elem != null) elem.parentNode.removeChild(elem);
}
removeElementByID('ads');
removeElementByID('SkyscraperContent');
},false);
}();

Thank you so much i will make a tutorial for this!

Ah. That explains it. Writing code without running it yourself is always interesting.


For your tutorial, note that the variable encapsulation of the script is a simple way to separate your code from the rest of the page’s code. A basic namespace for JavaScript. Avoids a whole lot of problems.

Coding style is similar to what I use in WebM Plus.