Skip to content

Documentation

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

Initialize background
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

Creating a new draggable
1
2
3
4
5
6
new Draggable(
   "id",
   containerElement,
   onElementRender(element: Element) { ... },
   onDragEndCallback(ids: Array<String>) { ... }
);

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

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

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

Name of this menu view.

Kind: static property of Menu

DOM attribute for getting the unique id of a link.

Kind: static property of Menu

Programmatically draws the menu panel and its links.

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

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

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

Create popup
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()

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

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

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.

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.

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

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

Check if recent
1
2
3
4
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

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

Get values from storage
1
2
3
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

Save value to storage
Storage.save(Storage.keys.recent, recentObj, callback);

.Config : Object

Application configurations.

Kind: static constant
Read only: true

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