How to Build A Chrome Extension: Part 1

The Basics. Working with Project Concepts, Structure, and Terminology.

A bird’s eye overview.

Chrome extensions are web friendly files (js,HTML and CSS) that get injected into your browser to, as you know, add functionality to your browser. These extensions are uniquely identified with a 32 characters [a-z] string, and if you’re a proud Mac owner then your chrome extensions are located at /Users/$(whoami)/Library/Application\ Support/Google/Chrome/Default/Extensions and if you’re a Mac owner and not a proud one then you can GTFO.

How it works.

I wanna start by introducing the manifest.json file (as I will be mentioning it throughout). All projects have a file that must be named manifest.json. This is a special file that chrome looks for to grant permissions to your app located at the root of your Chrome Extensions folders (so again, that would be located at /Users/$(whoami)/Library/Application\ Support/Google/Chrome/Default/Extensions/<YOUR EXTENSIONS a-z ID]/manifest.json). If you are pulling your hair out asking “Why is Chrome not recognizing my chrome.* action? I’m doing exactly what their doc’s say!“, then it’s likely a problem that starts here.

Now let’s hope right into.

There are two UI system you can utilize as a developer when building your chrome extension Browser Actions and Page Actions and you’d best plan which route you’d like to ultimately go as you can only use one or the other!

So what is this liberal bullsh*t you ask?

Well let’s get into it sicko.

Browser Actions

Declared as browser_actions in your manifest.json.

Include every permission you want the chrome.browserActions scope to have, in Part 2 I’ll share an annoying experience I had with this one and how I fixed it in part 2. The browser_actions object, that is a nested object inside the manifest.json file includes the following child attributes/keys: * default_title - What appears when the users mouse hovers over your Chrome Extension * default_popup - The .html file location of the page you’d like to be displayed when the user clicks your icon * default_icon - A string or object of a default icon for your extension. String Example:

 "default_icon":"images/default-icon.png"

Object Example:

  "default_icon": {
            "16": "img/icon-16.png",
            "48": "img/icon-48.png",
            "128": "img/icon-128.png"
        }

A completed Example of the nested browser_action object inside manifest.json would look like:

"browser_action": {
        "default_title": "RedditLabs",
        "default_popup": "popup.html",
        "default_icon":"images/default-icon.png"
    }

Page Actions

Declared as page_actions in your manifest.json.

Once you decide which route you’re going then you’ll have some of the following functionality declared in your manifest.json file that includes the use of the following:

Content Scripts

Declared as content_scripts in your manifest.json

Any arbitrary .js and .css files (scripts) that you’d like to be injected into pages.

When to use this? When you want to create your own modded out version of what you think a web page would look like. When you want to create your own modded out functionality to a webpage, for instance if you wanted to add spechail buttons or hover actions (like the popular Hover Zoom Extinsion See the Chrome Stores Personalize Chrome Section for example of this.

Background Pages

Declared as background_pages in your manifest.json

This runs all the time even when you have no tabs or windows open. This is assuming Chrome is in-fact running.

This is where you want your Apps core logic to go, for persistence.

Long running scripts that manage state and apply tasks across your app’s components.

Popup Page

To continue this multipart series on “How to Build A Chrome Extension” then checkout Part 2 How to Build A Chrome Extension Part 2: Understanding the Chrome API.