Wilson Mar bio photo

Wilson Mar

Hello!

Email me Calendar Skype call

LinkedIn Twitter Gitter Instagram Youtube

Github Stackoverflow Pinterest

Make websites look and do what you want!

US (English)   Español (Spanish)   Français (French)   Deutsch (German)   Italiano   Português   Cyrillic Russian   中文 (简体) Chinese (Simplified)   日本語 Japanese   한국어 Korean

Overview

Browser extensions inject JavaScript code within internet browsers to modify web content users see and interact with, changing and extending the behavior of the browser itself.

The value of this tutorial is the painstaking arrangement of a learning sequence that is both thorough yet logical.

Each browser is a bit different. Documentation:

  • https://developer.chrome.com/extensions/overview
  • Mozilla Firefox
  • Microsoft Edge accepts extensions from other browsers
  • Apple Safari

Show me some Chrome extensions

  1. In Chrome, click the three vertical dots at the upper-right corner, select “More Tools”, then “Extensions”.

    Alternately, type in or click:

    chrome://extensions/

    In Firefox, click the “sandwich” icon at the upper-right corner and
    select “Add-ons”.

    PROTIP: Security-conscious companies manage browsers of their people to add extension such as “DigiCert Authentication Client Extension”.

  2. In another Chrome tab, search for Chrome Extensions at:

    https://chrome.google.com/webstore/category/extensions?hl=en

    On that website, click “Install” for one you like.

    Here are the most useful and highly-rated by a large number of people:

    • “The Great Suspender” saves memory and bandwidth by suspending tabs sleeping, because Google Chrome is a memory hog.
    • “Noscript” blocks images, javascript, fonts from loading and allow only sites you specify you trust
    • Tab Resize splits a large screens into several panes of tabs on the same page (like TMUX)
    • “Silent site sound blocker” mutes sites such as CNet which blasts sound on entry

    • “Chrome Connectivity Diagnostics” (app from Google) tests connection speeds
    • “Free Download Manager” to resume downloads that otherwise time out
    • TrafficLight (from Bitdefender) blocks malicious websites and highlights tracking cookies
    • HTTPS Everywhere (from EFF.org) ensures that you’re using HTTPS rather than HTTP protocol, to avoid man-in-the-middle attacks.

    • Picture-in-Picture Extension (by Google)
    • “Dark Reader” or “Dark Night Mode” presents any web page with a dark theme
    • Wikiwand puts a modern UI to Wikipedia pages
    • “Turn off the Lights” darkens and blurs other sections of the screen when watching a video
    • Behind the overlay enables you to view text behind pop-ups

    • 1Password, LastPass, or NordPass password manager
    • “I don’t care about cookies” removes cookie warnings
    • Google Keep to keep notes
    • Evernote web clipper
    • Asana for coordination of team tasks
    • Cisco WebEx Extension (for companies that haven’t already switched to Zoom)

    • “Noisli” plays soothing background sounds to help you focus
    • Dayboard to block websites you don’t have the discipline to avoid. It also displays your top tasks whenever you open a browser tab. So it’s better than “Citrus”.

    • Selenium IDE for automating human actions

    • Honey to find and apply discount codes for shopping
    • “The Camelizer” shows price history on Amazon, BestBuy
    • “Hunter” hunts for emails to company name you type in (registration required)

    • Grammerly spell checker (it won’t autocorrect, though)
    • “Typio Form Recovery” auto-saves form entries (may cause data leak)
    • “Print Friendly” removes text and images before printing
    • “Fireshot” captures entire page (not just what appears on your monitor)

    • NewsGuard rates websites
    • “TinEye” reverse image search to find original author
    • “AgoraPulse” (from RazorSocial) to easily share content in social media
    • “Pullbullet” transfers images & web urls among devices
    • “Chrome User Agent Switcher” to post on Instagram from a laptop rather than mobile phone
    • GoogleGIFs
    • Imagus

    • Bit.ly to shorten URLs for social sharing
    • Unshorten.Link shows where shortened links will send you

    YouTube videos about extensions:

    TODO: For other browsers

    Install Chrome Extension locally

  3. The sample code associated with Google’s tutorial at
    https://developer.chrome.com/extensions/getstarted is at
    https://developer.chrome.com/extensions/examples/tutorials/get_started_complete.zip.

    PROTIP: Google loads extensions from its website by loading zip files.

    “Browser actions” icons to the right of the star icon add functionality on most/all websites.

    Files from Google contain “Copyright 2018 The Chromium Authors” and “Use of this source code is governed by a BSD-style license” which is one of the oldest and broadly used license family in the FOSS ecosystem”.

    So those who change it code can use the “3-clause BSD License 2.0”, which Wikipedia says is compatible with almost all FOSS licenses (and as well proprietary licenses).

  4. Unzip get_started_complete.zip into folder get_started_complete.

  5. I renamed the folder and moved its files to a Git-enabled folder so I can version control changes and load it up to GitHub.com for archival and sharing.

    Remove Extension

  6. In the Extensions page, click the “Remove” associated with the extension to remove it (and reclaim disk space).

Install extension locally

