تكرار إجراءات متصفح Google Chrome Popup في امتداد Firefox

Question

توفر إجراءات متصفح Chrome تأثيرًا منبثقًا لطيفًا بشكل افتراضي.

تمت إزالة رابط صورة Imageshack الميت

• يحوم فوق أيقونة شريط الأدوات يوفر تأثيرًا رائعًا.

• يعرض النقر فوق أيقونة شريط الأدوات رسومًا رسمية لطيفة تفتح ملف HTML المنبثق.

• يتوافق المنبثقة مع الزر الذي يتم الضغط عليه.

• النقر فوق أيقونة شريط الأدوات مرة أخرى يتلاشى منببوب المنبثقة.

أي أفكار حول كيفية تقريب هذا التأثير مع امتدادات Firefox؟ هل حقق أي شخص بنجاح شيئًا مشابهًا لهذا التأثير؟

شكرًا.

Answer 1

في حال كان أي شخص يبحث عن هذا ومحاولة اكتشاف الإجابة ، فإن استخدام لوحة داخل شريط الأدوات في ملف Browser.xul بشكل جيد بالنسبة لي.

Answer 2

لكل من يبدأ للتو بأول امتداد Firefox كما فعلت هنا هو رمز مثال:

YourextName Chrome Content Browser.xul

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://yourextname/skin/toolbar.css" type="text/css"?>

<overlay id="yourextname_overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <popupset>
        <menupopup id="yourextname_menu_popup">
            <menuitem label="Website" oncommand="gBrowser.selectedTab = gBrowser.addTab('http://www.your-website.com/');" />
            <menuseparator />
            <menuitem label="Options" oncommand="window.open('chrome://yourextname/content/options.xul', 'Options', 'dialog,chrome,modal,titlebar,toolbar,centerscreen=yes');" />
        </menupopup>

        <panel id="yourextname_popup" noautohide="false" noautofocus="true">
            <label control="vvvname" value="Name:"/><textbox id="vvvname"/>
        </panel>
    </popupset>

    <toolbarpalette id="BrowserToolbarPalette">
        <toolbarbutton id="yourextname_toolbar_button" class="toolbarbutton-1" context="yourextname_menu_popup" oncommand="document.getElementById('yourextname_popup').openPopup(document.getElementById('yourextname_toolbar_button'), 'after_start', 0, 0, false, false);" label="button name" tooltiptext="tooltip" />
    </toolbarpalette>
</overlay>

---

YourextName Skin Toolbar.css
سيؤدي هذا إلى إضافة أيقونة إلى زر شريط الأدوات:

#yourextname_toolbar_button {
    list-style-image:url(chrome://yourextname/skin/icon_024.png);
}

toolbar[iconsize="small"] #yourextname_toolbar_button {
    list-style-image:url(chrome://yourextname/skin/icon_016.png);
}

---

YourextName chrome.manifest

content yourextname chrome/content/
overlay chrome://browser/content/browser.xul chrome://yourextname/content/overlay.xul

skin    yourextname classic/1.0 skin/
style   chrome://global/content/customizeToolbar.xul chrome://yourextname/skin/toolbar.css

---

ملاحظة: تأكد من استبدال جميع سلاسل "YouRexextName" بشيء فريد ، أفضل مع اسم التمديد الخاص بك.