Firefox-Plugin

Ein Firefox Plugin ist leicht erstellt. Im folgenden ein einfaches Beispiel eines Hello Plugin's . Die angegebene Verzeichnisstruktur erzeugen und die Dateien wie beschrieben implementieren.

Anschließend den Inhalt des Verzeichnisses working in ein Zip-Filepacken und die Endung zip nach xpi umbenennen. Diese Datei kann dann mit dem Firefox geöffnet werden.

Das Beispiel-xpi zum Download: documents/helloFirefoxPlugin.xpi

 

Verzeichnisstruktur[1]

Firefox Addon Verzeichnisstruktur

chrome.manifest

Es werden die notwendigen Daten zum Installieren des Plugins bekanntgebenen

content   hello_path                content/
skin      hello_path  classic/1.0   skin/
locale    hello_path  de-DE         locale/de-DE/
locale    hello_path  en-US         locale/en-US/

overlay chrome://browser/content/browser.xul  chrome://hello_path/content/hello_overlay.xul

install.rdf

enthält zusätzliche Meta-Daten des Plugin's

<?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>Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!</em:id>
    <em:name>Hello Plugin</em:name>
    <em:description>Ein Hello World Firefox Plugin</em:description>
    <em:version>0.1</em:version>
    <em:creator>Dirk Friedenberger</em:creator>
    <em:homepageURL>http://frittenburger.de</em:homepageURL>
    <em:type>2</em:type>

    <!-- Mozilla Firefox -->
    <em:targetApplication>
      <Description>
        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
        <em:minVersion>4.0</em:minVersion>
        <em:maxVersion>10.*</em:maxVersion>
      </Description>
    </em:targetApplication>
  </Description>
</RDF>

hello_script.js

enthält die eigentliche Funktionalität des Plugins

/**
 * Hello Namespace.
 */              
if ("undefined" == typeof(HelloNameSpace)) {
  var HelloNameSpace = {};
};

/**
 * Im Namespace ein Objekt mit zwei Funktionen anlegen
 */
HelloNameSpace.HelloJSObject = {

  /* Toogle-Funktion, die je nach Zustand die Aktivierung bzw. Deaktivierung per alert kundtut */
  toogle : function(aEvent) {
  	/* String-Bundle holen */
  	let stringBundle = document.getElementById("hello-string-bundle");
  	
  	/* Ermitteln ob MenueItem aktiviert ist */
  	let active       =  document.getElementById("hello-menu-itemToogle").getAttribute("checked") == "true" ? true : false;
  	
  	/* Message ausgeben */
  	let message      =  active ? stringBundle.getString("hello.greeting.label") : stringBundle.getString("hello.valediction.label"); 
  	window.alert(message);
  	
  },
/* Aboutfunktion die ein neuen Tab mit der Internetseite des Authors oeffnet */ about : function(aEvent) { gBrowser.selectedTab = gBrowser.addTab("http://www.frittenburger.de/"); } }

hello_overlay.xul

enthält die Anbindung an den Firefox

  • Einbinden des Javascripts ( <script> )
  • Einbinden der internationalisierten Strings ( <stringbundleset> )
  • Integration des Plugins in das Menü (<menubar>)

 

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

<!DOCTYPE overlay SYSTEM
  "chrome://hello_path/locale/hello_menu.dtd">

<overlay id="hello-browser-overlay"
  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

  <!-- Einbinden des Javascriptes -->
  <script type="application/x-javascript"
    src="chrome://hello_path/content/hello_script.js" />

  <!-- Einbinden der Strings aus hello_strings.properties -->
  <stringbundleset id="stringbundleset">
    <stringbundle id="hello-string-bundle"
      src="chrome://hello_path/locale/hello_strings.properties" />
  </stringbundleset>

  <!-- Integration des Plugins ins das Menue des Firefox -->
  <menubar id="main-menubar">
  
    <!-- Neuen Menuepunkt nach der Hilfe, mit Untermenues -->
    <menu id="hello-menu" label="&hello.menu.label;"
      accesskey="&hello.menu.accesskey;" insertafter="helpMenu">
      <menupopup>
        <!-- Ein Button der die Funktionalitaet toggelt -->
        <menuitem id="hello-menu-itemToogle"
          type="checkbox"
          checked="false"
          label="&hello.menuItemToogle.label;"
          accesskey="&hello.menuItemToogle.accesskey;"
          oncommand="HelloNameSpace.HelloJSObject.toogle(event);" />
       
        <!-- Ein Button der die Funktion about aufruft -->
        <menuitem id="hello-menu-itemAbout"
          label="&hello.menuItemAbout.label;"
          accesskey="&hello.menuItemAbout.accesskey;"
          oncommand="HelloNameSpace.HelloJSObject.about(event);" />
          
      </menupopup>
    </menu>
  </menubar>
  
</overlay>

hello_menu.dtd

Strings für die Menüs, wird in hello_overlay.xul referenziert

<!ENTITY hello.menu.label                  "Hello Plugin">
<!ENTITY hello.menu.accesskey              "H">
<!ENTITY hello.menuItemToogle.label        "Aktiv">
<!ENTITY hello.menuItemToogle.accesskey    "A">
<!ENTITY hello.menuItemAbout.label         "Ueber">
<!ENTITY hello.menuItemAbout.accesskey     "U">

hello_strings.properties

hello.greeting.label = Willkommen zum Hello Plugin
hello.valediction.label = Plugin deaktiviert

hello_style.css

enthält die Styles

/* Styles fuer Hello-Plugin */

Referenzen

  1. gettyicons.com abgefragt am 17. März 2014 Author Visual Pharm