Code to other examples include:

  1. View Harley Brody’s blog “So You Want to Build a Chrome Extension?” from June 5, 2013, but still relevant today.

    He wrote the “BuzzKill” Chrome Extension that automatically removes all Buzz Feed content from the browsing experience on Facebook.com.

  2. Navigate to facebook.com and login.

  3. On a new Chrome tab, On https://github.com/hartleybrody/buzzkill, click Fork to your own account, click the green “Code” and Download or clone.
  4. cd buzzkill

  5. In Chrome URL chrome://extensions/

  6. Click the slider to turn on Developer Mode at the top right to expose a menu:

    Load unpacked | Pack extension | Update
  7. Click “Load unpacked”, then select your extension’s folder.

    If you selected Google’s example, you should now see:

    browser-addon-chrome-getting-started

    PROTIP: Stay on this page. When code is changed, Chrome knows to reload your extension. You won’t need to press command+R.

    Notice “Inspect views background” in some of the extensions. See below.

  8. Click Load unpacked and navigate to buzzkill. “Make Facebook Great Again” should appear.

    NOTE: Extensions are automatically turned On upon load.

  9. Switch to Facebook tab.

    NOTE: “Page actions” icons to the left of the star icon in the address bar are for specific pages (URLs).

    Examine code for sample extension

  10. Click the url below to download file get_started_complete.zip:

    PROTIP: Google obtains extensions by loading zip files.

    Load your own extension

  11. To activate the add-on, click the extension icon at the upper-right

    browser-add-on-sample-access

  12. Click “Details” for its “Manage Extensions” page.

  13. In the add-on menu, click the three-dot icon to the right of your extension to select Pin so its icon appears on all Chrome tabs.

  14. Click on the new icon to see its menu. The default code just shows a color.

  15. Right-click on your add-on to select Options.

    The look and feel of the option UI is defined in the add-in’s options.html file invoked by the options.js file.

  16. Click on a different color.

  17. Click on the tab to a page displaying its content.

    As with other extensions, the extension applies to whatever web page your are on.

    The “Getting Started Example” default paints the background green.

  18. Click on the add-on’s icon for the add-in’s popup page_action.

  19. In the option pop-up, select the color to change the background of the current page.

    We’ll next talk about fixing the code producing this awful UI.

Files

Extensions are zipped bundles of HTML, CSS, JavaScript, images, and other files used in the web platform. Google’s “Getting Started Example” contains these default files:

In Google’s folder:

.
├── LICENSE
├── README.md
├── background.js
├── images
│   ├── get_started128.png
│   ├── get_started16.png
│   ├── get_started32.png
│   └── get_started48.png
├── manifest.json
├── options.html
├── options.js
├── popup.html
└── popup.js

In the BuzzKill folder:

├── README.md
├── bootstrap.js
├── clean.js
├── images
│   └── icon.png
├── libs
│   └── underscore.min.js
├── manifest.json
├── popup.html
└── settings.js

The manifest.json file Google reads as the “entry point”.

The BuzzKill extension, becuase it has permissions to work only on Facebook, is a page_action

In the manifest.json file, specify the URL Google should check every few hours to see if there is an update:

    "update_url": "https://mysite.com/myextension.xml"

JavaScript (.js) files Google calls “content scripts”.

Icons

The “icon.png” should be like the “get_started” image files – the same image in 4 different sizes 16, 32, 48, 128 pixels square. Note that the icon files are specified twice:

  "icons": {
    "16": "images/get_started16.png",
    "32": "images/get_started32.png",
    "48": "images/get_started48.png",
    "128": "images/get_started128.png"
  },
  "page_action": {
    "default_title": "Getting Started Example",
    "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"
    }

1. Load your extension into Chrome

Chrome injects content scripts after the DOM is complete.

Pop-up menu

Background

Code to the background listener in “Getting Started Example”

chrome.runtime.onInstalled.addListener(function() {
  chrome.storage.sync.set({color: '#3aa757'}, function() {
    console.log('The color is green.');
  });
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules([{
      conditions: [new chrome.declarativeContent.PageStateMatcher({
        pageUrl: {hostEquals: 'developer.chrome.com'},
      })],
      actions: [new chrome.declarativeContent.ShowPageAction()]
    }]);
  });
});

Change URL

  • https://thoughtbot.com/blog/how-to-make-a-chrome-extension

To listen for clicks on the browser action, pass a message (URL) to a background script.

"background": {
  "scripts": ["background.js"]
}

background.js has access to every Chrome API but cannot access the current page. As Google puts it:

// background.js
 
// Called when the user clicks on the browser action.
chrome.browserAction.onClicked.addListener(function(tab) {
  // Send a message to the active tab
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    var activeTab = tabs[0];
    chrome.tabs.sendMessage(activeTab.id, {"message": "clicked_browser_action"});
  });
});

References

Tutorials referenced include:

  • https://thoughtbot.com/blog/how-to-make-a-chrome-extension

  • https://www.youtube.com/watch?v=9Tl3OmwrSaM video

  • https://www.youtube.com/watch?v=8q1_NkDbfzE&list=PLC3y8-rFHvwg2-q6Kvw3Tl_4xhxtIaNlY from codevolution

  • https://www.youtube.com/watch?v=bmxr75CV36A Google Chrome Extensions: Extension API Design Dec 7, 2009 by Google Developer Rafael Weinstein

The playlist of Google videos about Extensions from 2009

https://www.youtube.com/watch?v=e3McMaHvlBY

https://youtu.be/uh84Asy2W4s Fullstack Academy