Home 00 Dataguide 01 Github 02 Colabs 03 Shell Basics 04 Apis 05 Webscraping 06 Nbdev 07 Javascript Packag... 08 Cloud Functions 09 Browser Extension

Don't Look! I'm changing!

URL Copied

Musical loops

⚠️ This writing is a work in progress.⚠️

BinderBinderBinderOpen Source Love svg3

NPM LicenseActiveGitHub last commit

GitHub starsGitHub watchersGitHub forksGitHub followers

TweetTwitter Follow

note: There is a lot of quoting and paraphrasing on this page in particular. Be sure to check the links you want to learn more.

notice: Chrome's V2 Documentation on their Extensions were used extensively in the writing of this piece. Refer to the above link for something more complete.

warning: A new Chrome Extension Versioning exists and so information is effectively now old and may be depricated.

Extensions are browser-event based programs that enhance the Chrome browsing experience.

browserAction/ Popup - What we all think of when we think of an extension. A small box in the corner that opens a popup when clicked.

Background scripts - No User interface. Do not execute on the bhe webpage. Can be triggered by an event.

content scripts - Can modify a webpage. runs inline on the browser.

options page - A dedicated page a developer can create that lets users set up options for the extension.

themes - Change the look of the browser

Extensions are made of different, but cohesive, components:

  1. Create the manifest.json
  2. Add instruction
  3. Introduce a user interface
  4. Layer logic
  5. Give users options
  6. Take the next step

Examples

Create the manifest.json

The directory holding the manifest file can be added as an extension in developer mode in its current state.

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "manifest_version": 2
}

chrome://extensions => More Tools => Extensions => Enable Developer Mode then click LOAD UNPACKED

Add instruction

A background page is loaded when it is needed, and unloaded when it goes idle. Some examples of events include:

Although the extension has been installed, it has no instruction.

Introduce a background script by creating a file titled background.js for storing data

chrome.runtime.onInstalled.addListener(function() {
  chrome.storage.sync.set({color: '#3aa757'}, function() {
    console.log("The color is green.");
  });
});
{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "permissions": ["storage"],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "manifest_version": 2
}

Manifest

manifest.json This is the only file that must be present in every extension.

This manifest can also contain pointers to several other types of files:

 manifest.json
 
 {
     "manifest_version": 2,
   
     "name": "ACS Downloader",
     "description": "This extension will download ACS data",
     "version": "1.0",
   
     "browser_action": {
      "default_title": "ACS Downloader",
      "default_icon": "icon.png",
      "default_popup": "popup.html"
     },
     "permissions": [
      "activeTab"
      ]
 }

Introduce a user interface

Extensions can have many forms of a user interface, but this one will use a popup. Create a popup.html.

Like the background script, this file needs to be listed in the manifest under page_action.

Toolbar icons are also included under page_action section via the default_icons field.

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "permissions": ["storage"],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "page_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/get_started16.png",
      "32": "images/get_started32.png",
      "48": "images/get_started48.png",
      "128": "images/get_started128.png"
    }
  },
  "icons": {
    "16": "images/get_started16.png",
    "32": "images/get_started32.png",
    "48": "images/get_started48.png",
    "128": "images/get_started128.png"
  },
  "manifest_version": 2
}
<!DOCTYPE html>
<html>
  <head>
    <style>
      button {
        height: 30px;
        width: 30px;
        outline: none;
      }
    </style>
  </head>
  <body>
    <button id="changeColor"></button>
  </body>
</html>

Available APIS

Content scripts

A content script is a part of your extension that* runs in the context of a particular web page*

(as opposed to background scripts which are part of the extension,

or scripts which are part of the web site itself

 popup.html
 
 <!doctype html>
 <html>
   <head>
     <title>ACS Downloader</title>
     <style>
       body {
         min-width: 357px;
         overflow-x: hidden;
       }
 
       img {
         margin: 5px;
         border: 2px solid black;
         vertical-align: middle;
         width: 75px;
         height: 75px;
       }
     </style>
     <!--
       - JavaScript and HTML must be in separate files: see our Content Security
       - Policy documentation[1] for details and explanation.
       - [1]: http://developer.chrome.com/extensions/contentSecurityPolicy.html
      -->
     <script src="popup.js"></script>
   </head>
   <body>
       <h1>ACS Downloader</h1>
   </body>
 </html>

Background scripts can access all the WebExtension JavaScript APIs, but they can't directly access the content of web pages. So if your extension needs to do that, you need content scripts.

Load the extension.