How to Open Safari Extension Toolbaritem Popover Programmatically

How to show a Safari Extension popover programmatically

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();  
}

How to open new Safari Tab when user perform actions in Popover menu . ?

CFURLRef httpURL = CFURLCreateWithString(kCFAllocatorDefault, CFSTR("http://"), NULL);
NSLog(@"%@", LSCopyDefaultApplicationURLForURL(httpURL, kLSRolesAll, nil));

NSString *strDefaultBrowser = [NSString stringWithFormat:@"%@",LSCopyDefaultApplicationURLForURL(httpURL, kLSRolesAll, nil)];

[[NSWorkspace sharedWorkspace] openURL:[NSURL URLWithString:websiteName]];

Create a Popover in safari extension after click contextual menu

You won't be able to set the URL of a popover to a web URL (it has to be a safari-extension URL), but you can have a popover that contains nothing but an iframe, and tell the popover to load the URL in the iframe.

The easiest way to do this is to have a listener for "command" events in the popover itself (which you can create using either the Extension Builder or the extension API; read the docs if you need a refresher).

safari.application.addEventListener("command", function (evt) {
    if (evt.command == 'DoAddSymbaloo') {
        document.querySelector('iframe').src = evt.userInfo;
        // now let's show the popover
    }
}, false);

Now you have to show the popover. In order for a popover to become visible at all, it needs to be attached to a toolbar item. I'm going to assume you've already done this, using either the Extension Builder or the API. The way to show a popover programmatically is to use the showPopover method on its toolbar item. So first you have to find the toolbar item that you've attached the popover to. From the popover's script:

var myToolbarItem = safari.extension.toolbarItems.filter(function (ti) {
    return ti.popover == safari.self;
})[0];

This just says, "Find the toolbar item whose popover is the same as me, and assign that toolbar item to variable myToolbarItem."

If you wish, and if the popover will only be attached to one toolbar item, instead of assigning the found toolbar item to myToolbarItem, you could set it as a property of the popover object, which from the popover's point of view is safari.self:

safari.self.toolbarItem = safari.extension.toolbarItems.filter(function (ti) {
    return ti.popover == safari.self;
})[0];

That will provide a convenient way to get the toolbar item associated with the popover from anywhere in the script or from the global page.

Now, combining these things:

safari.self.toolbarItem = safari.extension.toolbarItems.filter(function (ti) {
    return ti.popover == safari.self;
})[0];

safari.application.addEventListener("command", function (evt) {
    if (evt.command == 'DoAddSymbaloo') {
        document.querySelector('iframe').src = evt.userInfo;
        safari.self.toolbarItem.showPopover();
    }
}, false);

(Edited for simplification of final script.)

---

Related Topics