Bookmarklet

[10] ブックマークレット (bookmarklet) は、 URL として記述した Webページ上の操作の指示や簡易的な Webアプリケーションです。

[11] 利用者が予め javascript: URL や data: URL をWebブラウザーのブックマークに登録しておき、必要に応じてそのブックマークを選択することで、実行します。

ブックマークレットの作り方

[41] Web頁で実行されるような通常の JavaScript のコード (script 要素に書くようなもの) を、 javascript: URL としてWebブラウザーのブックマークに登録するだけです。

[42] Web頁の JavaScript からできることは何でもできます。逆に Web頁にできないことはできません。

ブックマークレットの登場

[75] Miscellaneous Features, 2024-08-16T08:53:39.000Z, 2000-11-02T04:08:17.837Z https://web.archive.org/web/20001102040816fw_/http://developer.netscape.com/docs/manuals/communicator/jsguide/misc.htm

ブックマークレットの環境悪化

[62] ブックマークレットは平成時代中期から後期に世界的にウェブ開発者や上級の利用者等に愛用されていましたが、徐々に動作環境が悪化して使いづらくなっていきました。

[63] ソーシャルハッキング被害等の防止のため javascript: URL のブックマーク追加を不可または複雑操作にする Webブラウザーが増えました。
[70] スマートフォンブラウザーやゲーム機のブラウザー等、ブックマークによる機能呼び出しがそれほど便利でない Webブラウザーが増えました。
[71] Mixed Content 規制強化によって外部スクリプト等の fetch を行うブックマークレットで動かないものが出ました。
- [72] ブックマークレット支援サービス等でその変化に対応できないものも出ました。
[73] CSP 規制強化によってブックマークレットが正常動作しないサイトが増えました。

CSP 競合問題

[45] javascript: URL は CSP のよる規制の対象となり、ブックマークレットもその制約下となります。

[56] そのため Content-Security-Policy: HTTPヘッダーや <meta http-equiv=Content-Security-Policy> 要素などで CSP policy が指定されていて、スクリプトの読み込みや実行が制限されていると、ブックマークレットが正常に実行されないことがあります。

[57] CSP によるセキュリティー上の制限を JavaScript から解除することはできないので (できたらセキュリティーホールになってしまいます)、ブックマークレットだけで対処することは不可能です。

[58] 本来 CSP の適用対象は著者のスクリプト (と偽って挿入された不正コード) であって、利用者の行動ではなく、ブックマークの挙動の詳細はWeb標準規格の範囲外で Webブラウザー事業者の裁量で決められる部分ですから、少なくても理屈の上では、ブックマークレットだけ特別に CSP の規制の適用対象外とすることはできます。

[59] しかし各ブラウザーがそのような対策を取っていないのは、ブックマークレットの需要に対してWebブラウザーの実装が複雑になりすぎてしまうためと思われます。

[60] ウェブ上の解説には HTTPS だと CSP が適用されるという解説がありますが (そして Google検索で上位に出てきますが) HTTPS と CSP は直接関係していません。

[61] ちょうど CSP によるブックマークレット不動作が問題になった頃と同時期に、 Mixed Content の規制強化に伴うブックマークレットからのスクリプト読み込みができなくなった問題が起こっていたので、それが混同されたものでしょうか。

Bookmarklet Editor

[92] BEB ― Bookmarklet Editor Bookmarklet に移動しました。

NodeRectViewer

[93] NodeRectViewer の項を参照してください。

SuikaWiki Bookmarklets

[96] SuikaWiki Bookmarklets の項を参照してください。

Google のキャッシュに飛ぶ

[1] javascript:if(_content.location.protocol=='http:')%7B_content.location.href='http://www.google.com/search%3Fq=cache:'%2B_content.location.href%7D
[2] ソース: if(_content.location.protocol=='http:'){_content.location.href='http://www.google.com/search?q=cache:'+_content.location.href}
[3] 問題点: URI符号化してないので、 URI によってはやばい可能性がある。
[7] 2002-12-15 (日) 15:01 >>3: >>4 と同じように encodeURIComponent 使えばいい

ページ内の ID を表示する

