Source Code Docs

Classes

ContextMenu

The ContextMenu class adds custom options to the browser action's context menu (the "right-click" menu). The context menu setup must be run in the extension's background context.

Background

The background class sets up all functionality and event handlers in the extension's background context. Currently, this module sets up the extension context menu. Instantiate Background to activate this functionality. The instantiation must be run in the extension's background context.

Dragging

Makes child-nodes of some DOM Element draggable, using native HTML drag and drop. This class has no dependencies and can be applied to any collection of UI elements to make them draggable.

Menu

Menu panel is a DOM elements that shows a list of links. This class is responsible for creating and managing the menu.

Popup

This is the main class of the popup window, displayed when user clicks the extension icon. The Popup class is responsible for saving/restoring persistent data and rendering the menu panel. This popup view can easily be extended to display other content, but currently it renders the menu panel only.

RecentLinks

Recent links is a list of URL that were used "recently", based on configurable interval in Config.recentIntervalMillis. Unpinned recent links are displayed at the top of the menu. Recent links become stale after some time and are removed from the recent list.

Storage

Application storage for persisting data. Persisted data includes: pinned links (user preference) and recently used links (based on user behavior). This storage is stored in chrome sync storage, which is specific to current user, and will sync between devices if user is signed in and sync is enabled.

ContextMenu

The ContextMenu class adds custom options to the browser action's context menu (the "right-click" menu). The context menu setup must be run in the extension's background context.

Kind: global class
See: chrome.contextMenus

Required Permissions

This feature requires contextMenus permission in extension manifest.

ContextMenu.initialize()

This method creates a context menu based on a configuration defined in Config.ContextMenuOptions.

Initializes a context menu

import ContextMenu from 'contextMenu.js';

ContextMenu.initialize();

Kind: static method of ContextMenu

Background

The background class sets up all functionality and event handlers in the extension's background context. Currently, this module sets up the extension context menu. Instantiate Background to activate this functionality. The instantiation must be run in the extension's background context.

Kind: global class

new Background()

Initializes all background scripts.

Initialize background scripts

new Background();

Dragging

Makes child-nodes of some DOM Element draggable, using native HTML drag and drop. This class has no dependencies and can be applied to any collection of UI elements to make them draggable.

Kind: global class

new Dragging(idAttribute, container, onElementRender, onDragEndCallback)

Initializing a new Draggable specifies the parent of the draggable content: its immediate children become draggable; the id-attribute that uniquely identifies the children; and handlers that are called each time after the draggable content is rendered, and when element order changes due to dragging.

Create a new draggable

new Draggable(
    // id attribute of child elements
    "data-drag-id",
    // parent container
    document.getElementById("drag-container"),
    // function to call after rendering elements
    onDragRenderCallback,
    // callback to handle drag action
    onOrderChangeCallback)

Param	Type	Description
idAttribute	string	For each draggable element, this attribute will provide its id, for example id when element is expected to have such attribute e.g. <span id='label-1'>example</span>.
container	Element	The first parent of all draggable elements -> provide a DOM element reference. Typically, a <div> or similar block-level element.
onElementRender	function	After drag events have been attached, other remaining action handlers still need to be attached. This callback function will allow initiator to bind additional events to draggable elements.
onDragEndCallback	function	After drag is done, this callback function notifies initiator that the item order within the draggable area has changed.

Menu

Menu panel is a DOM elements that shows a list of links. This class is responsible for creating and managing the menu.

Kind: global class

• Menu
  • new Menu(getLinks, onPinToggle, onPinOrderChange, getRecent)
  • .name ⇒ string
  • .idAttr ⇒ string
  • .render() ⇒ Element

new Menu(getLinks, onPinToggle, onPinOrderChange, getRecent)

Create a menu of navigation links. This menu panel is drawn dynamically by creating all menu elements programmatically on render(). The parent instantiating the menu will call render. Parent must then add the returned menu to DOM tree to display it to user.

Creating and rendering a menu of links

import Menu from './menu';

// construct a menu
const menu = new Menu(getLinks, onPinToggle, onPinOrderChange, getRecent);

// render the menu by appending it in document body
body.append(menu.render());

