Stylishを拡張して編集しやすくする「stylishEditButton.uc.js」

userChromeJS1.1 + Stylish 1.0.3 + Firefox 3.5で動作確認。

編集するたびに一々アドオンまで行くのが面倒なので、ポップアップメニューに編集ボタンを付けた。*1

使い方

「stylishEditButton.uc.js」はFirefox拡張のuserChrome.js用のスクリプトなので、userChrome.js(0.8か1.1)が必要。インストール方法はこちら=>超簡単にuserChrome.jsのインストールを説明する - Cherenkovの暗中模索にっき

download

stylishEditButton.uc.js  (github:139796)

// ==UserScript==
// @name           stylishEditButton.uc.js
// @namespace      http://d.hatena.ne.jp/Cherenkov/
// @description    http://d.hatena.ne.jp/Cherenkov/20090703/p1
// @include        chrome://browser/content/browser.xul
// ==/UserScript==
(function(){
function contextEdit(event) {
  var item = document.evaluate('//*[@class="style-menu-item"]', stylishPopup, null, 7, null);
  var btn = document.evaluate('//*[@class="stylishEditBtn"]', stylishPopup, null, 7, null);
  if(item.snapshotLength == btn.snapshotLength)
    return false;
  if(event.type == "popupshowing") {
    var style = Components.classes["@userstyles.org/style;1"]
                          .getService(Components.interfaces.stylishStyle)
                          .findForUrl(stylishCommon.cleanURI(content.document.location.href), false, 0, {});
    for(var i = 0; i < item.snapshotLength; i++) {
      var editBtn = document.createElement("menuitem");
      editBtn.setAttribute("class", "stylishEditBtn");
      editBtn.setAttribute("id", style[i].id);
      editBtn.setAttribute("label", "edit " + style[i].name);
      editBtn.addEventListener("command", function() {
        stylishCommon.openEditForId(this.id);
      }, false);
      item.snapshotItem(i).parentNode.insertBefore(editBtn, item.snapshotItem(i).nextSibling);
    }
  } else {
    for(var i = 0; i<btn.snapshotLength; i++)
      btn.snapshotItem(i).parentNode.removeChild(btn.snapshotItem(i));
  }
}
var stylishPopup = document.getElementById("stylish-popup");
stylishPopup.addEventListener("popupshowing", contextEdit, false);
stylishPopup.addEventListener("popuphiding", contextEdit, false);
})();

解説

  • Components.classes["@userstyles.org/style;1"].getService(Components.interfaces.stylishStyle).findForUrl(stylishCommon.cleanURI(content.document.location.href), false, 0, {});でアドオンのcomponentsフォルダにあるstylishStyle.jsのfindForUrlメソッドを使っている。urlから適用されるStyle情報を持ってきてくれる。
  • 今回編集したようなXULのポップアップメニューは独立したところにある。それを発見しやすくするにはFirebugのHTMLタブのクリックしてメニューを開いて「変更を強調表示」、「変更をスクロールして表示」にチェックをいれてから、当該のコンテキストメニューを開くとスクロールされて強調表示されるので発見しやすい。

まとめ

教えてもらって気づいた、ポップアップメニューで右クリックすると編集できた。デモまでして恥ずかしいけど、これでも結構勉強になったのでガンバリます。

*1:Stylishは1系から使い始めた