High Level Overview

This extension has:

  1. a popup window, which is visible to user and the primary way of interacting with the extension, and
  2. a background context (service worker), that opens links and manages extension context menu.

When user clicks extension icon/browser action, extension opens the extension popup window. Clicking a menu link opens a new browser tab. User can pin and unpin menu items, and sort pinned menu items using drag and drop.

In source code, this behavior is implemented by following 3 components:

  1. src/popup manages the extension popup window

    • It saves and restores user preferences
    • It sets the visible content rendering inside the popup window
    • Menu is currently the only possible view, so popup always renders this menu panel

  2. src/menu panel shows list of links

    • User can pin/unpin links and drag and drop pinned links

  3. src/background has no visual interface; it runs in the background of the browser

    • it programmatically launches links user clicks in the menu
    • other parts of the extension can communicate with background through message passing
    • it creates and manages extension context menu

Source Code Organization

Path Description
└─ .github github files
└─ assets extension images and features images
└─ docs files used for generating these these docs
└─ i18n translations (generated by POEditor, do not edit)
└─ src source code
    └─ background background scripts
    └─ menu menu of links
    └─ popup extension popup view
    └─ shared shared modules for use by popup/background
      config.js extension config
      manifest.json extension manifest
└─ test unit tests
/ (root) config and utility files

Building Locally

Building this application from source requires Node.js and some web IDE.

Run these commands to build a locally debuggable version:

git clone https://github.com/MobileFirstLLC/shortcuts-for-chrome.git

npm install

npm run build

Available Commands

This extension is build with extension-cli. Refer to extension-cli user guide for further details on each command.

Command Description
npm run start development build
npm run build production build
npm run docs generate docs
npm run test run unit tests
npm run clean clean generated files
npm run sync update config files
npm run coverage unit test coverage report
npm run translate generate locales

Debugging

  1. Go to chrome://extensions
  2. Enable developer mode
  3. Click load unpacked
  4. Navigate to the extension source and choose dist directory