3.2.ブックマークされたらContentScriptに伝える

ブックマークに関するAPIを使う準備は出来たので、バックグラウンドで実際にブックマークイベントを補足し バックグラウンドとページそれぞれに存在するContentScriptを連携させます。

ブックマーク時のイベントを捕捉する

chrome.bookmarksを見てみると、ブックマークされたときのイベントは chrome.bookmarks.onCreated.addListener() を使えば良さそうです。

background.js

chrome.bookmarks.onCreated.addListener(function(id, bookmark) {
  console.log('Bookmark was created.');
});

ブックマークされると、addListener()で指定したコールバック関数が実行されます。 今回は使いませんが、コールバック関数ではブックマークIDとその他のブックマーク情報が取得出来ます。 拡張機能のページ(chrome://extensions/)の ビューを調査: バックグラウンド ページ でバックグラウンドページのディベロッパーツールを開くことが出来きます。ブックマークを追加して、 Bookmark was created. というログが出力されればOKです。

ContentScriptでメッセージを受け取る準備をする

1. ContentScriptではページの操作を行うことが出来る
2. バックグラウンドではブックマーク時のイベントを捕捉することが出来る

ところまで出来ました。ブックマーク時エフェクトを付けてあげたいので、 最終的に ブックマーク時にページの操作を行う ことがゴールです。 これを実現するには、バックグラウンドからメッセージを送って、ContentScriptでそれを受け取らなければなりません。

まず、ContentScriptでメッセージを受け取る準備をしましょう。 メッセージのやり取りには、chrome.runtimeというAPIを使います。 chrome.runtime.onMessage.addListener()でメッセージを受け取ったときのイベントを補足します。

content.jsではHTML要素作成し、ページにオーバーレイを差し込む処理を書いていましたが、 メッセージを受け取ったときに実行されるように、コールバック関数に入れておきましょう。

content.js

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
  var overlay = document.createElement('div');
  overlay.className = 'content__overlay';

  var star = document.createElement('div');
  star.className = 'content__star';
  star.innerHTML = '★';

  overlay.appendChild(star);
  document.body.appendChild(overlay);
});

これで、メッセージを受け取るまでオーバーレイの追加処理は行われないことになります。

バックグラウンドからメッセージを送る

バックグラウンドからContentScriptに対しメッセージを送るには、 chrome.tabs のchrome.tabs.sendMessage()を使います。 chrome.tabsのAPIを使うために、manifest.jsonにパーミッションを追加します。

manifest.json

{
  "manifest_version": 2,
  "name": "Bookmark Effect",
  "version": "0.3.2",
  "description": "Bookmark with starry effect",
  "author": "Your name",
  "permissions": [
    "bookmarks",
    "tabs"
  ],
  "background": {
    "scripts": [
      "background.js"
    ]
  },
  "content_scripts": [{
    "matches": ["*://*/*"],
    "css": ["content.css"],
    "js": ["content.js"]
  }]
}

chrome.tabs.sendMessage()はタブに対してメッセージを送りますが、 引数にタブのIDを指定し、どのタブに対してメッセージを送るかを指定します。 chrome.tabs.query()を使って現在表示しているタブのIDを取得します。 chrome.tabs.query()には、第一引数にタブの取得条件、第二引数にコールバック関数を指定すれば良さそうです。

background.js

chrome.bookmarks.onCreated.addListener(function(id, bookmark) {
  console.log('Bookmark was created.');

  // 取得するタブの条件
  var queryInfo = {
    active: true,
    windowId: chrome.windows.WINDOW_ID_CURRENT
  };

  // タブの情報を取得する
  chrome.tabs.query(queryInfo, function (result) {
    // 配列の先頭に現在タブの情報が入っている
    var currentTab = result.shift();
  });
});

ContentScriptにメッセージを送る

ここまで来たら、あとはブックマーク時のイベントでバックグラウンドからメッセージを送ります。

background.js

chrome.bookmarks.onCreated.addListener(function(id, bookmark) {
  console.log('Bookmark was created.');

  // 取得するタブの条件
  var queryInfo = {
    active: true,
    windowId: chrome.windows.WINDOW_ID_CURRENT
  };

  // タブの情報を取得する
  chrome.tabs.query(queryInfo, function (result) {
    // 配列の先頭に現在タブの情報が入っている
    var currentTab = result.shift();

    // メッセージ
    var message = {};

    // 現在表示しているタブにメッセージを送る
    chrome.tabs.sendMessage(currentTab.id, message, function() {});
  });
});

chrome.bookmarks.onCreated.addListener()の中に一行追加しました。 今回は通知だけ送れれば良いので、メッセージ内容も、コールバック関数も空の単純なものになっています。 応答など、より複雑な処理をする場合はこのあたりを変えていくことになるでしょう。

ここまで出来たら拡張機能をリロードし、実際にブックマークしてみてください。