Google Chrome にブックマークレットを追加してみる

Google Chrome に FireFox で良く使っていたブックマークレットを追加してみます。

ブックマークバーの表示


Windows の場合は Shift + Ctrl + B を押すと表示され、
Mac の場合は Shift + Command + B を押すと表示される。

ブックマークバーが表示されると、編集と削除が楽になる。

ブックマークレットの追加


1. ブックマークレットバーを右クリックして、「Add Page」をクリックします。
2. 編集できるようになるので、上にタイトル、下にJavaScriptのコードになるように入力して、OKボタンを押すと良いです。

ブックマークレットの例


1. WebサイトのタイトルとURLを取得するブックマークレット
- 今見ているページのタイトルと URL をプロンプトに表示するブックマークレット。改行コードは環境により\nか\rかが変わります。

javascript:var url=location.href;var title=document.title;var code ="- "+title+"\r-- "+url+"\r";var x = prompt('',code);


2. flickrのMediumなサムネイル取得
- 例えば「http://www.flickr.com/photos/overlast/3990772539/」のようなページでChangeLogメモに貼付けるためのコードを出力するブックマークレット。
改行コードは環境によって\nか\rかが変わります。


javascript:var photosrc = document.evaluate("//img[@class='reflect']",document, null, XPathResult.FIRST_ORDERED_NODE_TYPE,null).singleNodeValue.src.replace(/\.[^\.]+$/, '_m.jpg'); var phototitle = document.evaluate("//h1",document, null, XPathResult.FIRST_ORDERED_NODE_TYPE,null).singleNodeValue.innerHTML;var widget = document.evaluate("//div[@class='Widget']",document, null, XPathResult.FIRST_ORDERED_NODE_TYPE,null).singleNodeValue;var userstream = /href="(\S+)"/.exec(widget.innerHTML)[1];usernick = /<b .*?>(.+)<\/b>/.exec(widget.innerHTML)[1];var photoid = document.location.href.split('/')[5];var photolink = 'http://flickr.com' + userstream + photoid + '/';var userlink ='http://flickr.com' + userstream.replace(/\/photos\//,'/people/');var camerainfo = document.evaluate("//ul/li[@class='Stats']/a[@class='Plain']", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.innerHTML;if (camerainfo.length > 5) { camerainfo = ' using ' + camerainfo; }; var code = "\r" + '<a title="' + phototitle + '" href="' + photolink + '"><img src="' + photosrc + '" /></a>' +"\r" + '<br />from <a href="' + userlink + '">' + usernick + '</a>' + "\r";var x = prompt('',code);



改行コードの扱い

Mac 用の Chrome はブックマークレット内の改行コードを"\r"にしないと正常に改行されませんでした。

関連リンク


- Google Chrome : ヘルプ - ブックマークの管理
-- http://www.google.com/support/chrome/bin/answer.py?hl=jp&answer=95714


投稿者:としのり  日時:23:59:59 | コメント | トラックバック |
blog comments powered by Disqus