Greasemonkeyに飛び込め

memo greasemonkey

もぐれかな。ダイブせよ。
学習中 (introduction for myself)
（以下、おもに意訳と一部自分のコメント）


トップページ　Dive Into Greasemonkey
>http://diveintogreasemonkey.org/

デバッグ・ツール
http://diveintogreasemonkey.org/debug/index.html

Hello world!
>http://diveintogreasemonkey.org/helloworld/divein.html

ヘッダ(どこでも良い）
>http://diveintogreasemonkey.org/helloworld/metadata.html

ワイルドカード（サブドメインなど）
>http://diveintogreasemonkey.org/patterns/domain.html

変数宣言
var allLinks, thisLink;

例：

テキストエリア
>http://diveintogreasemonkey.org/patterns/element-exists.html

すべてのHTML要素に　allElements = document.getElementsByTagName('*');
>http://diveintogreasemonkey.org/patterns/iterate-every-element.html

特定のHTML要素すべてに　allTextareas = document.getElementsByTagName('textarea');
>http://diveintogreasemonkey.org/patterns/iterate-every-element.html

ある属性をもつ要素に

＊＜a href...の場合
allLinks = document.evaluate('//a[@href]', document, null,　XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
for (var i = 0; i < allLinks.snapshotLength; i++) {thisLink = allLinks.snapshotItem(i);...}

＊title属性
'//*[@title]'

＊＜div class='sponsouredlink'...(ダブルクォート、シングルクォート)
"//div[@class='sponsoredlink']"

document.evaluateは第二パラメータの子ノードから探す。
第4パラメータはどうしてもランダムでだめな場合はXPathResult.ORDERED_NODE_SNAPSHOT_TYPEで。
snapshotItemはJavascript標準にはない。
＞XPath教程 http://www.zvon.org/xxl/XPathTutorial/General/examples.html

リンクでaccesskey属性があるもののリンクリストを下に固定表示する（などの）サンプル（サンプルをインストールしていくと本サイトがバージョンアップする感じか）
http://diveintogreasemonkey.org/download/accessbar.user.js

>http://diveintogreasemonkey.org/patterns/match-attribute.html

要素の前に挿入
http://diveintogreasemonkey.org/patterns/insert-before.html

要素の後ろに挿入
insertBefore関数はこの場合、（表現は「次の要素の前に挿入」だが）someExistingElement.nextSiblingがなければ単に後ろに追加する。（まあわかんなかったら気にしなくていいよ、動くから。）
http://diveintogreasemonkey.org/patterns/insert-after.html

要素の削除
adSidebar.parentNode.removeChild(adSidebar);
子要素もすべて削除される。広告を削除したいだけならこれとこれを持ってくればいい云々。
http://diveintogreasemonkey.org/patterns/remove-element.html

要素の置換
http://diveintogreasemonkey.org/patterns/replace-element.html

複雑なHTML文を直接挿入
innerHTML
http://diveintogreasemonkey.org/patterns/innerhtml.html

画像をscriptに埋め込んで追加
data: URLs
IEは「data:」をサポートしてないので聞いたことがないかもしれないが…
データ作成はここで出来る＞http://software.hixie.ch/utilities/cgi/data/data
http://diveintogreasemonkey.org/patterns/add-image.html

cssの追加
http://diveintogreasemonkey.org/patterns/add-css.html

（外部）スタイルシート適用後のstyleを得る
http://diveintogreasemonkey.org/patterns/getcomputedstyle.html

特定要素のstyle属性をセット
http://diveintogreasemonkey.org/patterns/set-style.html

表示後に関数を適用？
addEventListener
匿名関数
このHTMLを置き換える例ではhead内部での設定はcssも含めすべて有効のまま。
http://diveintogreasemonkey.org/patterns/onload.html

比較、大文字小文字、前後の空白
translate
http://diveintogreasemonkey.org/patterns/case-insensitive.html

現在のURL、ドメイン名の取得
window.location.href
window.location.host
http://diveintogreasemonkey.org/patterns/get-domain.html

リンクの置換
例：パラメータ追加
http://diveintogreasemonkey.org/patterns/rewrite-link.html

リダイレクト
例：httpをhttpsに
window.location.href = window.location.href.replace(/^http:/, 'https:');
http://diveintogreasemonkey.org/patterns/redirect.html

クリック時の動作を変更
http://diveintogreasemonkey.org/patterns/intercept-clicks.html

通常のクリックなどでの動作の変更とJavascriptでの動作の変更
例：submit
http://diveintogreasemonkey.org/patterns/override-method.html

DOM
http://diveintogreasemonkey.org/patterns/parse-xml.html

ケース・スタディ

Gmail
安全な接続にリダイレクト
http://diveintogreasemonkey.org/casestudy/gmailsecure.html

Bloglines自動読み込み
blioglines、いいインターフェイスだが、ひとつ気に入らないのはワンクリックしないと未読を読めないということ。なので作ってみた
http://diveintogreasemonkey.org/casestudy/bloglinesautoload.html

読みやすくない？
すてきなサイトだが見た目が気に入らない。なのでcssを追加。
オリジナルより優先する場合？「! important」を付ける
http://diveintogreasemonkey.org/casestudy/aintitreadable.html

サイト外へのリンクを新しいウィンドウで開く
リクエストに応えて書いたスクリプト。私はリンクを新しいタブで開くのを好むが、そうでない人に
thisdomain = window.location.host;
...
if (a.host && a.host != thisdomain) {
...
}
http://diveintogreasemonkey.org/casestudy/offsiteblank.html

引用を適正に変換
document.body.innerHTMLだと対象はソースもスクリプトも含んだ全体。いま置き換えたいのは「ページ内のテキスト」・・・そこでXPathですよ
http://diveintogreasemonkey.org/casestudy/dumbquotes.html

smiliesアイコンをalt属性により顔文字に置き換え
http://diveintogreasemonkey.org/casestudy/frownies.html

テキストエリアに拡大ボタンを追加
http://diveintogreasemonkey.org/casestudy/zoomtextarea.html