Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>You won't be able to set the URL of a popover to a web URL (it has to be a <code>safari-extension</code> URL), but you can have a popover that contains nothing but an iframe, and tell the popover to load the URL in the iframe.</p> <p>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 <a href="https://developer.apple.com/library/safari/documentation/Tools/Conceptual/SafariExtensionGuide/AddingPopovers/AddingPopovers.html#//apple_ref/doc/uid/TP40009977-CH21-SW1" rel="nofollow">the docs</a> if you need a refresher).</p> <pre><code>safari.application.addEventListener("command", function (evt) { if (evt.command == 'DoAddSymbaloo') { document.querySelector('iframe').src = evt.userInfo; // now let's show the popover } }, false); </code></pre> <p>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 <code>showPopover</code> 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:</p> <pre><code>var myToolbarItem = safari.extension.toolbarItems.filter(function (ti) { return ti.popover == safari.self; })[0]; </code></pre> <p>This just says, "Find the toolbar item whose popover is the same as me, and assign that toolbar item to variable <code>myToolbarItem</code>."</p> <p>If you wish, and if the popover will only be attached to one toolbar item, instead of assigning the found toolbar item to <code>myToolbarItem</code>, you could set it as a property of the popover object, which from the popover's point of view is <code>safari.self</code>: </p> <pre><code>safari.self.toolbarItem = safari.extension.toolbarItems.filter(function (ti) { return ti.popover == safari.self; })[0]; </code></pre> <p>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.</p> <p>Now, combining these things:</p> <pre><code>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); </code></pre> <p>(Edited for simplification of final script.)</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload