Important

This documentation is deprecated, and only kept here to support users of browser extension APIs. If you are using Trigger.io for iOS or Android, see https://trigger.io/docs/.

button: Toolbar button

Platforms: Browser

Config

The button configuration controls the appearance and function of toolbar icons in the browsers. With this directive, you can specify a HTML file which will be displayed when the button is clicked, a default button icon as well as platform-specific icons.

{
    "modules": {
        "button": {
            "default_popup": "popup.html",
            "default_title": "Button Title",
            "default_icon": "my-default-icon.ico",
            "default_icons": {
                "firefox": "my-icon-for-firefox.ico"
            }
        }
    }
}

• default_popup should refer to a local HTML file, included in your app, which will be displayed after the button is clicked; for more information, see part I of the tutorial
• default_title this will show as the tooltip text when users hover over the toolbar button. It is a required field for IE.
• default_icon should refer to a local image file, included in your app, to be used as the button icon
• default_icons allows you to override the default_icon icon, one platform at a time: the object keys should be one or more of chrome, firefox, safari or ie

Important

Internet Explorer requires you to override the default_icon with a 16x16 bitmap in .ico format.

API

Adding and manipulating a toolbar button near the browser's address bar.

setIcon

Platforms: Browser only

Sets the icon for the toolbar button.

button.setIcon(url, success, error)

Arguments:

• url (string) -- the URL of the icon
• success (function()) -- callback to be invoked when no errors occur
• error (function(content)) -- called with details of any error which may occur

setURL

Platforms: Browser only

Sets the path to the HTML page that should be opened when the toolbar button is clicked.

button.setUrl(url, success, error)

Arguments:

• url (string) -- relative URL to the HTML to set as the toolbar button popup
• success (function()) -- callback to be invoked when no errors occur
• error (function(content)) -- called with details of any error which may occur

onClicked.addListener

Platforms: Browser only

Sets a function to be executed when the toolbar button is clicked.

button.onClicked.addListener(callback)

Arguments:

• callback (function()) -- function to be executed when the toolbar button is clicked.

setBadge

Platforms: Browser only (Not supported on Internet Explorer)

Sets a number to appear as a notification badge on the toolbar button.

button.setBadge(number, success, error)

Arguments:

• number (number) -- number to display as badge
• success (function()) -- callback to be invoked when no errors occur
• error (function(content)) -- called with details of any error which may occur

setBadgeBackgroundColor

Platforms: Browser only (Not supported on Safari or Internet Explorer)

Sets the background color for the badge.

button.setBadgeBackgroundColor(color, success, error)

Arguments:

• color (array) -- an array of four integers in the range [0,255] that make up the RGBA color of the badge. For example, opaque red is [255, 0, 0, 255].
• success (function()) -- callback to be invoked when no errors occur
• error (function(content)) -- called with details of any error which may occur

setTitle

Platforms: Browser only

Set the tooltip text for a toolbar button.

button.setTitle(title, success, error)

Arguments:

• title (string) -- title text to set as the toolbar tooltip
• success (function()) -- callback to be invoked when no errors occur
• error (function(content)) -- called with details of any error which may occur