Chrome拡張（7） Chrome拡張とブックマークレット
「11.1 : Introduction to Chrome Extensions - Programming with Text」はChrome拡張に関するイントロダクション．その中で，通常の「サービスやChromeでのブラウジング体験をより便利にする」という目的のChrome拡張ではなく，より多様な価値観へ向けたクリエイティブなChrome拡張を紹介している部分が興味深かった．
クリエイティブなChrome拡張やブックマークレット
- Decodelia: https://melanie-hoff.com/DECODELIA/
- ブラウザで表示するページを解析して，赤のフィルター眼鏡を掛けた人だけが見えるWebページに変換するというもの．
- codedoodl.es: http://codedoodl.es/
- タブを開くごとにジェネレーティブなプログラムによって描画されるグラフィックを表示するもの．
- Wordless Web: http://pleaseenjoy.com/projects/personal/wordless-web/
- ページ内のテキストを抽出してイメージや色面だけのWebページにするもの．
- Web Paint: https://chrome.google.com/webstore/detail/web-paint/emeokgokialpjadjaoeiplmnkjoaegng
- ページ上でペイントソフトを実行するもの
ブックマークレットはブックマークバーに設置して，ブラウザで開いているWebページ上でJavaScriptを実行するもの．Chrome拡張より簡易的にページ上のコンテンツにアクセスできる．
ブックマークレット
通常のjavascriptで関数を実行する場合，以下のように書ける．
function hello(){ alert('hello'); } hello();
これを即時実行するものにする場合，以下のように書ける．
(function hello(){ alert('hello'); })();
ブラウザのアドレスバーに直接Javascriptを書いて実行する場合
javascript:(function hello(){alert('hello');})()
ページ内にブックマークレットのリンクを設置する場合
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>BookMarklet</title> </head> <body> <h1>Bookmarklet</h1> <p>This is a <a href="javascript:(function hello(){alert('hello');})()">bookmarklet</a></p> </body> </html>
Chromeのようなブラウザのブックマークバーにリンクを設置する場合は，ブックマークバーを右クリックして「ページを追加」から名前(ブックマークバーに表示されるテキスト)とURL（上記で書いてきたようなJavascript）を追加する．
ブックマークレット内で外部jsファイルを実行する書き方
外部jsファイル：bookmarklet.js
(function(){ console.log('bookmarklet starting'); let paragraphs = document.getElementsByTagName('p'); for(let i =0; i < paragraphs.length; i++){ paragraphs[i].innerHTML = 'kitten'; } })();
ブックマークレットに埋め込むJavaScript
javascript:(function(){let script = document.createElement('script'); script.src = 'bookmarklet.js'; document.body.appendChild(script);})()
bookmarklet.jsの設置先に応じてscript.srcのパスは適宜変更する．
