Всплывающие окна в расширении Safari - PullRequest
Новая
       2

Всплывающие окна в расширении Safari

2 голосов
/ 11 февраля 2011

Я пытаюсь построить свое первое расширение для сафари, и я в растерянности от нескольких базовых концепций.

Первым препятствием является открытие всплывающего окна с помощью кнопки на панели инструментов, как расширение Ebay Safari.

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

Ответы [ 3 ]

3 голосов
/ 11 февраля 2011

Читать это: 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>
0 голосов
/ 23 сентября 2011

Я думаю, что под Safari это называется popover, вот что вы имеете в виду?

две вещи, которые я заметил:

  1. , если не задана команда (на элементе панели инструментов)всплывающее окно автоматически отображается при нажатии кнопки на панели инструментов
  2. Если есть набор команд, пользователю необходимо нажать и удерживать нажатой кнопку панели инструментов , пока не отобразится всплывающее окно.
0 голосов
/ 28 февраля 2011

Насколько я знаю, 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, так как оно находится в своем собственном окне.

...