Articles tagged with Applications

Creating a chrome extension - an update

Since I wrote my last post on creating a chrome extension , there have been a few changes to how the extensions are built - mainly that the manifest version has changed to version 2. The original post is still fine, but there are a few tweaks needed. This post is mean mainly as an update to the original, so rather than rehash the old content too much I will skim over the basics quickly.

  • Create a folder for your plugin - name it after your extension so you can find it later!
  • In a text editor create 4 documents.
  • Save them as manifest.json, background.js, background.html and customStyles.css
  • Create a 20px x 20px png file using your favorite image editor!
  • Get a copy of jQuery . and add it to the folder.

manifest.json

 {
  "name": "plugin name",
  "version": "0",
  "description": "What do I do as an extension",
  "background": {"page": "background.html"},
  "manifest_version": 2,
  "browser_action": {
    "name": "Manipulate DOM",
    "icons": ["icon.png"],
    "default_icon": "icon.png"
  },
  "content_scripts": [ {
    "js": [ "jquery-2.0.2.min.js", "background.js" ],
    "css": ["customStyles.css ...
Read post... Posted in 'Web development'

Creating a chrome extension that uses jQuery to manipulate the DOM of a page

There are plenty of tutorials and guides on how to make a chome extension and there are hundeds for jQuery manipulation of the DOM. There are also a few about using jQuery in a chome extension, but only for the popup window. There seems to be a lack of using jQuery to actually do something on a page.This is something that too me a while to get my head around and a bit of googling to figure out, so now it's time to share.

Create a folder for the extension files. It's probably best to name it after your extension so you can find it later on.

In a plain text editor such as Notepad, Textmate or TextEdit create 3 blank documents. You can save the files as manifest.json, background.js and background.html. Using your favorite image editing software create a png icon with a transparent background (20px x 20px should be ok for now). Chome should scale the icon for the different areas it shows. Later we can create ...

Read post... Posted in 'Web development'