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情報を持ってきてくれる。
- chrome環境で普通にlocation.hrefをやってもドキュメントのアドレスを取得できないので「現在選択されているタブのドキュメントを取得する - タブブラウザ用コード - MDC」よりcontent.documentを利用してドキュメントのアドレス取得する。stylishCommon.cleanURIはurlからハッシュ部分を除去して正規化するメソッド。
- 今回編集したようなXULのポップアップメニューは独立したところにある。それを発見しやすくするにはFirebugのHTMLタブのクリックしてメニューを開いて「変更を強調表示」、「変更をスクロールして表示」にチェックをいれてから、当該のコンテキストメニューを開くとスクロールされて強調表示されるので発見しやすい。