Google 크롬 브라우저 동작 복제 Firefox 확장에서 팝업 효과

Question

크롬 브라우저 동작은 기본적으로 정말 멋진 팝업 효과를 제공합니다.

Dead 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

---

참고 : 모든 "YourextName"문자열을 확장 이름과 가장 좋은 것으로 바꾸십시오.