Returns: Object - Menu panel reference.

Param	Type	Description
getLinks	function	Function that returns all links.
onPinToggle	function	Callback function for when link is pinned/unpinned.
onPinOrderChange	function	Callback function for when links are re-ordered.
getRecent	function	Function that returns list of recent links.

Menu.name ⇒ string

Name of this menu view.

Kind: static property of Menu

Menu.idAttr ⇒ string

DOM attribute for getting the unique id of a link.

Kind: static property of Menu

Menu.render() ⇒ Element

Programmatically draws the menu panel and its links.

Kind: static method of Menu
Returns: Element - DOM element representing the menu.

Popup

This is the main class of the popup window, displayed when user clicks the extension icon. The Popup class is responsible for saving/restoring persistent data and rendering the menu panel. This popup view can easily be extended to display other content, but currently it renders the menu panel only.

Kind: global class

new Popup()

Instantiating a popup defaults to rendering a Menu.

Create a popup

new Popup();

RecentLinks

Recent links is a list of URL that were used "recently", based on configurable interval in Config.recentIntervalMillis. Unpinned recent links are displayed at the top of the menu. Recent links become stale after some time and are removed from the recent list.

Kind: global class

• RecentLinks
  • .isStillRecent(timestamp) ⇒ boolean
  • .addRecent(url, callback)
  • .getRecent(callback)

RecentLinks.isStillRecent(timestamp) ⇒ boolean

Determine if some timestamp still qualifies as recent.

Check if access is recent

const timestamp = Date.now(); // capture timestamp

// ... a few minutes later:
console.log(RecentLinks.isStillRecent(timestamp));

Kind: static method of RecentLinks
Returns: boolean - True if link is still valid relative to current time.

Param	Type	Description
timestamp	number	Milliseconds since epoch when link was last accessed.

RecentLinks.addRecent(url, callback)

Mark some URL as recently used. This will either add or update the link, depending on if it already exists as a recently used link.

Kind: static method of RecentLinks

Param	Type	Description
url	string	Link URL.
callback	function	Handler for when function is done.

RecentLinks.getRecent(callback)

Get all recent items. This method returns everything that qualifies as recent. It doesn't check if a link is pinned or not, and that should be done at display time to avoid duplication.

Kind: static method of RecentLinks

Param	Type	Description
callback	function	Result handler

Storage

Application storage for persisting data. Persisted data includes: pinned links (user preference) and recently used links (based on user behavior). This storage is stored in chrome sync storage, which is specific to current user, and will sync between devices if user is signed in and sync is enabled.

Kind: global class
See: Chrome storage

Required Permissions

This feature requires storage permission in extension manifest.

• Storage
  • .keys ⇒ Object
  • .get(keys, callback)
  • .save(key, value, callback)

Storage.keys ⇒ Object

List of storage keys. Only these keys can be stored in this storage.

Kind: static enum of Storage

Storage.get(keys, callback)

Get values from storage

Storage.get([Storage.keys.recent], items => {
  // do something with items
});

Kind: static method of Storage

Param	Type	Description
keys	string | Array.<string> | Object	Must be one of: A single key to get, list of keys to get, or a dictionary specifying default values (see description of the object). An empty list or object will return an empty result object. Pass in null to get the entire contents of storage.
callback	function	Function to call with result.

Storage.save(key, value, callback)

Save value to storage

Storage.save(Storage.keys.recent, recentObj, callback);

Kind: static method of Storage

Param	Type	Description
key	string	One of keys.
value	*	Value to save.
callback	function	Called after save operation has completed.

.Config : Object

Application configurations.

Kind: static constant
Read only: true

• .Config : Object
  • .SVGIcons : enum
  • .ContextMenuOptions : enum
  • .recentIntervalMillis : number

Config.SVGIcons : enum

App icons svg paths.

Kind: static enum of Config

Config.ContextMenuOptions : enum

List of options to display in the context menu. Links will open in new tab when width/height (ww/wh) are not specified. Otherwise, links will open in a window of specified size.

Kind: static enum of Config

Config.recentIntervalMillis : number

When a link clicked within last X milliseconds, it is considered "recently used".

Kind: static constant of Config