「牛の舌って薄いんですね」Twitterのユーザーページを見ていると背景画像だけを見たくなることがあります。IEやFirefoxなら右クリックから背景画像を表示させることができますが、Chromeではそれができないんですよね。毎回、しかたなく右クリック(コンテキストメニュー)の「要素の検証」から背景画像のURLを取得していました。他に方法は無いのかとググッてみたところ、どうやらそのくらいしか方法は無いようです。グループだったら、いっそ自分で作ってやろう。いうことで、拡張機能として作ってみることにしました。ウェブストアはデベロッパー登録手数料を払わないといけなかったり*1、何かと面倒なので、とりあえずDropboxに上げておきました。ダウンロードは以下より。19.0.1084.46プログラムの流れは以下のとおりです。「現在のページのURL」が、選択されたページ(フレーム)のURLと一致すれば、新しいタブで「背景画像のURL」を開くこのような仕組みのため、Gmailなどの一部ページでは多数のタブが開いてしまうバグがあります*2。"コンテキストメニューに「背景画像だけを表示」項目を追加します。"background.html"}background.htmlcharsetは適宜変更して下さい。location.href});これらのファイルとjQueryを同じ階層に置き、Chromeに読み込ませます*3。jQueryのダウンロードは以下から。jQueryこの拡張機能では1.6.2(Minified)を利用していますが、background.htmlにあるファイル名さえ一致していればどのバージョンでも問題ないと思います*4。解説Chrome拡張機能を作るにあたって、http://dev.screw-axis.com/doc/chrome_extensions/がとても役に立ちました。Chrome(英語)を参照して下さい。manifest.json今回は、タブとコンテキストメニューを使うので、permissionsに"tab"と"contextMenus"を追加します。background.html内に記述することもできます。charsetを指定したのは、ファイルを分けたときに文字化けが発生したためです。script.jsメイン処理を記述しますが、やっていることは2つです。前準備としてchrome.contextMenus.createでコンテキストメニュー項目を追加しています*5。ひとつは、コンテントスクリプトから送信されたメッセージの受信です。chrome.extension.onRequestで受け取ります。コンテキストメニューの追加に関しては、以下のブログ記事を参考にしました。http://gravity-crim.blogspot.com/2011/07/load-jquery-chrome-extension.htmlcontent_script.js背景画像のURLの取得がうまくいかずTwitterで喚いてると、フォロワーさんに「$("body").css("background-image")」と教えてもらいました。jQueryを利用すればいいとのこと。現在のページのURLと一緒にchrome.extension.sendRequestでバックグラウンドページへ送って、処理は任せちゃいましょう。(2011-09-27)バージョン1.1以降、jQueryを使用しなくなりました。代わりにgetComputedStyleでCSSStyleDeclarationを取得し、getPropertyValueメソッドを使って背景画像のURLを取得しています。わかりやすい説明は以下から。ウェブストアに上げておきます。crxファイルで配布したほうがいいんでしょうか。その場合はアップロードする場所を考えないといけないですが。(2011-09-17)あったわ。́・ω・`)ただしこれ、フレームページには対応してないっぽいので、その点では勝ってるかな...*1:http://code.google.com/intl/ja/chrome/webstore/faq.html#faq-gen-11*2:ページ内に同一URLのフレームが複数存在するため。*3:新しいフォルダを用意し、その中に必要なファイルを作成します。Chrome側では、拡張機能ページをデベロッパーモードに変更し、「パッケージ化されていない拡張機能を読み込む...」からフォルダを選択し認識させます。*4:投稿時のjQuery最新版は1.6.4でした。Chrome(英語)を参照してください。三菱東京UFJ銀行のATMマップを作った823年ぶりらしいので調べた月別アーカイブリンクヘルプはてなブログお知らせ検索はてなブログをはじめよう!foooomioさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。