Popups in a Safari extension

Question

Im trying to build my first safari extension and Im at a loss on a few basic concepts.

The first hurdle is making a popup window open from a toolbar button, just like the Ebay Safari extension.

http://anywhere.ebay.com/browser/safari/welcome/

Answer 1

As far as I know, Safari does not allow us to create a "popup" the way Chrome does. For my Safari extension I am using jQueryUI to create my popup. You can also use YUI or Mootools. In taking apart the eBay and Twitter extensions I see they're using an iframe. Just how they're implementing it I don't know since jquery doesn't allow you to modify the contents of an iframe (correct me if I'm wrong here).

But to answer your question, your button will send an event to an injected script. That script can have code similar to this:

$('body').append('<div id="mypopup">');

var myPopup = $('#mypopup').dialog({
    'autoOpen' : false ,
    'draggable' : false,
    'modal' : false,
    'resizable' : false,
    'title' : 'My Popup'
});

function messageHandler(msgEvent) {
    var messageName = msgEvent.name;
    var messageData = msgEvent.message;
    if (messageName === 'buttonPushed') {
        if (myPopup.dialog('isOpen')) {
            myPopup.dialog('close');
            return;
        }

        $('#mypopup').children().empty();   // Clear out any crap should it exist
        $('#mypopup').append(someHTML);
            myPopup.dialog('open');
            return; 
        }
    }
}

This is a very basic example. In mine there is a toolbar, and a host of other things. Plus you have to have REALLY specific CSS rules to protect your popup's CSS from being clobbered by every site in the world.

I have also thought about using global.html to open the "popup" window but as far as I can tell, all it can do is open a window. I don't see any facilities for setting attributes like size, etc. If there are, I'd go that route since your popup would then be protected from CSS as it's in its own window.

Answer 2

Read this: http://net.tutsplus.com/tutorials/other/how-to-create-a-safari-extension-from-scratch/

It describes how to have something happen when a toolbar button is pressed, you would just put it the middle of this:

<script>  
// Set up the Listener  
safari.application.addEventListener("command", performCommand, false);  

// Function to perform when event is received  
function performCommand(event) {  
    // Make sure event comes from the button  
    if (event.command == "open-nettuts") {  


    **YOUR FUNCTION**


    }  
}  
</script> 

Answer 3

I think under Safari its called a popover, thats what you mean?

two things that i noticed:

1. if there is no command set (on the toolbar item), the popover automatically displays when clicking the toolbar button
2. If there is a command set, then the user need to click and keep the toolbar button pressed until the popover shows.