Chrome拡張機能でDOMを操作する方法

今回はChrome拡張機能からDOMを操作する方法をご紹介します。
これから紹介するサンプルは、(1)ブラウザアクションボタンが押されると (2)ページタイトルを'hoge'に変更し、(3)ボタンを押した側（つまりbackground.js）にタイトルが変更されたことを通知する、という動きをする拡張機能です。

manifest.json

{
  "name": "DOM manipulation Example",
  "version": "1.0",
  "description": "Chrome Extension Example for manipulating DOM.",
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["content.js"]
  }],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "browser_action": {
    "default_title": "Title Changer"
  },
  "permissions": [
    "activeTab"
  ],
  "manifest_version": 2
}

background.js

/* When the browser-action button is clicked... */
chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.sendMessage(tab.id, {
      command: "change_title",
      title: "hoge"
    },
    function(msg) {
      console.log("result message:", msg);
    });
});

ブラウザアクションボタンが押されたら、content script側に"change_title"というコマンドと、変更後タイトル名"hoge"を送信します。
content script側でタイトル変更が完了したら、第三引数のコールバック関数にmsgが返ってきます。

content.js

/* Listen for messages */
chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
  if (msg.command && (msg.command == "change_title")) {
    var src = document.getElementsByTagName("title")[0].innerHTML;
    var dst = msg.title;
    document.getElementsByTagName("title")[0].innerHTML = dst;
    sendResponse("the page title's changed: '" + src + "' -> '" + dst + "'");
  }
});

background.jsからきたコマンド(msg.command)が"change_title"だったら、msg.titleで指定された文字列にタイトルを変更します。
※DOMの操作はcontent script側でしかできません。

実行

このChrome拡張機能をインストールして適当なWebページを開き、アイコン（ブラウザアクションボタン）を押すと、タイトルが"hoge"に変更され、以下のようなメッセージもログ出力されいるはずです。

ログ（background.js側）

result message: the page title's changed: 'try catch and ...release' -> 'hoge'