右クリックから背景画像を表示するChrome拡張機能つくった
[追記] (2014-01-23)
新バージョン
Chrome拡張機能「背景画像を表示」v2.0 リリースしました! - 「牛の舌って薄いんですね」
Twitterのユーザーページを見ていると背景画像だけを見たくなることがあります。IEやFirefoxなら右クリックから背景画像を表示させることができますが、Chromeではそれができないんですよね。毎回、しかたなく右クリック(コンテキストメニュー)の「要素の検証」から背景画像のURLを取得していました。
でも、これでは面倒くさい! 他に方法は無いのかとググッてみたところ、どうやらそのくらいしか方法は無いようです。追記参照
Google グループ
だったら、いっそ自分で作ってやろう。ということで、拡張機能として作ってみることにしました。
ダウンロード
Chrome ウェブストアはデベロッパー登録手数料を払わないといけなかったり*1、何かと面倒なので、とりあえずDropboxに上げておきました。ダウンロードは以下より。
バージョン1.2 (2012-05-21)
- Chromeのバージョンアップによるバグ修正
バージョン1.1 (2011-09-27)
- 動作にjQueryを必要としなくなった
バージョン1.0 (2011-09-19)
概要
動作確認
Google Chrome 19.0.1084.46
プログラムの流れは以下のとおりです。
- コンテキストメニューに「背景画像だけを表示」項目を追加(前準備)
- 項目がクリックされたら、ページ内の全フレームにjQueryとコンテントスクリプトを読み込む
- 「背景画像のURL」と「現在のページのURL」を取得
- 「現在のページのURL」が、選択されたページ(フレーム)のURLと一致すれば、新しいタブで「背景画像のURL」を開く
このような仕組みのため、Gmailなどの一部ページでは多数のタブが開いてしまうバグがあります*2。対応策を検討中ですが、いいアイデアがありません…
ソース
manifest.json
{ "name": "背景画像を表示", "version": "1.1", "description": "コンテキストメニューに「背景画像だけを表示」項目を追加します。", "permissions": ["contextMenus", "tabs", "http://*/*", "https://*/*"], "background_page": "background.html" }
background.html
charsetは適宜変更して下さい。
<!DOCTYPE html> <html> <meta charset="UTF-8"> <script type="text/javascript" src="script.js"></script> </html>
script.js
var URL; chrome.contextMenus.create({ title: "背景画像だけを表示", onclick: function(info, tab) { URL = info.frameUrl ? info.frameUrl : info.pageUrl; chrome.tabs.executeScript(null, {file: "content_script.js", allFrames: true}); } }); //メッセージ受信 chrome.extension.onRequest.addListener( function(request, sender, sendRequest) { if (request.href == URL) { if (request.imgUrl.slice(0,3) == "url") { chrome.tabs.create({ index: sender.tab.index +1, url: request.imgUrl.slice(4,-1) }); } else { alert("背景画像を取得できません"); } } } );
content_script.js
chrome.extension.sendRequest({ imgUrl: getComputedStyle(document.body).getPropertyValue("background-image"), href: location.href });
これらのファイルとjQueryを同じ階層に置き、Chromeに読み込ませます*3。
jQueryのダウンロードは以下から。
Download jQuery | jQuery
この拡張機能では1.6.2(Minified)を利用していますが、background.htmlにあるファイル名さえ一致していればどのバージョンでも問題ないと思います*4。
解説
Chrome拡張機能を作るにあたって、http://dev.screw-axis.com/doc/chrome_extensions/がとても役に立ちました。時々落ちてるけど… バージョンが古いためか不十分なところがあるので、そのときはDeveloper's Guide - Google 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.html
content_script.js
背景画像のURLの取得がうまくいかずTwitterで喚いてると、フォロワーさんに「$("body").css("background-image")」と教えてもらいました。jQueryを利用すればいいとのこと。ありがたし。現在のページのURLと一緒にchrome.extension.sendRequestでバックグラウンドページへ送って、処理は任せちゃいましょう。
[追記] (2011-09-27)
バージョン1.1以降、jQueryを使用しなくなりました。代わりにgetComputedStyleでCSSStyleDeclarationを取得し、getPropertyValueメソッドを使って背景画像のURLを取得しています。わかりやすい説明は以下から。
getComputedStyle について調べてたら深みにハマったのでメモ - IT戦記
今後の対応
さきほど宣言したとおり、そのうちChrome ウェブストアに上げておきます。何かいいアイコンがあれば… もしくは、crxファイルで配布したほうがいいんでしょうか。その場合はアップロードする場所を考えないといけないですが。
追記 (2011-09-17)
あったわ。
カロシーのブログ Webページの背景画像を表示するGoogle Chromeの拡張「View Background Image」
https://chrome.google.com/webstore/detail/knnjokagadbonknppgkjgjpiolcijbmg
(´・ω・`)
ただしこれ、フレームページには対応してないっぽいので、その点では勝ってるかな…
*1:http://code.google.com/intl/ja/chrome/webstore/faq.html#faq-gen-11
*2:ページ内に同一URLのフレームが複数存在するため。
*3:新しいフォルダを用意し、その中に必要なファイルを作成します。Chrome側では、拡張機能ページをデベロッパーモードに変更し、「パッケージ化されていない拡張機能を読み込む…」からフォルダを選択し認識させます。
*5:コンテキストメニューに関するAPIの説明がhttp://dev.screw-axis.com/doc/chrome_extensions/に無いので、chrome.contextMenus - Google Chrome(英語)を参照してください。Developer's GuideにContext Menusへのリンクが見当たりませんが、左メニューのBrowser UIにあります。