Firefoxアドオン開発のクイックスタート

Firefoxアドオンの作成についてはほとんど知りませんが、これを見つけるのに数日かかりました。 この知識を実際のタスクに適用することはまだできませんでした。 このトピックに関する英語の情報はたくさんありますが、英語が不足しているため、この情報を理解するのは困難でした。 ロシア語で私が見た記事は主に翻訳であり、細部に多くの注意が払われていますが、それらを読んだ後、全体像は生じません。 私の記事は、どこから始めてどのように作業するかという、小さなながらも全体的な知識を生み出す試みです。





Firefoxアドオンがxpiファイルとして配布されていることは誰もが知っていると思います。 xpiファイルはzipアーカイブであり、その中には特定の数のファイルとディレクトリがあります。 ファイルは、js、css、xul、画像ファイル、さらにはjarでもかまいません。 通常、ディレクトリには標準名が付けられますが、厳密な要件はありません。



最初の追加として、「Hello、World！」というメッセージをクリックするボタンを作成したかったのです。 ボタンは、任意のFirefoxパネルに配置できるはずです。 そして、私はそれをやった。 また、新しいプロジェクトを最初から作成するのではなく、何らかのテンプレートから作成する方が通常はより便利なので、このような追加を行いたいと思いました。 さらに、次のように、ファイルシステムを操作できるかどうか疑問に思っていました。 これはおそらくJavaScriptの最も重要な制限です。



「Hello、World」を作成するために私がたどったのと同じ道をたどることはおもしろくないと思います。蓄積された情報を取得してすぐに進むことができます。

仕事の準備

仕事が便利なときに気に入っています。 したがって、私はいつもの仕事スタイルに適したツールを探すことに戸惑っていました。 私はWindows 7で働いており、それについて書いています。



別のFirefoxプロファイルを作成します。

Firefoxを閉じ、win + rを押してfirefox -Pを実行します

プロファイルを作成するときは、簡単にアクセスできるフォルダーを選択する必要があります。次に例を示します。

D：\実験\ firefox

テンプレートプロジェクト helloworld.xpiを ダウンロードしてインストールします。 ディレクトリ内にインストールした後



D：\実験\ firefox \拡張



名前の付いたフォルダー



helloworld@ru.wikiversity.org.xpi



コミュニティが私を許してくれれば、私の業績に関する情報がウィキバーシティに初めて登場しました。 しかし、この記事はコピーペーストではなく、意味的に少し異なる意味合いを持っていることを願っています。

helloworld.xpiアーカイブの内容

各ファイルが何を対象としているのか、さらにはその中のすべての単語がよくわからない。 私は彼自身が注目した瞬間だけを選びました。

コンテンツ\ overlay.xul

<?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet href="chrome://helloworld/skin/overlay.css" type="text/css"?> <!DOCTYPE overlay SYSTEM "chrome://helloworld/locale/overlay.dtd"> <overlay id="helloworld-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <toolbarpalette id="BrowserToolbarPalette"> <toolbarbutton id="helloButton" label="&helloworld;" oncommand="alert('Hello, World!');"/> </toolbarpalette> </overlay>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これはメインファイルであり、ボタンをBrowserToolbarPaletteに追加する必要があることを示しています。 どこかで、すべてのパネルに識別子があることがわかりました。 このようなファイルでは、ボタンだけでなく、独自のパネルも作成できます。 コードはXULで書かれています。



XULにはJavaScriptが含まれるか、JavaScriptが外部ファイルから含まれる場合があります。

 <script> function showHello(){ alert('hello!'); } </script> ... <toolbarbutton id="helloButton" label="&helloworld;" oncommand="showHello();"/>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ロケール\ en-US \ overlay.dtd

 <!ENTITY helloworld "Hello World!">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これは単なるテキスト定数への参照です。

スキン\ ...

このフォルダーには、ボタンの画像とスタイル付きファイルが含まれます

chrome.manifest

 content helloworld content/ overlay chrome://browser/content/browser.xul chrome://helloworld/content/overlay.xul locale helloworld en-US locale/en-US/ skin helloworld classic/1.0 skin/ style chrome://global/content/customizeToolbar.xul chrome://helloworld/skin/overlay.css
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

明らかに、これはアプリケーションを構成する重要なファイルです。 もっと詳しくはわかりませんでした。

install.rdf

 <?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>helloworld@ru.wikiversity.org</em:id> <em:name>Hello World extension for Firefox</em:name> <em:version>1.0</em:version> <em:description>Demo Hello World extension.</em:description> <em:creator>Wikiversity student</em:creator> <em:unpack>true</em:unpack> <!--      --> <!-- Firefox --> <em:targetApplication> <Description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minVersion>3.6</em:minVersion> <em:maxVersion>8.0.*</em:maxVersion> </Description> </em:targetApplication> </Description> </RDF>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このファイルに従って、アドオンがインストールされます。 idタグは興味深いもので、Firefoxの識別子はそれなしでは製品として機能しません。また、Seamonkeyには異なる識別子があります。

作業プロセス

ほとんどのJS開発者のワークフローは私のように見えると思います。数行書きました-何が起こったのかを見ました。 XULの変更点を確認するには、Firefoxを再起動する必要があります。 それは少し面倒です...ほんの少し。 インターネット上のドキュメントを並行して読みたいからです。 そして、オーバーロードは高速ではありません。



Extension Developerアドオンを見つけました。 Firefoxのコントロールパネルにインストールした後、[すべてのChromeを再読み込み]ボタンを引き出す必要があります。 開発したアドオンのコード内の変更は、ボタンをクリックするとすぐに有効になります。

読み取り機能

ファイルシステムの操作に関して、私は（ほとんどどこかからコピーされた）関数を持っていました。

 function read(path) { try { netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect"); } catch (e) { alert("Permission to read file was denied."); } var file = Components.classes["@mozilla.org/file/local;1"] .createInstance(Components.interfaces.nsILocalFile); file.initWithPath( path ); if ( file.exists() == false ) { alert("File does not exist"); } var is = Components.classes["@mozilla.org/network/file-input-stream;1"] .createInstance( Components.interfaces.nsIFileInputStream ); is.init( file, 0x01, 00004, null); var sis = Components.classes["@mozilla.org/scriptableinputstream;1"] .createInstance( Components.interfaces.nsIScriptableInputStream ); sis.init( is ); return sis.read( sis.available() ); } alert(read("D:\\1.txt"));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

私が理解しているように、ファイルに書き込むことも可能ですが、もう理解していませんでした。

おわりに

基本的に、Firefoxアドオンの開発について、数日間（無料の夕方）で学べることはこれだけです。 このトピックに初めて出会った人がこの記事が役立つことを願っています。 私の意見では、初期情報、ツール、プロセスなど、クイックスタートに必要なものはすべて揃っています。



読者に強くscらないようにお願いします。「知識のある」人の役割のふりはせず、追加の質問にはほとんど答えられません。