How to Write an extension to modify a website for chrome

This is a guest gust post by Geek107. He explains how to Write an extension to modify a website for chrome

Ok, if you’re a web developer, understanding chrome extensions will be easy for you. It basicly all written in html, javascript and optional css.

The only thing not in those languages is the manifest.json file. This file tells chrome the name and version of the extension, and what scripts are used when(eg. miniscript.js applies to miniclip.com or options.html is the options page.). Depending on what kind of an extension you are writing, you will include diffirent files here.

Now, lets get our hands wet, we are going to write an extension that changes the logo on google.com

Ok, the main file:

{
“name”: “Google Logo Remover”,
“version”: “0.1″,
“description”: “This extension changes”,
“content_scripts”: [
{
"matches": ["http://www.google.com/*"],
“css”: ["style.css"],
“js”: ["script.js"]
}
}

save this code in a new folder and call the file manifest.json.

The name, version and description are self-explanitory but what do you think the content_scripts does?
It means that you can apply any script or style to any website. The only disadvantage about this is that not only can your style not overwrite the website’s css, but your script cannot use that websites function either. Google put in these features for security reasons.

So, now you need style.css. Here it is:

#logo {background:url(http://chromestory.com/newheader.png
);}

Now, go into chrome, select Tools(The spanner button) > Extensions. Then click the developer mode button. ‘Load unpacked extension’, browse to you entesion’s directory, select it.

Now, your extension should have loaded. Browse to google.com and enjoy!

Related posts:

1. Image Cropper Extension : Crop Images in any Website on the fly ! Image Cropper lets you crop images and save those cropped images in png format from any website on the fly. This is a simple Google...
2. How To Make Scrollbars More Thin on Google Chrome & Chrome OS – Without Extension ! Soon after I posted about this nice little extension “Thin Scroll Bar” I got something better from François Beaufort, an easy way to make the scroll...
3. Drag and Drop Images To Share on Twitter, Facebook Or Any Website I am really excited about this post. I am sure that you guys will tweet about this extension, and may even blog about this when...