[98] javascript:var els=document.querySelectorAll('[id], a[name]');for(var i=0;i<els.length;i++){var el=els[i];var id=el.id||el.name;var anchor=document.createElement('a');anchor.href='#'+encodeURIComponent(id);anchor.className='___id_anchor';anchor.textContent='#'+id;if(el.namespaceURI=="http://www.w3.org/1999/xhtml"){anchor.title=el.localName;if(el.localName.match(/^(?:h[1-6]|td|th|li|dt|dd|html)$/)){el.insertBefore(anchor,el.firstChild);continue;}}else{anchor.title='{'+el.namespaceURI+'}'+el.localName;}el.parentNode.insertBefore(anchor,el);}var style=document.createElement('style');style.textContent='.___id_anchor { display: inline !important; width: auto !important; height: auto !important; margin: 0 !important; border: none !important; padding: 0 !important; background-color: #ffa !important; color: black !important; font-size: 16px !important; font-weight: normal !important; font-family: monospace !important; line-height: 1.0 !important; text-decoration: underline !important }';document.head.appendChild(style);

Goo の辞書

[38] 半ソース: data:text/html;charset=euc-jp,%3Cframeset rows="32,*"%3E%3Cframe name="search" src='data:text/html,%3Cform action="http://dictionary.goo.ne.jp/search.php" target="result"%3E%3Cinput name="MT" size="20"/%3E%3Cinput type="image" name="ej" src="http://dictionary.goo.ne.jp/img/submit/s_06.gif" alt="en -> ja"%3E%3Cinput type="image" name="je" src="http://dictionary.goo.ne.jp/img/submit/s_07.gif" alt="ja -> en"%3E%3Cinput type="image" name="jn" src="http://dictionary.goo.ne.jp/img/submit/s_08.gif" alt="ja -> ja"%3E%3C/form%3E'/%3E%3Cframe name="result" src="about:blank"/%3E%3C/frameset%3E
- フレームの上を検索欄、下を結果欄にします。
- 検索結果表示を広告を飛ばした位置までスクロールできれば便利なのだけど。

改訂版。 Wikipedia (本家日本語版) のボタンつき。 (名無しさん 2007-04-21 04:25:58 +00:00)

改訂版

2ch 用のリンク修正

開く窓の指定を消去

[17] a, area, form 各要素の target 属性の値を消去します。
[18] javascript:clearTarget('a');clearTarget('form');clearTarget('area');function%20clearTarget(elementType){var%20elements=document.getElementsByTagName(elementType);for(var%20i=0;i%3Celements.length;i++){if(elements[i].getAttribute('target')){elements[i].setAttribute('target',%27%27)}}}
[19] base 要素や Window-Target: 欄や XLink の属性などで指定されていた場合は知りません。

スタイルシート再読み込み

[8] 外部スタイルシートに適当な URL query を付けて再読み込みさせます。

javascript:%0A%0AArray.prototype.forEach.call%20%28document.querySelectorAll%20%28%27link%5Brel~%3Dstylesheet%5D%27%29%2C%20function%20%28el%29%20%7B%0A%20%20var%20url%20%3D%20new%20URL%20%28el.href%29%3B%0A%20%20url.search%20%3D%20%22%3Fr%3Dlocal-%22%20%2B%20Math.random%20%28%29%3B%0A%20%20el.href%20%3D%20url%3B%0A%7D%29%3B%0A%0Adocument.querySelectorAll%20%28%27iframe%27%29.forEach%20%28iframe%20%3D%3E%20%7B%0A%20%20try%20%7B%0A%20%20%20%20iframe.contentDocument.querySelectorAll%20%28%27link%5Brel~%3Dstylesheet%5D%27%29.forEach%20%28el%20%3D%3E%20%7B%0A%20%20%20%20%20%20var%20url%20%3D%20new%20URL%20%28el.href%29%3B%0A%20%20%20%20%20%20url.search%20%3D%20%22%3Fr%3Dlocal-%22%20%2B%20Math.random%20%28%29%3B%0A%20%20%20%20%20%20el.href%20%3D%20url%3B%0A%20%20%20%20%7D%29%3B%0A%20%20%7D%20catch%20%28e%29%20%7B%0A%20%20%20%20iframe.contentWindow.postMessage%20%28%22reloadStylesheets%22%2C%20%22*%22%29%3B%0A%20%20%7D%0A%7D%29%3B%0A%0Avoid%20%280%29%3B%0A

