Safari 扩展中的弹出窗口

Question

我正在尝试构建我的第一个 Safari 扩展，但我对一些基本概念感到困惑。

第一个障碍是从工具栏按钮打开弹出窗口，就像 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 打开“弹出”窗口，但据我所知，它所能做的就是打开一个窗口。我没有看到任何用于设置尺寸等属性的工具。如果有的话，我会走这条路，因为你的弹出窗口将受到 CSS 的保护，因为它位于自己的窗口中。

Answer 3

我认为在 Safari 下它被称为弹出窗口，这就是你的意思吗？

我注意到两件事：

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