Chrome Extension開発を勉強してみる (5) - content script + background page -

コンテントスクリプトとバックグラウンドページを使って、表示画面中にある画像へのリンクをマウスオーバーした段階で別タブで開くっていうのをやってみる

manifest.json

{
  "name": "test",
  "version": "0.1",
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["test.js"],
      "run_at": "document_end"
    }
  ],
  "background_page": "background.html"
}

んまぁ本当は対象とするサイトとかをちゃんと指定すべきなんだと思いますが... とりあえずコンテントスクリプトとバックグラウンドページに関する設定をしておく

test.js

var elements = document.querySelectorAll("a");
var elements_length = elements.length;

for (var i = 0; i < elements_length;i++) {
  var element = elements[i];

  if (element instanceof HTMLAnchorElement) {
    element.addEventListener("mouseover", function(event) {
      var href = this.getAttribute("href");

      if (href !== undefined && /^http(?:.+)[jpg|png]$/.test(href)) {
        chrome.extension.sendRequest({ "url": href });
      }
    });
  }
}

な感じで表示しているページの<a>を取得して、そこのhref属性が画像であるかをチェックして、バックグラウンドページ側に処理をぶん投げる(コンテントスクリプト側からだと何かと権限上の問題で出来ない事がある模様げなので)

background.html

<html>
  <body>
    <script type="text/javascript">
(function(undefined) {
  chrome.extension.onRequest.addListener(function(req, sender, res) {
    console.log(req.url);

    chrome.tabs.create({ "url": req.url, "selected": false });
  });
})();
    </script>
  </body>
</html>

コンテントスクリプトからsendRequestされたのをここでキャッチする。

余談ですが

ブラウザアクションとかでXMLHttpRequestとかを使おうとすると、クロスドメインの制限などにひっかかりますが、manifest.jsonで設定する事で回避は出来る模様なのですが、コンテントスクリプトの場合だとこの制限に当てはまらない模様(制限が無いわけじゃなくて、content_scriptのmatchesに制限されるみたい)。その理由は http://xkansan.tumblr.com/post/19043957246/xhr-finalurl-for-chrome-extension が非常に参考になる