Create a Popover in safari extension after click contextual menu

Question

Hi There Best Collegue,

Currently im creating a safari bookmarker and run to the following problem. I've create a Contextual menu Item and want to behave as follow:

If the user right click on a link in a page and clicks to this contextual item it should get the href attribute of this link and open a popover within there a iframe.

How can i solve this issue?

Right now i already get the href attribute but how can i open a popover?

my endscript: default.js

document.addEventListener("contextmenu", handleContextMenu, false);

function handleContextMenu(event){  
    if(event.target.nodeName === "A"){
        var url = event.target.href;
        safari.self.tab.setContextMenuEventUserInfo(event, url);
    }
}

my global.html

safari.application.addEventListener("command", performCommand, false);

function performCommand(event) {
if (event.command !== "DoAddSymbaloo")
        return;

        var u = event.userInfo;

}

How can i fix this? Tnx in advance.

Answer 1

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