A simple but useful Chrome Extension


2012/03/26



Don't panic!

This is really easy and you might even find it useful. It's not beyond the capability of anyone who can type - in fact, that's not even necessary, because all you really need to do is copy and paste code into some special files, do a teeny bit of editing, follow some really simple directions, and you really will have your very own Chrome browser extension.

It won't be some silly thing of no use to you or anyone else, either. You'll have reason to use this and you will like it, I promise.

You won't be doing any programming - just some very simple HTML, which you don't even need to fully understand. Most of this you can do without any special knowledge at all and I will give you ways to "cheat" and avoid all of it if you want.

Are you ready?

Why Chrome?

First, because I use Chrome. It's much faster than Firefox and doesn't crash as easily. Almost all pages that will work with Firefox will work with Chrome (even if they don't know that themselves). You can download Chrome for free and use it without making it your default browser if you prefer.

Also, developing extensions for Chrome is a little bit less confusing than it is on Firefox. If you really do get interested in this kind of thing, having the easy time of it with Chrome gives you a gentle introduction that will help you when you start learning about these add-ons for other browsers.

Let's get started

The first thing I need you to do is create a folder (a directory) somewhere on your computer. It doesn't need to be anywhere special and I don't care what you call it. I called mine "crm", which is just three meaningless letters I picked out of the air.

So go ahead - right click on your Desktop and create a new folder.

An icon

We need an icon for this extension, so we are going to steal one from Google. It's not really stealing: we're just using the icon from Google's very own Chrome Extension Tutorial.

In fact, this tutorial is doing almost exactly what they do there, except I've made it simpler and hopefully more useful to you.

So, go ahead and download their icon (just click here). Put it in the new folder you created, using the name "icon.png".

Easy enough so far, right?

The manifest file

You need to create a simple text file in your new folder. It will be working with that icon, so it's logical that they all belong in the same place.

You can use a text editor and paste in the following code:

{
  "name": "My First Extension",
  "version": "1.0",
  "description": "The first extension that I made.",
  "browser_action": {
    "default_icon": "icon.png",
    "popup": "popup.html"
  }
}
 

I do recommend that you paste rather than trying to type this accurately.

You can feel free to change the Version, "My First Extension" and "The first extension that I made" text, but the rest of it has to stay as is.

You need to save that as ASCII Text to a file named "manifest.json" in the same directory where you put the icon. That precise name is necessary, don't get creative with that.

Pay attention to the need to save this as ASCII text if you are not using a true text editor. It cannot be in Word Processing or even Rich Text format. Usually you'd do this by choosing Save As, not Save.

The popup.html file

We need one more short ASCII file in that directory, and this one will be called "popup.html".

Here's mine:

<style>
body {
  min-width:357px;
  overflow-x:hidden;
}

</style>

<h2>My stuff</h2>
<p><b><i>Do you know someone who should be reading this? Click the Share button below to send it to them easily or to post it to Facebook or Twitter.</i></b>
</p>
<p>http://hubpages.com/author/pcunix/best/?rss</p>
<p>Anthony Lawrence<br /><a href="http://aplawrence.com">http://aplawrence.com</a></p>
 

If you know a bit about HTML, feel free to do your own thing here: it is the file name that is important, not the contents.

If you don't know anything about HTML, here's an easy way to cheat: just do a "View Source" on a web page that does contain what you'd like to have in here and copy and paste stuff from there.

Or just edit the text I used, leaving the HTML codes alone.

We are ready to rock and roll!

Amazingly enough, we're done. We have done everything needed for a simple Chrome extension. Just three little files is all it takes.

Files needed for Chrome extension

Loading the extension

No, this isn't going to be hard either. I'll show you pictures the whole way.

The first thing you want to look for is the Wrench. Click on that and choose Tools and then Extensions.

Chrome wrench icon

Or, you can just type (in the Address bar) chrome://extensions/

Either way, you'll get a screen like this:

Click on the '+' to enable Developer mode.

If you have no extensions at all, your screen will be mostly blank, of course.

See the little "+" next to Developer?

Click on that and it changes to a "-" and we also get more detail on the Extensions.

Developer mode

Loading your extension

The magic moment is about to happen. There is 150 page instruction booklet I need you to read first..

No, I'm kidding. This is a piece of cake. Easier, even.

Loading your Chrome extension

Just click on Load Unpacked Extension and then select your folder. Tell Chrome to open the folder itself, don't try to point it at the files inside it - it knows what to do by itself.

If you haven't mistyped anything or forgotten to save as ASCII Text, you won't get any errors.

If you DO get an error, Chrome will tell you what it doesn't like. Review your steps carefully and feel free to leave a comment describing your problem.

Most likely, you'll get no error, which means your extension is ready to use. So how do you use it?

Well, say that I'm creating this page and I want some of the boiler plate text that I put into my extension. I just activate the extension.. but wait, how do I do that?

You MIGHT see your extensions icon sitting there next to the Wrench, but if you have a few extensions like I do, you'll see ">>" there instead. Click on that, and you can choose your extension.

Chrome extension usage

Here's what it looks like on my Mac with the extension active.

in use

I can highlight anything I like in that window and copy and paste it anywhere I need it. If I need to change anything, or add new boilerplate, I just edit the "popup.html" file and then "Reload" this extension - it's that easy!

Of course there is much, much more that you can do with extensions. If you want to move on to more advanced subjects, follow the Google tutorial I mentioned above.

Now tell me the truth: this was a lot easier than you thought it would be, wasn't it?



Got something to add? Send me email.





(OLDER) <- More Stuff -> (NEWER)    (NEWEST)   

Printer Friendly Version

-> -> A simple but useful Chrome Extension




Increase ad revenue 50-250% with Ezoic


More Articles by

Find me on Google+

© Anthony Lawrence



Kerio Samepage


Have you tried Searching this site?

Unix/Linux/Mac OS X support by phone, email or on-site: Support Rates

This is a Unix/Linux resource website. It contains technical articles about Unix, Linux and general computing related subjects, opinion, news, help files, how-to's, tutorials and more.

Contact us