Your Chrome Extension in 6 small steps :)

IE vs Chrome

What are extensions?

They are small software programs that can modify and enhance the functionality of the Chrome browser.

What can extensions do?

Extensions can do quite a lot. They use either page actions or browser actions. They can’t use both.
A page action is a chrome extension that is specific to certain pages. You will usually see a UI added in the omnibox bar (google chrome’s address bar).

A browser action is not specific to a page and is relevant no matter where you are in the browser. You will usually see a UI added to the right of the omnibox bar.

Creating a Chrome Extension:

1- You need a folder mkdir my_first_chrome_extension

2- You need a manifest - touch manifest.json and past this stuff

 “manifest_version”: 2,
“name”: “Custom Google Homepage”,
 “description”: “This extension shows a Google Image search result for the current page”,
 “version”: “1.0”,
“page_action”: {
 “default_icon”: “img.png”,
 “default_popup”: “popup.html”,
 “default_title”: “My custom google page!”

3- Add to Chrome : -

Go to chrome://extensions in your browser

Ensure that the Developer mode checkbox in the top right-hand corner is checked, like this:

enter image description here

If the extension is valid, it’ll be loaded up and active right away! If it’s invalid, an error message will be displayed at the top of the page. Correct the error, and try again.

Tip: It is common to have syntax mistakes. Make sure your commas & brackets are formatted correctly.

Ensure that the enabled box next to your chrome extension is checked so you can see it in action.

Now you can fiddle with your code :)

4- Add Content Script

Add this to your manifest.json

“content_scripts”: [
 “matches”: [“*"],
 “css”: [“main.css”]

5 - You need a CSS file

touch main.css

 background-image: url("");
div.gb_xe.gb_R.gb_Me.gb_Ee {
 font-weight: bold;
 font-size: 15px;

6- Go to Google

enter image description here

And Done!
enter image description here