Basics of a Chrome Extension

Basics:

  • Chrome Extensions are essentially web pages and have access to all the APIs that the browser provides to web pages.
  • Extensions allow you to add extra functionalities to your browser with diving into native code. The final Chrome Web Store deployable package is a .crx zipped file that consists of:
Extension 
|- A manifest file 
|- One or more HTML files 
|- Optional: One or more JavaScript files 
|- Optional: Any other files your extension needs

Manifest.json:

  • Is just a metadata file that contains information about the extension.
  • At a minimum it has to contain the manifest version, name of the extension and version of the extension.
{
  "manifest_version": 2,  
  "name": "Chrommy",
  "version": "1.0"
}

Two types of Chrome Extensions 

  • Browser Action: It stays in the browser’s toolbar and is accessible at all times.
  • Page Action: It stays in the browser’s toolbar but grey-ed out until we visit certain pages.
  • Each extension can have at most one browser action or page action!
  • Extensions can also add UIs as a popup, context menu or in an options page
 

src: developer.chrome.com

Architecture:

  • The main functionality of an extension (either a Browser action type or a Page action) happens when we click on the extension’s icon. However, there are other ways in which an extension’s functionality can be executed. And that is by using Background/Event pages or Content scripts.

src: developer.chrome.com

  • Background vs Event Pages: Both are a way of creating a single long-running script to manage some task or state of the extension. However, background pages are always open and running (not recommended) whereas event pages are opened and closed as needed.
  • Content Script: Is just JavaScript that you want to execute in the context of a page that’s been loaded into the browser. Content Scripts can read and modify the DOM. However, content scripts cannot use the Chrome APIs. The way content script get around that limitation is by exchanging messages and notifying their parent extension pages, which has access to the Chrome APIs.

src: developer.chrome.com

Creating a “Hello World” chrome extension:

  • First we decide to make our extension a Browser Action type extension.
  • Meaning, when a user click’s on the icon, a ‘Hello World’ appears.
  • So we have to update our manifest.json to add description, icons and browser action files.
{
  "manifest_version": 2,  
  "name": "Chrommmy",
  "version": "1.0"
  "description": "This extension says 'hello world'",
  "icons": {
    "128": "icon128.png",
    "48": "icon48.png",
    "16": "icon16.png"
  },
  
  "browser_action": {
    "default_icon": "icon16.png", //icon shown at the top corner of browser
    "default_popup": "popup.html" //html file to open when we click on icon
  }
}
  • Now let’s create our popup.html file
<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>
    </head>
    <body>
        <h1>Hello World</h1>
    </body>
</html>
  • Our folder has this structure now.
Hello World
 |- manifest.json
 |- popup.html
 |- icon128.png
 |- icon48.png
 |- icon16.png

Activating an extension in our own browser:

  • First head to the urlchrome://extensions
  • Make sure that developer mode is checked.
  • Click on Load unpacked extension
  • Locate ‘Hello World’ directory and BOOM we have our first extension!