A Chrome Extension to alter a pages HTML using JQuery on button click

This is a chrome extension that will add a button to the browser next to the URL bar; When the button is clicked it will search the content of the current page and make any tweets it finds on the page much better.

The code is here:
https://sites.google.com/site/kpdownloadz/downloads/tweet%20improver.zip?attredirects=0&d=1

How to use this extension: I am too cheap to pay for the developer license which lets you upload it to the Chrome Web Store so you have to download it and then load it into the browser manually.

1. Download the above zip and unpack to your PC
2. Open Chrome and put 'chrome://extensions/' into a browser window
3. Make sure 'Developer mode' is ticked
4. Press 'Load unpacked extension...' and select the folder where you unpacked the above zip
5. A little TI icon will show up to the right of the URL bar which you can click on when visiting twitter sites

There's a bit of clowning around to get access to jquery, so this is my documentation for the process. NOTE: I was a BAD DEVELOPER and didn't read the documentation; this was all copy and paste and guess, so some of it is probably a bit wrong. Anyway, you'll end up with all of these files:

1. Start with the manifest.json. This describes the extension.

{
  "name": "Tweet Improver",
  "description": "This will fix all your dumb tweets",
  "version": "2.0",
  "permissions": [
    "activeTab"
  ],
  "background": {
    "scripts": ["jquery-2.1.0.min.js","background.js"],
    "persistent": false
  },
  "browser_action": {
    "default_title": "Improve your dumb tweets now",
"default_icon": {
      "19": "TI19.png",
      "38": "TI38.png"
    }
  },
  "icons": { "16": "TI16.png",
           "48": "TI48.png",
          "128": "TI128.png" },
  "manifest_version": 2,
  "content_scripts": [ {
    "js": [ "jquery-2.1.0.min.js", "background.js" ],
    "matches": [ "http://*/*", "https://*/*"]
  }]
}

For the background item we give it two scripts, we give it jquery first as apparently it loads them in that order.  Then we give it background.js, which is the main file being called by the browser action. These files need to be locally in your extension folder.

The browser_action bit is where we describe what our little button is going to look like.  We give it a couple of icons and some text that will show as a tool tip.

The icons bit describes the icons used for the chrome://extensions page and I think also the extensions downloads page (dunno, I never put mine up there).

The content_Scripts bit says that we want jquery injected into our background.js page, so in theory we should be able to use jquery when writing code in background.js.

2. Make a background.js

This is the js file our extension is hooked up to:

chrome.browserAction.onClicked.addListener(function(tab) {

  chrome.tabs.executeScript({
file: 'doittoit.js'
  });

});


Ok, there isn't much here. We're saying that when our browserAction icon thing is clicked we want to execute the js in the file doittoit.js.  

3. Your big mess of custom javascript to manipulate the DOM

You can have whatever you want in here - you've got access to all the jquery stuff.

  var tweetText = $(".tweet-text");

  tweetText.each(function() {
var newText = "";
var currentText = $(this).text();
if(currentText.length < 4) {
newText = "8=D";
} else {
newText = "8" + Array(currentText.length-1).join("=") + "D";
}
    $(this).text(newText);
  });

  $('.js-media-container').html('');

We do a search for any elements that have the class 'tweet-text' and then replace the text of that element to something that was better than the original. We also clear out any pictures (by setting the HTML of 'js-media-container' elements to nothing).