Прочитав большинство тем по созданию расширения\дополнения  для Firefox, я не нашел как создать popup окно с кнопкой в панели. Т е мне нужно тестовое дополнение при нажатие на иконку выпадет страница, к примеру popup.html. Чтобы было понятно, что мне надо, я вставляю картинку с тестовым расширением для Оперы. Мне нужно точно такое для Firefox'a. Собственно вопрос, как такое реализовать?

devarts
Стандартный PopupNotification нельзя привязать к произвольному элементу UI - они все привязываются к элементам внутри notification-popup-box. Если надо привязаться к элементам вне этого notification-popup-box, то вам надо делать свою реализацию (с нуля, фактически) на основе panel.

Если вас не затруднит, можете чуть подробней написать с примером, или показать  похожее расширение.

Как тогда сделать panel кнопкой и поставить эту кнопку в панели навигации, т е на уровне строки ввода адреса?
Что в этом коде надо исправить? А то по умолчанию, внизу появляться длинная кнопка.

<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<button label="Details" type="panel">
  <panel id="search-panel">
    <label control="name" value="Name:"/>
    <textbox id="name"/>
  </panel>
</button>

</window>

devarts
Так у вас же код для обычной кнопки, расположенной непосредственно в окне. Если вы хотите, чтобы было так, как на скриншоте в стартовом постинге, надо делать так:
в xul:

<toolbarpalette id="BrowserToolbarPalette">
  <toolbarbutton id="panelbutton-sample" label="Panel&amp;button sample" type="panel"
      class="toolbarbutton-1 chromeclass-toolbar-additional">
    <panel id="panelbutton-search-panel">
      <label control="panelbutton-search-text" value="Name:"/>
      <textbox id="panelbutton-search-text"/>
    </panel>
  </toolbarbutton>
</toolbarpalette>

- кнопка будет доступна через функционал настройки панелей управления. Только не забудьте в chrome.manifest добавить

style chrome://global/content/customizeToolbar.xul chrome://myextension/skin/myextension.css

#panelbutton-sample {
  list-style-image: url("chrome://myextension/skin/sample.png");
  -moz-box-orient: horizontal;
}
#panelbutton-search-panel {
  margin-top: 3px;
  border: 1px solid grey;
  border-radius: 3px;
}

и результат:

Да, если нужна панель со стрелкой - как и было в стартовом постинге - то нужно сделать так: в xul непосредственно для панели добавить атрибут type="arrow", из css убрать всё, что относится к панели. Получится примерно вот такое:

Немного, не могу понять что имеется ввиду под названием myextension и myext в строчке style chrome://global/content/customizeToolbar.xul chrome://myextension/skin/myext ?

Итак, чтобы было все ясно, то тогда я выложу код:

дерево каталогов:

