Safari扩展中的弹出框

问题描述：

我试图构建我的第一个safari扩展，并在一些基本概念上损失了Im。Safari扩展中的弹出框

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

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

答

据据我所知，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影响，因为它在它自己的窗口中。

答

阅读：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>

它实际上是综合了一些东西。稍后我会发布答案。 – Peter 2011-02-11 19:03:42

有没有代码工作？ – Charlie 2011-11-08 17:37:30

答

我觉得在Safari下它叫popover，那是什么意思？

两件事情，我注意到：

如果没有命令集（工具栏上的项目），将酥料饼单击工具栏按钮
时，如果有一个命令集，则自动显示用户需要点击并按保持按下工具栏按钮，直到弹出显示。

Safari扩展中的弹出框

相关推荐