How do I get my extension to block elements on a page?

Question

I want to do this the simplest way possible, I don't mind if it allows the element to load THEN hides it. Basically I want to do a different take than what's been done before for YouTube comment blockers but I can't figure out how to actually get my extension to block comments. I know limited HTML/CSS/JavaScript but I'm just not sure where to start. I already know what elements need to be consistently removed from the page but don't know how to tell chrome to hide them.

EDIT: To go into further if possible I'd like to blog certain sections in the HTML based on their <div>.

The [`chrome.webRequest`](http://code.google.com/chrome/extensions/webRequest.html) API can be used to cancel certain requests. The [`beforeload` event](http://stackoverflow.com/questions/4395525/safari-extension-beforeload-event-documentation) can be used to detect resource loads. The `DOMNodeInserted` event can be used to detect node insertions. — Rob W, Apr 21 '12 at 08:55
This [opensource chrome extension](https://github.com/maripo/CustomFilter) does this as well — Brad Parks, Apr 06 '17 at 12:05

score 4 · Accepted Answer · answered Apr 23 '12 at 00:03

Here is my Facebook Ads disabler:

manifest.json

{
  "name": "Facebook Ads Disabler",
  "version": "0.0.1",
  "description": "Disable side ads on facebook! By Alexander Piechowski.",
  "content_scripts": [
    {
        "matches": [
        "http://*.facebook.com/*","https://*.facebook.com/*"],
        "js": ["main.js"],
        "run_at": "document_end",
        "all_frames": true
    }
  ]
}

main.js

function remove(){
try
  {
    document.getElementById('pagelet_ego_pane_w').innerHTML = '';
  }
catch(err)
  {
    //Skip if "pagelet_ego_pane_w" div tag isn't on this page
  }
  try
  {
        document.getElementById('pagelet_ego_pane').innerHTML = '';
  }
catch(err)
  {
    //Skip if "pagelet_ego_pane" div tag isn't on this page
  }
    try
  {
        document.getElementById('pagelet_side_ads').innerHTML = '';
  }
catch(err)
  {
    //Skip if "pagelet_side_ads" div tag isn't on this page
  }
      try
  {
        document.getElementById('fbPhotoSnowliftAdsSide').innerHTML = '';
  }
catch(err)
  {
    //Skip if "fbPhotoSnowliftAdsSide" div tag isn't on this page
  }
console.log('All ads have been removed.');
setTimeout(function(){remove();},2000);
}
remove();

This makes all the inside of the ID's completely blank and re-runs every 2 seconds for when I go to new pages within facebook.

How do I get my extension to block elements on a page?

1 Answers1