言葉の色を調べるためのChrome拡張をつくるためにいろいろ調べてまとめました

Chrome拡張つくりました

日頃から尊敬するクリエーター @ujjjj より依頼を受け、言葉の色を調べるための拡張をつくりました。

ramenandicon.hatenablog.com

ちなみにこのブログのトップのイラストも @ujjjj に描いてもらってます。

過去につくったChrome拡張

Chrome拡張自体は、以前につくったことがあったのですが、イベントの設定やら、読み込んだページのCSSの操作やらをするのははじめてだったので色々調べながら制作しました。

ちなみに以前つくったChrome拡張はUSBでシリアル通信を行う拡張です。
ブラウザに圧力を検知させるためにつくりました。いまは良き思い出です。

kimizuka.hatenablog.com

今回つくったものの仕様

実現したい体験としては、こちらの記事の通りなのですが、制作のためにはそれを仕様に落としこむ必要があります。

@ujjjj との話し合いにより、

特定のURL（ https://www.google.co.jp/search ）にアクセスすると自動起動
画像のアルファを0にする
UAをiPhone6にする

の3点を満たすものをつくることにしました。
よくよく考えればUAはAndoidにすればよかったですね。Google製ですし。

特定のURLで自動起動する

今回の拡張の manifest.json はこんな感じです。
content_script の matches に拡張を有効にしたいURLを配列で渡せば、css、javascriptに配列で渡したファイルを該当ページ内で評価してくれます。

{
  "name": "言葉の色",
  "version": "1.0",
  "description": "Google画像検索結果の「色」だけを残して人々が言葉に対して持つ色のイメージを明らかにする試みです。",
  "background": {
    "scripts": ["js/background.js"]
  },
  "page_action": {
    "default_icon": "img/default-38.png",
    "default_title": "言葉の色"
  },
  "content_scripts": [{
    "matches": [
      "https://www.google.co.jp/search*"
    ],
    "css": ["css/content.css"],
    "js": ["js/content.js"]
  } ],
  "permissions": [
    "declarativeContent",
    "webRequest",
    "webRequestBlocking",
    "https://www.google.co.jp/"
  ],
  "icons": {
    "48": "img/package-48.png",
    "128": "img/package-128.png"
  },
  "manifest_version": 2
}

画像のアルファを0にする

前述の通り、今回は該当ページで content.css を読み込むように設定してあるので、CSSに、

img {
  opacity: 0 !important;
}

と書けば要件を満たせます。お手軽ですね。
当初は

img {
  opacity: 0 !important;
  transition: opacity .2s ease-in-out;
}

的な感じでいい感じのトランジションをつけておこうと思ったのですが、Google側で既にtransitionが設定してあったので辞めました。流石Googleですね。

UAを操作する

画像検索のimgの裏のDOMにbackground-colorが設定されているのがスマートフォン版のみのなのでUAを切り替える必要がありました。
今回は、background.jsを、

(function(global) {

  "use strict";

  chrome.webRequest.onBeforeSendHeaders.addListener(function(details) {
    for (var i = 0; i < details.requestHeaders.length; ++i) {
      if (details.requestHeaders[i].name === 'User-Agent') {
        details.requestHeaders[i].value = "Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/600.1.3 (KHTML, like Gecko) Version/8.0 Mobile/12A4345d Safari/600.1.4";
        break;
      }
    }
    
    return {
      requestHeaders: details.requestHeaders
    };

  },{
    urls: ["<all_urls>"]
  },
  [
    "blocking",
    "requestHeaders"
  ]);

})(this);

このように記述してUAを書き換えています。

注意1 manifest.jsonでパーミッションを設定しておく

前述のmanifest.jsonの通り、

webRequest

webRequestBlocking

のパーミッションを設定しておきましょう。

注意2 イベントページをつかわない

イベントページではchrome.webRequestをつかえないようなので、バックグラウンドページでつかいましょう。
イベントページの設定は端折りますが、manifest.jsonでbackground.jsを設定する際の第2引数を渡さなければバックグラウンドページとして設定されます。

ソースコード

github.com

こちらに一式アップしております。

参考にさせていただいたサイト

kimizuka.hatenablog.com
自分のブログ記事です。過去の自分に助けられました。

liginc.co.jp
短い記事なのでChrome拡張の概要をさくっと理解できます。

API Reference - Chrome Developers
公式のドキュメントです。英語が読めないので苦労しました。

Samples - Chrome Developers
公式ドキュメントのサンプル集です。英語は染めませんがソースは読めるので、こちらを参考にすることが多かったです。
該当ページに訪れたら実行とか、ツールバーのボタンを押したら実行など、基本的な機能のサンプルは揃っているのでとても参考になります。

oxynotes.com
一番参考になりました。日本語なのもうれしいです。
ここの説明を一通り読めば基本的にはOKだとおもいます。

chrome.google.com
Chrome拡張はソースを確認できるので、自分のつくりたい拡張に近いものをダウンロードしてソースを参考にさせてもらうというのもとてもよい方法だと思います。

みかづきブログその3

本ブログは更新を終了しました。通算140万ユーザーの方に観覧頂くことができました。長い間、ありがとうございました。