Skip to content

Guide

High Level Overview

This extension has a popup window, which is visible to user, and the primary way of interacting with the extension, and a background context (service worker), that manages extension background services.

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.

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 the menu panel

  2. src/menu panel shows list of links.

    • User can pin/unpin links and drag and drop pinned links
    • It programmatically launches links on click
    • It initiates capturing recently used links

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

    • It creates and manages extension context menu.

This application has no external runtime dependencies.

Source Code Organization

Path Description
└─ .github workflows
└─ assets extension images and features images
└─ docs files used for generating this website
└─ i18n translations: generated by POEditor, do not edit
└─ src source code
    └─ background background scripts
    └─ menu menu of links
    └─ popup extension popup view
    └─ shared shared classes and modules
      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:

1
2
3
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 user guide for further details relating to building the extension.

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 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
Back to top