Chrome Extension

Google Chrome is the Top web browser, and part of Chrome’s appeal is owed to its excellent extensions. The good news: It’s not that hard to get started making your own Chrome extensions. We’ll take you from the most simple extension with lot of Use.

I released my first Chrome extension—a Social Network Menu extension that will help every one.

Today, we’ll walk through how to make your first and simplest Social Link Extension in Chrome , So let’s get extending!

While this extension requires zero knowledge of JavaScript , Basics of  HTML and CSS

Step -1 Manifest.json: The Cornerstone of Your Chrome Extension

Every Chrome extension consists of, at minimum, a file called manifest.json, which defines the basics of your extension—its name, description, version number, what kind of extension it is (there are a handful of different things a Chrome extension can do, which we’ll talk more about below), the permissions it needs to run (e.g., what web sites it needs access to), and so on.

So let’s get started. Create a new folder—let’s name it First_Extension —and, using your favorite text editor, create a new text file called manifest.json. Copy and paste the following code into it:

 

{
"manifest_version": 2,

"name": "Your First Extension",
"description": "One Click Get All Networks",
"version": "1.0",

"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
}

 

The name, version, and description are all pretty self-explanatory, but browser_action is something new! The browser_action property tells Chrome that we’re making an extension that will add a button to the toolbar. So far, all we’ve done is assign an icon to that button. Basically you’re telling Chrome that your extension has an icon, called icon.png, and that it’s located in the same folder as your manifest.json file. Of course, you don’t have an icon.png file in your First Extension  folder just yet, so let’s fix that.

Manifest Document

 

Step -2 Design HTML , CSS and Icon for extension

File Structure

-> First_Extension

  • icon.png
  • popup.html
  • style.css

1. Download icon.png (via) and copy it to your First_Extension folder.

2. Create file as popup.html

popup.html (via) and copy it to your First_Extension folder.

3. copy source and name it as style.css

#wrapper 
{
 min-width: 250px;
 overflow-x: hidden;
}

.row
{
 width: 250px;
 height: 50px; 
}
.col
{
 width: 50px;
 height: 50px;
 float: left; 
 margin: 0px 3px ;
}

img 
{
 margin: 0px 5px ;
 border: 1px solid black;
 vertical-align: middle;
 width: 42px;
 height: 42px;
}

 

Step -3 Test your Chrome Extension

We haven’t done much yet, but you’ve actually already made something you can test out, so let’s do that. Point Chrome to chrome://extensions/, tick the Developer mode checkbox at the top-left of that window, then click the Load unpacked extension button. Point Chrome to your First_Extension folder, click Select or OK (varies by operating system), Chrome will load up your stub of an extension, and you should see your little globe icon appear in your Chrome toolbar thusly:

 

Developer_Mode

If you try clicking your First_Extension (Social Network ) button, however, you’ll notice Top Social Network links

Social_Link

 

Extension

 

Achievement unlocked! You’ve First Social Networking Menu Extension in Google Chrome . Nice work. Now let’s take things up a notch. (If you had any trouble along the way, download my working First_Extension.zip and compare it with yours.)

 

Helpful Resources

All of my Chrome extension-building knowledge comes from Google’s very thorough documentation and good ol’ fashioned World Wide Web searches when I’d get stuck. So you should certainly check out:

  • The Official Google Chrome Extensions Developer’s Guide: It’s the starting point for everything you need to know, lays our all the various extension APIs you may want to use, and so on. If you know what kind of extension you want to make, I’d highly recommend taking an hour or so, reading through the docs, and taking notes/saving links whenever you stumble upon something that sounds like you’ll need it to accomplish your extension goal.
  • Stack Overflow’s Google Chrome Extension tag page is filled with great Q&As regarding Chrome extension development. If you’re stumped by something, give StackOverflow a search, give the web at large a search, and if you can’t find the answer, try posting your question to Stack Overflow. It’s awesome.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s