Question

我正在尝试建立我的第一个野生动物园扩展，并且我对一些基本概念感到茫然。

第一个障碍是从工具栏按钮打开弹出窗口，就像Ebay Safari扩展一样。

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

Answer 1

阅读本文：http://net.tutsplus.com/tutorials/other/how-to-create-a-safari-extension-from-scratch/

它描述了当按下工具栏按钮时如何发生某些事情，你只需将它放在中间：

<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 2

据我所知，Safari不允许我们按照Chrome的方式创建“弹出窗口”。对于我的Safari扩展，我使用jQueryUI来创建我的弹出窗口。您也可以使用YUI或Mootools。在拆分eBay和Twitter扩展时，我发现他们正在使用iframe。他们是如何实现它我不知道，因为jquery不允许你修改iframe的内容（如果我错了，请纠正我）。

但要回答您的问题，您的按钮会将事件发送到注入的脚本。该脚本可以具有与此类似的代码：

$('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; 
        }
    }
}

这是一个非常基本的例子。在我的工作室中有一个工具栏和许多其他东西。此外，您必须拥有真正特定的CSS规则，以保护您的弹出窗口的CSS免受世界上每个网站的破坏。

我还考虑过使用global.html打开“弹出窗口”窗口，但据我所知，它只能打开一个窗口。我没有看到任何用于设置大小等属性的工具。如果有，我会去那条路线，因为你的弹出窗口将受到保护，因为它在自己的窗口中。

Answer 3

我认为在Safari下它被称为popover，这就是你的意思吗？

我发现了两件事：

如果没有设置命令（在工具栏项上），则单击工具栏按钮时会自动显示弹出窗口
如果有命令集，则用户需要点击按住工具栏按钮，直到显示弹出框。

Safari扩展中的弹出窗口

3 个答案: