Gwaker – Chrome Extension Tutorial

Got to playing around with Chrome extensions and put this one together. There are a few simple plugin demos out there, but I thought this one was short and sweet.

The plugin is designed to clean up the ads and left rail of Gawker media sites (which can be pretty cluttered). Gwaker also lets you dissect an extension to build your own pretty quickly.

Check it out on GitHub.

manifest.json

{
  "manifest_version": 2,

  "name": "Gwaker Media Cleanup",
  "short_name": "Gwaker",
  "author": "Brian Rollins (BrianRollins.com)",
  "description": "This extension cleans the extrainous junk from Gawker Media sites, allowing you faster loads and easier reading.",
  "version": "1.0",
  "icons": { "16": "icons/icon16.png", "48": "icons/icon48.png", "128": "icons/icon128.png", "512": "icons/icon512.png"},
  "content_scripts": [
    {
      "matches":[
        "http://*.deadspin.com/*",
        "http://*.gawker.com/*",
        "http://*.gizmodo.com/*",
        "http://*.jalopnik.com/*",
        "http://*.jezebel.com/*",
        "http://*.kotaku.com/*",
        "http://*.lifehacker.com/*"
      ],
      "css": ["style.css"],
      "js": ["jquery-2.2.3.min.js", "core.js"]
    }
  ]
}

core.js

var removeTheseItems = [".js_newsletter-btn--subscribe", ".footer__items", ".mezzanine", ".contained-ad-container",
    ".basement", ".js_contained-ad-container", ".js_ad-promotion", ".ad-unit", ".sidebar"
];
$(document).ready(function() {
    for (var i = 0; i <= removeTheseItems.length; i++) {
        $(removeTheseItems[i]).remove();
    }
});

style.css

.list li {
    display: inline !important;
}

.footer__nav {
    width: 100% !important;
}

.main,.main__content {
    width: 100% !important;
    border-left: none;
    float: none !important;
}

.js_newsletter-btn--subscribe,.footer__items,.mezzanine,.contained-ad-container,.basement,.js_contained-ad-container,.js_ad-promotion,.ad-unit,.sidebar {
    display: none !important;
}

1 comment

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.