What's new

Web Creating Your First Chrome Extension

  • Thread starter MatthewH
  • Start date
  • Views 781
MatthewH

MatthewH

Member
Bright Idea Programmer Experienced Veteran
Messages
1,604
Reaction score
629
This tutorial was written on a Mac that I do not have admin access to (school Mac), therefore...I can not screenshot.
I don't do text tutorials a lot but this one is random when it comes to what I normally do, so I figured I would just make it a text tutorial.
Yes, it's random. Get over it. Ha ha.

So let's get started. We're just going to do 2 simple things, we're going to set up the action and then we're going to set up some settings (which will be up to you to add to and such). We're also going to utilize locales and the omnibox, although we won't actually be using it. :tongue:

So...do you have the genitals to move forward with this tutorial?

Chrome Extension Tutorial
Language: Web Languages (multiple)
Difficulty: Easy
Original Author: Coldfire202
Items Needed: An editor (notepad, Notepad++, Sublime, Brackets, whatever), and the ability to create folders and files.

Tips
• Run/Test/Debug your program often to make sure there are no errors
• ALWAYS SAVE YOUR PROJECT AND SAVE IT OFTEN!
• If you are using a laptop plug it in, just to make sure your laptop doesn't die
• If your computer is slower, close not needed programs (Example: Adobe Photoshop, not needed tabs, etc)
• I use Brackets, it's for both Mac and Windows

Table of Contents
Part 1: Knowing how to load your extension
Part 2: Folder set up
Part 3: The main manifest and locales
Part 4: The action and settings


Part 1 - Knowing how to load your extension.
Knowing how to load your unpacked extension in Chrome is the first thing you should know how to do if you want to be able to continue. It's quite simple...
Go to your settings then extensions and check the "Developer Mode" checkbox.

This will give you 3 new buttons, "Load unpacked extension", "Pack extension", and "Update Extensions Now". We don't care about the last two, we just want the first one to load the unpacked extension.
Little info for you, when you load the extension make sure you load the folder with the main manifest file or it won't work. Speaking of folders, we should probably go ahead and set those up.

Part 2 - Setting up the folders.
We need to discuss folders, this is very important. You can have as many as you want but the top/root folder is one I'm concerned about. You must have two things. The '_locales' folder. This will contain all of our languages and so on. Inside the locales folder we need the 'en' folder (english). Here you can also have other languages such as a folder for 'de' (German) and so on. Inside the locale file (we're going to use english from now on) we're just going to create a file called 'messages.json'.
So now this will look like...

>MyAwesomeExtension
-->manifest.json
-->_locales
---->en
------->messages.json

There's no point in loading the extension right now because there's nothing to load.
Now one quick thing I suggest. I usually do not put my extension code thats not required to run the extension in the root directory. I usually put it in a 'src' folder and move from there, and that's what we're going to work from. So go ahead and add it.

Part 3 - The main manifest.json and _locales
We're not going to do much more, honestly, with the locales. It's just there for you to call on. You'll see how we can call on them later on.
However. I'll show you how each message inside the locale file (messages.json) will look.
Code:
{  // The main brackets. You MUST have these.
  "l10nTabName": {
    "message":"Localization"
    ,"description":"name of the localization tab"
  }
}


If you don't know what the l10n means. I'll explain. l and n are the first and last letter of localization, the 10 is the number of letters in between the l and the n. Easy enough right? So anyway. That is how the localization file will look.

Now to the main manifest. This will be in the root directory. If it's not, your extension will not load properly.
I'll use comments in the code to tell you more about everything.
Code:
{
  "name": "My Awesome Extension", // This is the name that will show up in Chrome in the chrome://extensions/ tab.
  "version": "0.0.1", // The version of your extension. This can be whatever you want, although you should keep it set to numbers because Chrome and the webstore may not recognize anything else but periods and numbers. However, this theory is untested.
  "manifest_version": 2, // Do not change this. We're using version 2 of the manifest file. Version 1 is depreciated and Chrome no longer accepts it.
  "description": "A truly awesome extension with a specified action and settings page", // The description of our extension. Do not make this detailed. Short and sweet, and to the point.
  "homepage_url": "http://www.mysite.com", // The developer website or whatever you want it to link to. Doesn't really matter.
  "icons": { // The icons to use. I would suggest having these 3 versions. 16x16, 48x48, and 128x128.
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "default_locale": "en", // You don't need this, if you don't have it...you don't need the _locales folder.
  "options_page": "src/settings/index.html", // The options page. I would suggest a separate directory with the index.html file so there's no issues. :)
  "browser_action": { // This is what will show up beside the address bar!
    "default_icon": "icons/icon19.png", // The default icon 19x19.
    "default_title": "My Awesome Extension", // The text that shows up on hover.
    "default_popup": "src/main/action.html" // The file that will show up when we click that icon.
  },
  "omnibox": {
    "keyword": "MyAwesomeExtension" // Just a cool thing to add to the extension. We won't use it. Type MyAwesomeExtension in the omnibox and see what happens. ;)
  },

So now we have our manifest set up. Now what? We'll cover that in the next section.

Part 4 - The action and settings.
First off. Let's go ahead and make the folders. In the root directory, create a folder called 'src'. Inside that folder create two more called 'main' and 'settings'. Inside the 'main' folder create a file called 'action.html'. Inside the 'settings' folder create a file called 'index.html'.

Now your folder with look like this.
> MyAwesomeExtension
--> _locales
--> icons
--> src
-----> main
--------> action.html
-----> settings
--------> index.html
--> manifest.json

Honestly. We're pretty much done here. This is nothing left to cover for the basics. Just write all your code in the HTML files. Which I don't really want to cover here. You can treat the action and the settings just like any other HTML file and use CSS and JS. Have fun guys!
 
F

Fire First

Information tab on my profile to find out about me
Messages
436
Reaction score
140
Good tutorial to get people starting and going, nice work friend.
 
Top Bottom