2

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/

3 Answers 3

3

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> 
1
  • It actually took a whole combination of things. Ill post the answer a little later.
    – Peter
    Feb 11, 2011 at 19:03
0

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.

2
  • 1
    Peter, can your iframe dispatch and receive messages from global.html?
    – gdanko
    Mar 1, 2011 at 22:54
  • this is wrong. Safari does allow you to create popups. You need to add a button and then you can assign a pop up to that button. Jun 5, 2015 at 8:56
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.