Chrome拡張機能でContent ScriptでMessage Passingする方法

Content Scriptは特定のURLを開いたときに開いたページを操作するのに使用しますが、
［こちら］(https://qiita.com/plumfield56/items/92a3656d6b24aa5e9f7e)
でも書いたように使用できるAPIが限定されるので、
runtime, storage以外のAPIを使用する場合はMessage Passingをする必要があります。

この記事では下記画像のように開いたページのリンクの数を
タブに表示するコードを載せています。

フォルダ構造

フォルダ
 ├ manifest.json
 └ content.js // Content Scriptを動かすJavaScript
 └ event.js // Content Scriptを動かすJavaScript

manifest.json

{
  "manifest_version": 2,
  "name": "Link Count",
  "version": "1.0",

  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],

  "background": {
    "scripts": ["event.js"],
    "persistent": false
  },

  "browser_action": {
    "defalt_icon": {
      "16": "icon.png"
      }
  }
}

content.js

(function(){
  'use strict'; 
    const links = document.getElementsByTagName('a');
    // sendMessageでcountをキーにしたテキストを送付
    chrome.runtime.sendMessage({count: links.length}, () => {
        console.log('massage sent');
      });
})();

event.js

'use strict';
{
  // onMessageで受け取る
  chrome.runtime.onMessage.addListener(function(message, sender, callback) {
    chrome.browserAction.setBadgeText({text: message.count + ''});
  });
}

この記事はChrome拡張機能の作り方の一部のコンテンツです。