「牛の舌って薄いんですね」

(出典:蒼樹うめ『ひだまりスケッチ』6巻11ページ「一頭から一枚」3コマ目)

右クリックから背景画像を表示するChrome拡張機能つくった

[追記] (2014-01-23)

新バージョン
Chrome拡張機能「背景画像を表示」v2.0 リリースしました! - 「牛の舌って薄いんですね」


Twitterのユーザーページを見ていると背景画像だけを見たくなることがあります。IEFirefoxなら右クリックから背景画像を表示させることができますが、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


プログラムの流れは以下のとおりです。

  1. コンテキストメニューに「背景画像だけを表示」項目を追加(前準備)
  2. 項目がクリックされたら、ページ内の全フレームにjQueryとコンテントスクリプトを読み込む
  3. 「背景画像のURL」と「現在のページのURL」を取得
  4. 「現在のページの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」
View Background Image - Chrome Web Store

(´・ω・`)
ただしこれ、フレームページには対応してないっぽいので、その点では勝ってるかな…

*1:http://code.google.com/intl/ja/chrome/webstore/faq.html#faq-gen-11

*2:ページ内に同一URLのフレームが複数存在するため。

*3:新しいフォルダを用意し、その中に必要なファイルを作成します。Chrome側では、拡張機能ページをデベロッパーモードに変更し、「パッケージ化されていない拡張機能を読み込む…」からフォルダを選択し認識させます。

*4:投稿時のjQuery最新版は1.6.4でした。

*5:コンテキストメニューに関するAPIの説明がhttp://dev.screw-axis.com/doc/chrome_extensions/に無いので、chrome.contextMenus - Google Chrome(英語)を参照してください。Developer's GuideにContext Menusへのリンクが見当たりませんが、左メニューのBrowser UIにあります。