javascript:%0A%0AArray.prototype.forEach.call %28document.querySelectorAll %28%27link%5Brel~%3Dstylesheet%5D%27%29%2C function %28el%29 %7B%0Aconsole.log%28el%29%3B%0A var url %3D new URL %28el.href%29%3B%0A url.search %3D "%3Fr=local-" %2B Math.random %28%29%3B%0A el.href %3D url%3B%0A%7D%29%3B%0A%0Avoid %280%29%3B%0A

特定のスタイル・シートを適用

[21] javascript:function%20s(){var%20l=document.createElement('link');l.setAttribute('href','スタイル・シートの URI');l.setAttribute('rel','stylesheet');document.getElementsByTagName('head')[0].appendChild(l);}s() 適当な URI を指定して下さい。
[22] >>21 で document.styleSheets を使わなかったのは、 DOM0 だし、 XHTML で使えないから。
- 使用例s
  - [25] W3C の Style Activity の頁のスタイル・シートを代替として追加 (とても長い「URI」なので注意: 読み飛ばす >>26) (半ソース)
    javascript:function s(){document.getElementsByTagName('head')[0].innerHTML+='%3Clink rel="alternate stylesheet" title="W3C/Style: Default" href="http://www.w3.org/Style/main.css"%3E%3Clink rel="alternate stylesheet" title="W3C/Style: Default" href="http://www.w3.org/Style/map-ns.css"%3E%3Clink rel="alternate stylesheet" title="W3C/Style: Default" href="http://www.w3.org/Style/map.css" media="all"%3E%3Clink rel="alternate stylesheet" title="W3C/Style: Default" href="http://www.w3.org/Style/banner-k.css"%3E%3Clink rel="alternate stylesheet" title="W3C/Style: Default" href="http://www.w3.org/Style/shadows.css" media="all"%3E%3Clink rel="alternate stylesheet" title="W3C/Style: Without navigation bar" href="http://www.w3.org/Style/main.css"%3E%3Clink rel="alternate stylesheet" title="W3C/Style: Without navigation bar" href="http://www.w3.org/Style/map-ns.css"%3E%3Clink rel="alternate stylesheet" title="W3C/Style: Without navigation bar" href="http://www.w3.org/Style/map.css"%3E%3Clink rel="alternate stylesheet" title="W3C/Style: Without navigation bar" href="http://www.w3.org/Style/banner-none.css"%3E%3Clink rel="alternate stylesheet" title="W3C/Style: Without navigation bar" href="http://www.w3.org/Style/shadows.css"%3E%3Clink rel="alternate stylesheet" title="Oldstyle" href="http://www.w3.org/StyleSheets/Core/Oldstyle"%3E%3Clink rel="alternate stylesheet" title="Modernist" href="http://www.w3.org/StyleSheets/Core/Modernist"%3E%3Clink rel="alternate stylesheet" title="Midnight" href="http://www.w3.org/StyleSheets/Core/Midnight"%3E%3Clink rel="alternate stylesheet" title="Ultramarine" href="http://www.w3.org/StyleSheets/Core/Ultramarine"%3E%3Clink rel="alternate stylesheet" title="Swiss" href="http://www.w3.org/StyleSheets/Core/Swiss"%3E%3Clink rel="alternate stylesheet" title="Chocolate" href="http://www.w3.org/StyleSheets/Core/Chocolate"%3E%3Clink rel="alternate stylesheet" title="Traditional" href="http://www.w3.org/StyleSheets/Core/Traditional"%3E%3Clink rel="alternate stylesheet" title="Steely" href="http://www.w3.org/StyleSheets/Core/Steely"%3E%3Clink rel="alternate stylesheet" title="Forest (by David Baron)" href="http://dbaron.org/style/forest"%3E%3Clink rel="alternate stylesheet" title="Plain (by David Baron)" href="http://dbaron.org/style/plain"%3E%3Clink rel="alternate stylesheet" title="Gold (right) + navbar" href="http://www.w3.org/Style/threepart.css"%3E%3Clink rel="alternate stylesheet" title="Gold (left) + navbar" href="http://www.w3.org/Style/threepart-left.css"%3E%3Clink rel="alternate stylesheet" title="Gold (right)" href="http://www.w3.org/Style/threepart-nobanner.css"%3E%3Clink rel="alternate stylesheet" title="Gold (left)" href="http://www.w3.org/Style/threepart-left-nobanner.css"%3E%3Clink rel="alternate stylesheet" title="Gold (right, fixed) + navbar" href="http://www.w3.org/Style/threepart-f.css"%3E%3Clink rel="alternate stylesheet" title="Gold (left, fixed) + navbar" href="http://www.w3.org/Style/threepart-left-f.css"%3E%3Clink rel="alternate stylesheet" title="Gold (right, fixed)" href="http://www.w3.org/Style/threepart-nobanner-f.css"%3E%3Clink rel="alternate stylesheet" title="Gold (left, fixed)" href="http://www.w3.org/Style/threepart-left-nobanner-f.css"%3E'}s()
  - [26] W3C REC スタイル (半ソース)
    javascript:function%20s(){var%20l=document.createElement('link');l.setAttribute('href','http://www.w3.org/StyleSheets/TR/W3C-REC');l.setAttribute('rel','stylesheet');document.getElementsByTagName('head')[0].appendChild(l);}s()
    - 注意: このスタイルを適用しても、当該文書は W3C 勧告にはなりません(藁。
[27] CSS Laboratory javascript:function%20s(){var%20l=document.createElement('link');l.setAttribute('href','http://is.vis.ne.jp/styles/css_03/css_03.css');l.setAttribute('rel','stylesheet');document.getElementsByTagName('head')[0].appendChild(l);}s()
[28] piro タソ javascript:function%20s(){var%20l=document.createElement('link');l.setAttribute('href','http://white.sakura.ne.jp/~piro/common/styles/limited/style.css');l.setAttribute('rel','stylesheet');document.getElementsByTagName('head')[0].appendChild(l);}s()
[29] ぴんくすとらいぶ javascript:function%20s(){var%20l=document.createElement('link');l.setAttribute('href','http://www.remus.dti.ne.jp/~a-satomi/common/css/toppage.css');l.setAttribute('rel','stylesheet');document.getElementsByTagName('head')[0].appendChild(l);}s()
[30] 闇黒日記 javascript:function%20s(sURI){var%20l=document.createElement('link');l.setAttribute('href',sURI);l.setAttribute('rel','stylesheet');document.getElementsByTagName('head')[0].appendChild(l)}s('http://members.jcom.home.ne.jp/w3c/tnclass.css');s('http://members.jcom.home.ne.jp/w3c/tnstyle.css')
[31] >>27 はあまり汎用性がなさげ。格好良いんだけどなあ
[32] Personnel javascript:function%20s(sURI){var%20l=document.createElement('link');l.setAttribute('href',sURI);l.setAttribute('rel','stylesheet');document.getElementsByTagName('head')[0].appendChild(l)}s('http://members.jcom.home.ne.jp/jintrick/style/croix.css')
[33] 注意: 調子に載ってスタイル・シートをいっぱい読み込むと Mozilla はみるみる重くなります。もしかするとそのままお亡くなりになるかもしれませんから、ほどほどにしておきましょう。
[34] >>33 調子に乗らなくても相性? で Mozilla が落ちやすい組み合わせ? があるようです。あんまり使わない方がよさげ。

www.nl.go.kr 引用

[40]

javascript:%0A%28%28%29%20%3D%3E%20%7B%0A%0A%20%20var%20form%20%3D%20document.querySelector%20%28%27%23errorSendForm%27%29%3B%0A%20%20if%20%28!form%29%20return%3B%0A%0A%20%20var%20id%20%3D%20form.querySelector%20%28%27%5Bname%3DcontrolNo%5D%27%29%3B%0A%20%20if%20%28!id%29%20return%3B%0A%20%20id%20%3D%20id.value%3B%0A%0A%20%20var%20title%20%3D%20form.querySelector%20%28%27%5Bname%3DbookTitle%5D%27%29%3B%0A%20%20if%20%28!title%29%20return%3B%0A%20%20title%20%3D%20title.value%3B%0A%0A%20%20var%20author%20%3D%20form.querySelector%20%28%27%5Bname%3Dauthor%5D%27%29%3B%0A%20%20author%20%3D%20author.value%3B%0A%0A%20%20var%20data%20%3D%20%22%5BCITE%5B%22%20%2B%20title%20%2B%20%22%5D%5D%20%28%5B%5B%22%20%2B%20author%20%2B%20%22%5D%5D%29%20%3Chttp%3A%2F%2Fwww.nl.go.kr%2Fnl%2Fsearch%2Fbookdetail%2Fonline.jsp%3Fcontents_id%3D%22%20%2B%20id%20%2B%20%22%3E%20%3Chttp%3A%2F%2Fviewer2.nl.go.kr%3A8080%2Fmain.wviewer%3Fcno%3D%22%20%2B%20id%20%2B%20%22%3E%22%3B%0A%20%20prompt%20%28%22%22%2C%20data%29%3B%0A%7D%29%20%28%29%3B%0A

Bookmarklet URI の記法についてのメモ

[23] ここでは、便宜的に次の用語を使っています。

ソース: 元の JavaScript のコード
半ソース: URI のような形態の JavaScript のコード。 URI符号化のためそのままでは JavaScript として不正なこともある。
URI: URI の構文に適合するもの。間隔や二重引用符などは URI 符号化しなければならない。

[24] SuikaWiki は「HTML 表示」モードで URI 文字列を a 要素とした際に、 href 属性の値は URI としての正規化を行います。ですから、原文に半ソースの状態で書いてあった場合、 HTML の要素の内容は半ソースのままですが、リンク先 URI は完全な URI になります。

従って、半ソースで書かれていても、 UA の「URI を複製」のような機能をつかって完全な URI を取り出すことが可能かもしれません。

右クリック禁止、コピー禁止の解除

[74] 右クリック禁止やコピー妨害が設定されているウェブページで、それらを解除します。

javascript:%0Avar%20fix%3De%3D%3E%7Be.oncontextmenu%20%3D%20e.oncopy%20%3D%20e.onmousedown%20%3D%20e.onselectstart%20%3D%20e.onmouseup%20%3D%20%28ev%29%20%3D%3E%20ev.stopImmediatePropagation%20%28%29%3B%20e.style.userSelect%20%3D%20%27auto%27%7D%3B%0Afix%28document.body%29%3B%0Adocument.querySelectorAll%28%27body%20%3E%20*%2C%20article%2C%5Bitemprop%3D%22articleBody%22%5D%20%3E%20*%27%29.forEach%28fix%29%0Avoid%280%29%3B%0A%0A%0A

License

[4] この WikiPage 内にある bookmarklet 及び関連 code は、特に注記の無い限り Public Domain (著作権を主張しない。) とします。
[5] 特に注記する場合であっても、寄稿文のライセンス規定にのっとり、最低限 freely distributable (自由に (対価の有無などにかかわらず) 配布可能) として下さい。
[6] とは言っても、 bookmarklet は URI であり、また短い code である故に独特性に欠けることから、その著作物性は疑問であります。

[76] 令和6年11月13日現在、本記事に「注記」のある bookmarklet 及び関連 code は含まれないようです。今後本記事にはそのような「注記」を追加しないこととします。

メモ

[12] Bookmarklet URI を書くとき、 "'" を2個以上つなげて書くと SuikaWiki が強調と解釈してしまうから、 %27 を使う。
[15] "<" や ">" は URI では使うことが出来ない。無理に書くと SuikaWiki がそこで誤解釈する可能性があるから、 %3C, %3E と書く。
[16] その他の SP などの URI に使うことが出来ない文字は、 URI 符号化しておくのが望ましいが、 SuikaWiki が HTML のアンカーに変換する時に自動的に URI 符号化するから、ここに書く時は必ずしも符号化しなくてもいい。
[36] Going My Way: POP辞書用Bookmarklet http://kengo.preston-net.com/archives/000582.shtml: これおもしろい
[37] Bookmarklet作成時のコツ http://www.teria.com/~koseki/memo/bookmarklets/tips.html