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:
-
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
-
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
-
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:
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¶
- Go to
chrome://extensions
- Enable developer mode
- Click
load unpacked
- Navigate to the extension source and choose
dist
directory