Source docs

Classes

Background

This module sets up all functionality and event handlers in the background context of the extension. Currently, this module sets up extension context menu. Instantiate background to activate this functionality.

Dragging

Makes child nodes of some DOM element draggable, using native HTML drag and drop.

Menu

Menu panel is a DOM elements that shows a list of 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.

Popup

This is the main class for the popup window that shows when user clicks extension icon. This class is responsible for:

1. saving/restoring persistent data and
2. rendering the menu panel.

This popup view can easily be extended to display other content, but currently it renders the menu panel only.

Background

This module sets up all functionality and event handlers in the background context of the extension. Currently, this module sets up extension context menu. Instantiate background to activate this functionality.

Kind: global class

new Background()

Initialize background scripts.

Example

new Background();

Dragging

Makes child nodes of some DOM element draggable, using native HTML drag and drop.

Kind: global class

new Dragging(idAttribute, container, onElementRender, onDragEndCallback)

Create a new draggable.

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.
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.

Example

new Draggable(
   "id",
   containerElement,
   onElementRender(element: Element) { ... },
   onDragEndCallback(ids: Array<String>) { ... }
);

Menu

Menu panel is a DOM elements that shows a list of 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.

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.

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.

Example

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

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.
Access: public
Example

// render the menu, then append to document body
body.append(menu.render());

Popup

This is the main class for the popup window that shows when user clicks extension icon. This class is responsible for:

1. saving/restoring persistent data and
2. 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()

Create a popup

Example

new Popup()

.ContextMenu

This module adds custom options to Chrome browser action context menu

Kind: static class
See: chrome.contextMenus API

Info

This feature requires contextMenus permission in extension manifest.

• .ContextMenu
  • .initialize()
  • .generateOption(key, value)
  • .generateUrl(option)
  • .contextMenuOnClick(info)

ContextMenu.initialize()

Initialize extension context menu

Kind: static method of ContextMenu
Example

ContextMenu.initialize();

ContextMenu.generateOption(key, value)

Make context menu option.

Kind: static method of ContextMenu

Param	Type	Description
key	string	Option key/id.
value	Object
value.title	string	Option title.
value.id	string | number	Option id.
value.parentId	string | number	Option parent id.

ContextMenu.generateUrl(option)

Generates an absolute url for a menu option.

Kind: static method of ContextMenu

Param	Type	Description
option	Object
option.url	string	URL of context menu link.

ContextMenu.contextMenuOnClick(info)

Handles context menu option click.

Kind: static method of ContextMenu
See

• onClicked
• OnClickData

Param	Type	Description
info	Object
info.menuItemId	string | number	The ID of the menu item that was clicked.

.Helpers

This module contains various, static menu panel helper methods.

Kind: static class

• .Helpers
  • .unpinnedItemIcon ⇒ string
  • .pinnedItemIcon ⇒ string
  • .generateIcon(icon, className) ⇒ string
  • .localizedSort(linkList) ⇒ Array.<Array.<String>>
  • .translateLabel(name) ⇒ string
  • .appendDivider(panel)

Helpers.unpinnedItemIcon ⇒ string

Generate SVG icon for unpinned link.

Kind: static property of Helpers
Returns: string - Icon element as HTML.

Helpers.pinnedItemIcon ⇒ string

Generate SVG icon for pinned link.

Kind: static property of Helpers
Returns: string - Icon element as HTML.

Helpers.generateIcon(icon, className) ⇒ string

Given an icon name, this function returns SVG element.

Kind: static method of Helpers
Returns: string - Icon element as HTML string.

Param	Type	Description
icon	SVGIcons	One of
className	string	Element class.

Helpers.localizedSort(linkList) ⇒ Array.<Array.<String>>

Sort a list of links by their localized label.

Kind: static method of Helpers
Returns: Array.<Array.<String>> - Sorted list of tuples, where

• first element is localized label
• second element is the original link

Param	Type	Description
linkList	Array.<string>	List of links.

Helpers.translateLabel(name) ⇒ string

Get the translated dictionary value for some link.

Kind: static method of Helpers
Returns: string - Translated label.

Param	Type	Description
name	string	Link name (dictionary key).

Helpers.appendDivider(panel)

Create a horizontal menu divider element and append it to the end of the provided panel element (in place). This method returns nothing. After calling this method panel will have a divider as its last DOM child.

Kind: static method of Helpers

Param	Type	Description
panel	Element	DOM element where to append the divider.

.RecentLinks

Recent links is a list of URL that were used recently (based on config). They become stale after some time and then get removed from the recent list.

Kind: static class

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

RecentLinks.isStillRecent(timestamp) ⇒ boolean

Determine if some timestamp still qualifies as "recent".

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.

Example

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

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

RecentLinks.addRecent(url, callback)

Mark some URL as recently used. 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; note that this methods returns everything that is "not-stale". It doesn't check if link is pinned or not. That should be done at display time.

Kind: static method of RecentLinks

Param	Type	Description
callback	function	Result handler

.Storage

Application storage for persisting data. Persisted data includes:

1. pinned links (user preference)
2. 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: static class
See: Chrome storage

Info

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 some property from storage.

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.

Example

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

Storage.save(key, value, callback)

Save some property in storage.

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.

Example

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

.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