How to show a Safari Extension popover programmatically

Question

I'm trying to write a Safari extension that consists of a button on the main toolbar with a popover tied to it, and a contextual menu item. The basic feel is modeled after the feel of the 1Password extension.

One of the jobs of the popover is to allow a person to log in. I'm also conditionally changing the action of the contextual menu item, and if a who person isn't logged in clicks the menu item I would like to show the popover allowing them to log in, but I can't find a way to do this in the developer guides.

How do I "show" a popover?

Answer 1

If you only have one toolbar item and one popover (and never plan to add more), then it's just one line. Assuming you've already assigned the popover to the toolbar item in Extension Builder, you can just use:

safari.extension.toolbarItems[0].showPopover();

But if you have more than one popover and (potentially) more than one toolbar item, here's a generalized function to open a popover, specified by its identifier, under the specified toolbar item in the active browser window:

function showPopover(popoverId, toolbarItemId) {
    var toolbarItem = safari.extension.toolbarItems.filter(function (tbi) {
        return tbi.identifier == toolbarItemId && tbi.browserWindow == safari.application.activeBrowserWindow;
    })[0];
    var popover = safari.extension.popovers.filter(function (po) {
        return po.identifier == popoverId;
    })[0];
    toolbarItem.popover = popover;
    toolbarItem.showPopover();  
}