如何处理 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 类：

• 我不确定状态栏，我会遵循文档中的描述：

  <块引用>

  以下类可用于设置元素的样式。应该使用这些类，而不是直接更改元素的样式，因为它们会更自然地适合用户选择的主题。

  statusbarpanel-iconic
  使用此类可以在状态栏面板上显示图像。使用 src 属性指定图像。将出现图像而不是标签。

• 您可以通过获取对 radiogroup 的引用来获取所选单选按钮的值，访问其属性selectedItem 为您提供一个 radio 元素读取 value 属性：

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