2019-01-17T04:08:37Z

Firefox userChrome.js用ユーザスクリプトを作成する

Firefoxを使いやすくするため、タブのタイトルとURLをコピーしたかったけど、できなかったので自作してみた。

userChrome.jsとは

userChrome.jsはFirefoxのブラウザに対するユーザスクリプを実行する方法です。

Firefoxの拡張機能(WebExtensions)と同様にブラウザを制御できます。ですが、userChrome.jsは拡張機能よりも制約がゆるく細やかな制御が可能です。逆に言えば、拡張機能よりも危険です。

userChrome.jsの導入方法

下記Wikiのスクリプト導入法を参照してください。

※userChrome.jsは、正式な機能ではないため、バージョン毎に導入方法が変化しています。また、今後userChrome.jsが廃止される可能性があります。

作るもの

下記の機能を実現します。

  • タブコンテキストメニューからタイトルのコピー
  • タブコンテキストメニューからURLのコピー

結果

タブメニュー

タブメニューの最上部に「タブのタイトルをコピー」と「タブのURLをコピー」を追加しました。メニューを選択すると、クリップボードにタイトル/URLをコピーします。

ソースコード

// ==UserScript==
// @name          CopyTabTitleUrl.uc.js
// @description   タブコンテキストメニューから選択しているタブのタイトルとURLをコピーする
// @include       main
// @charset       UTF-8
// @author        toshi(https://www.bugbugnow.net/)
// @license       MIT License
// @version       2
// @see           1 - 初版
// @see           2 - 「CopyTabTitleAndURL.uc.js」から名称変更
// ==/UserScript==

(function () {
  // タブのタイトルをコピー
  var mt = document.createElement("menuitem");
  mt.setAttribute("id", "context-copytab-title");
  mt.setAttribute("label", "タブのタイトルをコピー");
  mt.addEventListener('command', function() {
    var title = TabContextMenu.contextTab.linkedBrowser.contentTitle;
    var clipboard = Cc['@mozilla.org/widget/clipboardhelper;1']
                      .getService(Ci.nsIClipboardHelper);
    clipboard.copyString(title);
  });

  // タブのURLをコピー
  var mi = document.createElement("menuitem");
  mi.setAttribute("id", "context-copytab-url");
  mi.setAttribute("label", "タブのURLをコピー");
  mi.addEventListener('command', function() {
      var url = TabContextMenu.contextTab.linkedBrowser.currentURI.spec;
      var clipboard = Cc['@mozilla.org/widget/clipboardhelper;1']
                        .getService(Ci.nsIClipboardHelper);
      clipboard.copyString(url);
  });

  // セパレータ
  var ms = document.createElement("menuseparator");
  ms.setAttribute('id', 'context-copytab-sep');

  // メニューバーの最上部に要素を追加
  // タブのタイトルをコピー
  // タブのURLをコピー
  // セパレータ
  var tabContextMenu = document.getElementById("tabContextMenu");
  tabContextMenu.insertBefore(ms, tabContextMenu.firstChild);
  tabContextMenu.insertBefore(mi, tabContextMenu.firstChild);
  tabContextMenu.insertBefore(mt, tabContextMenu.firstChild);
}());

※プロファイルフォルダ内のchromeフォルダにCopyTabTitleUrl.uc.jsの名称で保存する

コードを書くために

userChrome.jsのドキュメントは、特に存在しません(筆者は見つけられませんでした)。そのため、他人の書いた動作するソースコードを元に、求める機能を実現する必要があります。

Firefoxのバージョンによって動作しないコードもあります。バージョンアップ後動作しなくなる場合、動作に必要な機能がなくなっていたり、名称が変更していたりします。

userChrome.jsを作成する場合、ブラウザーツールボックスを使用して、Firefoxの内部構造を知ることが有効です。

また、各種コマンドの記述例としては、以下のページが参考になります。

関連記事

  1. Firefox userChrome.js用ユーザスクリプトを作成する
  2. Firefox用WebExtensions拡張機能を作成する
  3. Chromeの拡張機能を作成する
  4. Firefox用WebExtensions拡張機能を国際化する
  5. Chrome、Firefox、Edgeの拡張機能を判定する
  6. Chrome、Firefox拡張機能のブラウザアクションでポップアップあり・なしを共存する
  7. Chrome、Firefoxの拡張機能にショートカットを実装
 コメントを書く