如何處理Mozilla Firefox瀏覽器插件的偏好和界面？

Question

我想問一些問題： 我應該怎麼做才能在mozilla firefox上創建界面並處理所有這些界面。 界面，我要讓是：

1. 狀態欄，包括標籤和圖片的，如果右鍵菜單上的狀態欄將顯示活動的插件（插件菜單未激活隱藏）和偏好。

2. 當前網頁上點擊右鍵，在瀏覽器上會顯示一個上下文菜單「terjemahkan」，左上角有圖片。

3. 當我選擇在工具菜單>>插件的選項按鈕，用戶可以使用單選按鈕

4. 調整這些插件的設置，選擇右鍵菜單時，然後在瀏覽器窗口會顯示所期望的結果

，我所做的步驟是：

我被做了狀態欄，但爲什麼我要照片時，我爲做出不出現執導。以及在上下文菜單中，圖像不會像通常一樣出現在菜單的左上角。

<?xml version="1.0"?> 

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

<!-- 
    <script type="application/x-javascript" src="chrome://translator/content/script.js" /> 
    <script type="application/x-javascript" src="chrome://translator/content/interface.js" /> 

--> 
    <!-- menu klik kanan pada halaman web --> 

    <popup id="contentAreaContextMenu"> 
     <menuseparator /> 
     <menuitem id="intransContextMenuPage" 
     image="chrome://inlinetrans/skin/imagesOn_kecil.png" 
     label="terjemahkan dengan intrans" 
     oncommand="inline.script.getText()" /> 
    </popup> 

    <!-- pilihan menu pada status bar --> 

<popupset> 
    <menupopup id="intransContextMenu"> 
    <menuitem label="intrans nonaktif" 
    image="chrome://inlinetrans/skin/imagesOff_kecil.png" 
    hidden="true"/> 
    <menuitem label="intrans aktif" 
    image="chrome://inlinetrans/skin/imagesOn_kecil.png" 
    hidden="false"/> 
    <menuseparator /> 
    <menuitem label="preferensi"/> 
    </menupopup> 
</popupset> 

<!-- ========================================= --> 

<!-- statusbar--> 

    <statusbar id="status-bar"> 
     <statusbarpanel id="status-bar-intrans" 
     image="chrome://inlinetrans/skin/imagesOn_kecil.png" 
     label="intrans" 
     context="intransContextMenu" 
     tooltiptext="intrans versi 1.0" 
     /> 
    </statusbar> 
</overlay> 

UI選項首

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

    <!DOCTYPE overlay SYSTEM "chrome://inlinetrans/locale/options.dtd"> 

    <dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" 
     id="translate-preferences" 
     title="&options.title;" 
     buttons="accept, cancel" 
     style="padding:0px; margin:0px;" 
     ondialogaccept="options.save()" 
     onload="options.init();" 
     onunload="options.deconstruct();"> 

    <!-- 
     <stringbundleset id="stringbundleset"> 
     <stringbundle id="locale-properties" src="chrome://translator/locale/translator.properties"/> 
     <stringbundle id="properties" src="chrome://translator/content/translator.properties"/> 
     </stringbundleset> 
    --> 

    <!-- 
     <script src="chrome://inlinetrans/content/options.js" /> 

    --> 

     <description value="&options.desc;" 
     style=" 
     background: #fff url('chrome://inlinetrans/skin/options.png') no-repeat; 
     min-width:400px; 
     min-height:40px; 
     padding-left:55px; 
     padding-top:10px; 
     margin:0px; 
     border-bottom: 2px solid #757575; 
     font-size:1.5em;"/> 

     <vbox style="padding:10px;"> 
     <groupbox> 
      <caption label="&options.ui;"/> 
      <label value="&options.results.desc;"/> 
     <radiogroup id="display.results" style="padding-left:20px;"> 
      <radio id="results.cat" value="category" label="&options.results.cat;"/> 
       <radio id="results.noncat" value="noncategory" label="&options.results.noncat;"/> 
      </radiogroup> 
     </groupbox> 
    </vbox> 
    </dialog> 

對我來說，最令人困惑的事情是我做的所有的處理程序接口。

例如：

1. 變化插件的狀態，從活動到非活動

2. 採取所選擇的單選按鈕的值

Answer 1

我不能給您的回答你的所有問題，部分原因是我不知道你想要什麼，但這是一個開始：

• 要顯示的圖像旁邊的菜單項，你必須給元素的類menuitem-iconic爲described in the documentation：

  <menuitem id="intransContextMenuPage" 
  class="menuitem-iconic" 
  image="chrome://inlinetrans/skin/imagesOn_kecil.png" 
  label="terjemahkan dengan intrans" 
  oncommand="inline.script.getText()" /> 
  

• 我不知道的狀態欄，由我會按照the description in the documentation ：

  以下類可用於設置元素的樣式。應該使用這些類，而不是直接更改元素的樣式，因爲它們更適合用戶選擇的主題。

  statusbarpanel-iconic
  使用此類可以在狀態欄上顯示圖像。使用src屬性指定圖像。圖像將出現而不是標籤。

• 您可以通過獲取到radiogroup參考獲取選定的單選按鈕的值，訪問其屬性selectedItem它給你一個radio元素和閱讀value屬性：

  var value = document.getElementById('display.results').selectedItem.value;