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!