/chrome/*
/chrome/content/sample.xul
/skin/*
/skin/icon.jpg
/skin/style.css
/chrome.manifest
/install.rdf

install.rdf

<?xml version="1.0"?>
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
     xmlns:em="http://www.mozilla.org/2004/em-rdf#">

    <Description about="urn:mozilla:install-manifest">

        <em:id>first@first.first</em:id>
        <em:name>first_extension</em:name>
        <em:version>1.1</em:version>
        <em:description>testing first a simple extension</em:description>
        <em:creator>devarts</em:creator>
        <em:homepageURL>http://none</em:homepageURL>
        <em:iconURL>chrome://skin/icon.jpg</em:iconURL>
        <!-- optional items -->
        <em:unpack>true</em:unpack> <!-- we reference in-page javascript that's packaged in the .xpi -->
        <em:type>2</em:type> <!-- type=extension -->

                <!-- Firefox -->
        <em:targetApplication>
            <Description>
                <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
                <em:minVersion>3.6</em:minVersion>
                <em:maxVersion>6.0</em:maxVersion>
            </Description>
        </em:targetApplication>
        <!-- Flock -->
        <em:targetApplication>
          <Description>
            <em:id>{a463f10c-3994-11da-9945-000d60ca027b}</em:id>
            <em:minVersion>3.6</em:minVersion>
            <em:maxVersion>6.0</em:maxVersion>
          </Description>
        </em:targetApplication>
    </Description>
</RDF>

chrome.manifest

content     sample    chrome/content/
style chrome://global/content/customizeToolbar.xul chrome://first_extension/skin/style
overlay chrome://browser/content/browser.xul chrome://sample/content/sample.xul

sample.xul

<?xml version="1.0"?>
<overlay id="sample"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<toolbarpalette id="BrowserToolbarPalette">
  <toolbarbutton id="panelbutton-sample" label="Panel&amp;button sample" type="arrow"
      class="toolbarbutton-1 chromeclass-toolbar-additional">
    <panel id="panelbutton-search-panel">
      <label control="panelbutton-search-text" value="Name:"/>
      <textbox id="panelbutton-search-text"/>
    </panel>
  </toolbarbutton>
</toolbarpalette>
</overlay>

style.css

#panelbutton-sample {
  list-style-image: url("chrome://first_extension/skin/icon.jpg");
  -moz-box-orient: horizontal;
}
#panelbutton-search-panel {
  margin-top: 3px;
  border: 1px solid grey;
  border-radius: 3px;
}

Но этот код не отображает желаемый результат.

И как мне внутренность  этого окна (там где Name: 123)

сделать html страницей?
Или  sample.xul -это и есть модифицированная под firefox html страницa,т е

<toolbarpalette id="BrowserToolbarPalette">
  <toolbarbutton id="panelbutton-sample" label="Panel&amp;button sample" type="panel"
      class="toolbarbutton-1 chromeclass-toolbar-additional">
    <panel id="panelbutton-search-panel">
ЗДЕСЬ Я МОГУ ВСТАВИТЬ СВОЙ КОД, КОТОРЫЙ  ВСТАВЛЯЕТСЯ  В ОБЫКНОВЕННУЮ HTML СТРАНИЦУ ?????
    </panel>
  </toolbarbutton>
</toolbarpalette>

hydrolizer, а где можно найти мануал на русском языке с такими или похожими примерами? А то кроме создания строки "Hello world", ничего дельного я не нашел

devarts
По пунктам:

myextension - package name расширения, задаваемый в chrome.manifest:

content     sample    chrome/content/

style chrome://global/content/customizeToolbar.xul chrome://sample/skin/myextension.css

Если у расширения нет домашней страницы, просто уберите тэг homepageURL. Тэг unpack нужен для распаковки xpi в папку установки; если расширение не содержит бинарных компонентов, иконок платформенного характера, словарей, и проч., то в рабочей версии этот тэг надо убрать. При разработке - да, с ним удобнее, можно править код прямо по месту установки. Тэги, указывающие на ресурсы расширения, должны указывать именно на ресурсы расширения - в вашем случае тэг iconURL должен содержать chrome://sample/skin/icon.jpg.

См. выше.

Для list-style-image укажите корректный URL, указывающий на ресурс внутри вашего расширения.

После первого запуска вам надо будет в режиме настройки панелей вытащить нужную кнопку на панель инструментов - тогда всё будет видно.

Можете. Только для этого надо импортировать html namespace:

<overlay id="sample"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    
xmlns:html="http://www.w3.org/1999/xhtml"
>

и для элементов html-разметки указывать имя тэга с префиксом, идентичным алиасу html namespace, заданному при объявлении последнего:

<html:h2>heading 2</html:h2>

В первую очередь - на MDC. Вам, я думаю, нужно начать с этого и этого (можете сразу заглянуть сюда). Много полезных примеров есть в этом разделе MDC, но к нему имеет смысл обращаться, когда уже в общем разберетесь, что к чему.
На русском языке неплохая вводная для начинающих есть на xul.ru.

Делал все как вы написали, вот что у меня вышло

Как мне убрать этот набор иконок и поставить свою?

И можно ли все-таки содержимое окна сделать отдельной страницей html ?

devarts
Запакуйте свое расширение в архив или xpi, и выложьте его на местный файлообменник, а я посмотрю - так будет проще и быстрее.

Можно. Внутрь панели помещаете элемент browser, в него загружаете вашу страницу. Лежать она может в т.ч. и внутри расширения - тогда обращение к ней будет по chrome URL.

hydrolizer
Вот мое расширение. И как там еще сделать размер окна, элементу browser я присвоил id, и в css задал width и height, но оно почему-то не работает

devarts
В общем, главная ошибка - вы в xul не прописали используемый css. Там должна была быть такая инструкция:

<?xml-stylesheet href="chrome://sample/skin/style.css" type="text/css"?>

Далее, в chrome.manifest также нужно было прописать

skin  sample  classic/1.0  chrome/skin/

Расширение с внесенными исправлениями - здесь

hydrolizer, спасибо за помощь.
У меня еще возникла к вам немного вопросов.
Если вставить iframe, то содержимое во фрейме показывается только один раз, при следующем клике по  иконке выскакивает чистое окно.
Как сюда еще прикрепить javascript? И можно ли во XUL вставлять Flash, а именно флеш плеер?

Я выше писал:

C iframe ситуация та же самая. Причины описанного я пока не понял.

Ну, например, вот здесь: https://developer.mozilla.org/en/XUL_Tu … t_Handlers описано, как это делается. Вообще, это самые азы, и если по ним есть вопросы, то лучше обратиться к учебникам/туториалам. Еще можно посмотреть здесь (и советую ознакомиться со всем курсом по ссылке - это перевод книги Rapid Application Development with Mozilla авторства Nigel McFarlane). Ну и, наконец, на АМО есть такая штука, как создатель дополнений, позволяющая быстро сгенерить каркас дополнения со всеми минимально необходимыми включениями - попробуйте ей воспользоваться, посмотрите, что куда прописывается, как организована структура дополнения - контент, стили, локализация, и проч.

Мне этого делать не доводилось, но, думаю, это вполне решаемо через вставку плейера в html-страницу, и отображение страницы с помощью browser/iframe.

hydrolizer
как у вас получается? что с iframe или browser....слежу за темой!