Firefoxアドオンを作る。その2

前回はFirefox拡張機能アドオンの作り方を紹介した。

今回は理解をもう少しだけ深めるために、別のアドオンを作ってみよう。

今回作るのは、「入力文字列内にURLがあれば、それに自動的にリンク(aタグ)を貼った文字列を出力するアドオン」である。

このアドオンは、オートリンク機能を搭載していないブログシステムを使っている人には少しだけ役に立つかも知れない。

アドオンIDは適当に [e-mail] とした。

今回開発に使った環境は、 Firefox 11.0 と Windows7 である。

というわけで、まずはファイル構成から。

[e-mail]/
　　index.rdf
　　chrome.manifest
　　chrome/
　　　　content/
　　　　　　autolink.xul
　　　　　　firefoxOverlay.xul
　　　　locale/
　　　　　　en-US/
　　　　　　　　autolink.dtd
　　　　　　ja-JP/
　　　　　　　　autolink.dtd
　　　　skin/

各ファイルの中身は以下の通りだ。

index.rdf

<?xml version="1.0" encoding="UTF-8"?>

<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>[e-mail]</em:id>
    <em:name>autolink Extension</em:name>
    <em:version>1.0</em:version>
    <em:creator>Your Name</em:creator>
    <em:description>Autolink Extension Add-on.</em:description>
    <em:targetApplication>
      <Description>
        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
        <em:minVersion>3.0</em:minVersion>
        <em:maxVersion>11.0.*</em:maxVersion>
      </Description>
    </em:targetApplication>
  </Description>
</RDF>

chrome.manifest

content autolink chrome/content/
locale autolink en-US chrome/locale/en-US/
locale autolink ja-JP chrome/locale/ja-JP/
skin autolink classic/1.0 chrome/skin/
overlay chrome://browser/content/browser.xul chrome://autolink/content/firefoxOverlay.xul

chrome/content/firefoxOverlay.xul

<?xml version="1.0"?>

<!DOCTYPE overlay SYSTEM "chrome://autolink/locale/autolink.dtd">
<overlay id="autolinkOverlay"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  
  <menupopup id="viewSidebarMenu">
    <menuitem key="key_openAutolink" observes="viewAutolink"  />
  </menupopup>
  
  <keyset id="mainKeyset">
    <key id="key_openAutolink" command="viewAutolink"
         key="&openAutolink.commandkey;" 
         modifiers="&openAutolink.modifierskey;" />
  </keyset>
  
  <broadcasterset id="mainBroadcasterSet"> 
    <broadcaster id="viewAutolink" 
                 label="&autolink.title;"
                 autoCheck="false"
                 type="checkbox"
                 group="sidebar"
                 sidebarurl="chrome://autolink/content/autolink.xul"
                 sidebartitle="&autolink.title;"
                 oncommand="toggleSidebar('viewAutolink');" />
  </broadcasterset>
</overlay>

chrome/content/autolink.xul

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css" ?>
<?xml-stylesheet href="chrome://browser/skin/browser.css" type="text/css" ?>
<!-- ローカリゼーション -->
<!DOCTYPE page SYSTEM "chrome://autolink/locale/autolink.dtd">

<page id="sbSidebarExample"
      title="&autolink.title;"
      xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
      
  <vbox flex="1">
    <!-- 入力用テキストボックス -->
    <textbox id="t1" multiline="true" rows="20"/>
    <!-- 出力用テキストボックス(Read Only) -->
    <textbox id="t2" multiline="true" readonly="true" flex="1"/>
    <script type="application/x-javascript"><![CDATA[    
    /* 
    入力用テキストボックスからカーソルが外れた時(onblur)にオートリンクを貼った文字列を表示するイベント処理を追加
    */
    var t1 = document.getElementById("t1");
    t1.addEventListener(
      "blur",
      function(){ 
        var t1 = document.getElementById("t1");
        var t2 = document.getElementById("t2");
        t2.value = t1.value.replace(
          /(http:\/\/[\x21-\x7e]+)/gi,
          "<a href=\"$1\" target=\"_blank\">$1</a>"
        ); 
      }
    );
    
    /*
    出力用テキストボックスにフォーカスがセットされた時(onfocus)に文字列が全選択されるイベント処理を追加
    */
    var t2 = document.getElementById("t2");
    t2.addEventListener(
      "focus",
      function(){
        this.select();
      }
    );
    ]]></script>
    
  </vbox>
</page>

入力用テキストエリアに textarea ではなく、textbox を使っているところがポイントだ。XULでは両方とも textbox で表現できるのである。詳しくはこちらを参照のこと。


chrome/locale/en-US/autolink.dtd

<!ENTITY autolink.title "Autolinker">
<!ENTITY openAutolink.commandkey "E">
<!ENTITY openAutolink.modifierskey "shift accel">

chrome/locale/ja-JP/autolink.dtd

<!ENTITY autolink.title "オートリンカー">
<!ENTITY openAutolink.commandkey "E">
<!ENTITY openAutolink.modifierskey "shift accel">

以上である。

今回はスタイルシート(skin/)は省略した。

動作テストや配布パッケージの作り方についても、前回のエントリを見ていただけると分かると思うので今回は省略する。

参考になるサイト

XUL - MDN
こちらはXULで使えるコントロールの一覧などの情報である。今回使ったtextboxなどの他にも多くの便利なコントロールがあるのでこちらを見て勉強すると良いだろう。

Firefox 3 Hacks ―Mozillaテクノロジ徹底活用テクニック

posted with amazlet at 12.04.07

江村 秀之 池田 譲治 下田 洋志 松澤 太郎 dynamis
オライリージャパン
売り上げランキング: 395037

Amazon.co.jp で詳細を見る

PR:お買い物はAmazonで