読者です 読者をやめる 読者になる 読者になる
スポンサーリンク

開いている全タブのURLとタイトルを,列挙して抽出するFirefoxアドオン (XUL形式プラグインのソースコード付)

ブラウザ XUL lifehack javascript 時間術 作品

注:このアドオンには,改良版があります。

「全タブを要約するアドオン」を改良。ページ内の選択部分を要約に反映
http://language-and-engineering.hatenablog.jp/entry/20140117/p1

全タブの「リンク集」を自動生成するアドオン。


ネットで調べ物をしているとき,リンクをたどっていくと,

いつの間にか開いているタブの個数が膨大になっていたりする。

一つのトピックを深く広く,掘り下げて調べるとそうなりやすい。


そういう状況下で,開いている全てのタブの「要約」のような物を,ブラウザの機能で自動生成できれば便利だ。


自分が調べた結果の全サイトを,リンク集のような形式で抽出・出力してくれる。

そうすれば,情報収集の成果を記録に残しておきやすい。

多数のURLを1タブずつ,手動でコピペしなくて済む。



そのような機能を実現するための,Firefoxのプラグインを開発した。

ソースコード付きで公開する。


※下記URLからダウンロード・インストールできます。

TabSum.xpi
http://www.name-of-this-site.org/codi...

ソースコードと解説


このアドオンはタブのサマリーを出力するので,TabSumという名前にした。


Firefoxのアドオンは,XMLとJavaScriptだけで簡単に作れる。

下記のエントリがベースになる。

画面上の邪魔なものを自動ブロックする Firefox プラグインの作り方  (XPI アドオンを自作しよう)
http://language-and-engineering.hatenablog.jp/entry/20081129/1227955571

  • xulプラグインの作成方法として参照


ブラウザが持っている特殊なDOMモデルさえ把握すれば,

「window」と同じように,tabもオブジェクトとしてJavaScriptから操作できる。

Mozillaのサイトを情報源として参考にすればよい。


メインの処理をJavaScriptで記述するXULファイルは,下記のとおり。


TabSum.xul

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

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

  <!-- 「ツール」メニューに,実行したい関数とショートカットキーを割り当て -->
  <menupopup id="menu_ToolsPopup">
    <menuitem label='create summary of all tabs' oncommand='createSummary()' key="createSummaryKey" />
  </menupopup>

  <!-- ショートカットキーが呼び出すコマンド -->
  <keyset id="mainKeyset">
    <key id="createSummaryKey" modifiers="control shift alt" key="S" command="createSummary" />
  </keyset>

  <!-- コマンドが呼び出す関数 -->
  <commandset id="mainCommandSet">
    <command id="createSummary" oncommand="createSummary()"/>
  </commandset>
  

  <!-- JavaScript関数 -->
  <script type="application/x-javascript"><![CDATA[

    /*
    
      このアドオンの機能:
    
      CTRL + SHIFT + ALT + S で,全タブの要約を生成。
    
    */


    // @see http://language-and-engineering.hatenablog.jp/entry/20081129/1227955571
    

    // 要約を生成
    function createSummary()
    {
      var sum = "";
    
      // 全タブ
      var tabs = gBrowser.browsers;
        // http://stackoverflow.com/questions/3844793/xul-javascript-tabs-and-url
        // https://developer.mozilla.org/en-US/docs/Code_snippets/Tabbed_browser
      
        // Android Firefoxの場合:
        // var tabs = window.BrowserApp.tabs;
        // https://developer.mozilla.org/en-US/docs/Extensions/Mobile/API/Tab
      
      // 収集
      for( var i = 0; i < tabs.length; i ++ )
      {
        var tab = tabs[i];
        
        var str_title = tab.contentTitle;
          // https://developer.mozilla.org/ja/docs/XUL/tabbrowser#p-contentTitle
        var str_url   = tab.contentDocument.location;
          // browser element does not return page title when tabs are loaded from previous session
          // http://stackoverflow.com/questions/12779639/firefox-xul-browser-doesnt-have-a-page-title
        
        // 要約
        sum += str_title + "<br>"
          + str_url + "<br>"
          + "<br><br>"
        ;
        
      };
      
      // 新タブに表示
      var newTabBrowser = gBrowser.getBrowserForTab(gBrowser.addTab("http://www.google.com/"));
      newTabBrowser.addEventListener("load", function () {
        newTabBrowser.contentDocument.body.innerHTML = sum;
      }, true);
    }

  ]]></script>
</overlay>


内容は下記リンクを参照すること。

Xul - javascript tabs and url - Stack Overflow
http://stackoverflow.com/questions/38...

  • xulで全タブを取得する方法。gBrowserというグローバル変数があるので,そこからgBrowser.browsersとすれば全タブのbrowserオブジェクトが得られる。


Tabbed browser - Code snippets | MDN
https://developer.mozilla.org/en-US/d...

  • グローバル変数gBrowserについて:can access the tabbrowser element using the global variable gBrowser.
  • 新規タブを開く方法について:Opening a URL in a new tab


Tab - Extensions | MDN
https://developer.mozilla.org/en-US/d...

  • Android上のxulプラグインなら,window.BrowserApp.tabsで全タブを取得できる


tabbrowser - XUL | MDN
https://developer.mozilla.org/ja/docs...

  • browser 内の document オブジェクトの持つ各種プロパティ


javascript - Firefox xul browser doesn't have a page title - Stack Overflow
http://stackoverflow.com/questions/12...

  • Firefox browser element does not return page title when tabs are loaded from previous session.
  • 前回のセッションを復元したタブの場合は,実体がabout:blankなので,タイトルやURLを取得することはできない

↑このリンク集を,まさにこのプラグインで生成した。

情報のまとめとかブログの執筆作業が非常に楽になる。


具体的な使い方

まず,物調べをしたい時に,情報収集のために専用のブラウザウィンドウを立ち上げよう。

そのウィンドウ上の全タブを,あとで「リンク集化」するつもりでいる。


たくさんタブを開いたら,ブラウザの「ツール」から「create summary of all tabs」を選択。

すると,新規タブの中に,全タブの要訳が生成される。


なお,Firefoxの仕様として,

前回のセッションを復元したタブがある場合,一度ページを開き直さないと,タブの内容を取得できないので注意。


関連する記事:

画面上の邪魔なものを自動ブロックする Firefox プラグインの作り方  (XPI アドオンを自作しよう)
http://language-and-engineering.hatenablog.jp/entry/20081129/1227955571


Firefoxのサイドバーを作ろう (XUL形式のアドオンでbrowser要素を設定する方法)
http://language-and-engineering.hatenablog.jp/entry/20081203/1228262334


今から3分で,IE 上で .NET のDLLを動かそう (ブラウザ上で C# のコードを動かす方法)
http://language-and-engineering.hatenablog.jp/entry/20100705/p1