chrome拡張機能のchrome.runtime.sendMessageの同期処理が正しく挙動しない

Question

前提・実現したいこと

下記の「該当のソースコード」内にあるcontent_script.jsからchrome.runtime.sendMessageを実行。background.jsのchrome.runtime.onMessage.addListenerからの返り値によって以降の処理を分岐するスクリプトを書いています。

（蛇足ですが、人の顔を配置してクリックしたら笑う、笑っているときはisSmilingの値をtrueに、笑ってないときはisSmilingの値をfalseに設定して、クリックするごとに笑う→普通の顔→笑う→普通の顔を繰り返すことが期待している挙動です）

発生している問題・エラーメッセージ

content_scriptから吐き出されるconsole.logを確認してみると、

script.js:70 result after chrome.runtime.sendMessage undefined
script.js:48 response in move undefined
script.js:70 result after chrome.runtime.sendMessage undefined
script.js:66 response in chrome.runtime.sendMessage false
script.js:66 response in chrome.runtime.sendMessage true

という順番で吐き出されてしまい、chrome.runtime.sendMessageの実行結果を待たずに次の処理に行ってしまっています。

該当のソースコード

content_script.js

// chromeの拡張機能用APIを使用しないと取得できない
const nomalFaceImgUrl = chrome.runtime.getURL('images/human_icon_48.png'); 
const smileFaceImgUrl = chrome.runtime.getURL('images/human_icon_48_smile.png');

// APIへのリクエスト準備
let smileActionGetPayLoad = {
  method: 'get',
  query: 'smileAction',
  params: null,
};
let smileActionPostPayLoad = {
  method: 'patch',
  query: 'smileAction',
  params: true,
};

/**
 * 画像を配置する
 * @param {integer} wx - 右からの位置
 * @param {integer} wy - 下からの位置
 */
function deploy(wx, wy) {
  // 配置準備
  const human = document.createElement('img');
  human.src = nomalFaceImgUrl;

  // スタイル定義
  human.id = 'human';
  human.style.position = 'fixed';
  human.style.right = wx;
  human.style.bottom = wy;
  human.style.zIndex = 9999; // 一番上に表示するために適当な値

  // onclickした時に実行するもの
  human.onclick = move;

  // 配置する
  const objBody = document.getElementsByTagName('body').item(0);
  objBody.appendChild(human)
};

/**
 * 画像を変化させる
 */
function move() {
  const response = coreAPI(smileActionGetPayLoad);
  console.log('response in move', response);

  if (response == true) {
    document.getElementById('human').src = nomalFaceImgUrl;
    smileActionPostPayLoad.params = false;
    coreAPI(smileActionPostPayLoad);
  }
  
  document.getElementById('human').src = smileFaceImgUrl;
  coreAPI(smileActionPostPayLoad);
};

/**
 * 画像を配置する
 * @param {Object} payLoad - リクエストするための引数 
 */
function coreAPI(payLoad) {
  const result = chrome.runtime.sendMessage(payLoad, function(response) {
    console.log('response in chrome.runtime.sendMessage', response);
    return response
  });

  console.log('result after chrome.runtime.sendMessage', result);

  return result;
};


// 実行
deploy(0, 0);

background.js

// 変数をまとめておく
let store = {
  isSmiling: false,
}

/**
 * フロントに当たるcontent_scripts.jsからのリクエストを処理する
 * @param {Object} msg - フロントでpayLoad={{method: String}, {query: String}, {params: String}}のような形で設定した引数が入る
 * @param {integer} sender - 送り元の情報。この拡張機能のIDや、リクエスト元のURL、tabの情報などが取れる
 * @param {function} sendResponse - これを実行して引数にフロントに返したい内容を入れる。
 */
chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
  if (msg.query == 'smileAction') {
    smileAction(msg);
  };
  sendResponse(store.isSmiling);

  return true;
});

/**
 * 笑顔アクションに関する挙動
 * @param {Object} msg - フロントでpayLoad={{method: String}, {query: String}, {params: String}}のような形で設定した引数が入る
 */
function smileAction(msg) {
  if (msg.method == 'get') {
    return store.isSmiling;
  } else if (msg.method == 'patch') {
    store.isSmiling = msg.params
    return store.isSmiling
  };
};

試したこと

https://qiita.com/Tachibana446/items/ab15021099d54d1209c2
この記事で指摘されている内容（chrome.runtime.onMessage.addListenerの中身にreturn trueを入れる）を試しましたが、結果、上記の状態のままです。

補足情報（FW/ツールのバージョンなど）

不要かもしれませんが、manifest.jsonの内容も記します。

{
	"manifest_version": 2,
	"name": "test",
	"version": "0.1",
	"content_scripts": [ {
	  "matches": [ "http://*/*", "https://*/*" ],
	  "js": ["script.js"]
	} ],
  "background": {
    "scripts": ["background.js"]
  },
	"page_action": {
		"default_icon": {
			"16": "images/grandma_icon_16.png",
			"48": "images/grandma_icon_48.png",
			"128": "images/grandma_icon_128.png"
		}
	},
	"icons": {
		"16": "images/grandma_icon_16.png",
		"48": "images/grandma_icon_48.png",
		"128": "images/grandma_icon_128.png"
	},
  "web_accessible_resources": [
    "images/*"
  ]
}

何卒、よろしくお願いいたします。

Answer 1

  const result = chrome.runtime.sendMessage(payLoad, function(response) {
    console.log('response in chrome.runtime.sendMessage', response);
    return response
  });

とありますが、chrome.runtime.sendMessage()は非同期な関数であり、戻り値はありません。return response することで result にその値を受け取ろうとしていませんか？それはできません。このあたりは「js 非同期処理 コールバック」などで検索して調べてみてください。

コールバックの形で書くとしたら次のようになります。

function coreAPI(payLoad, callback) {
  chrome.runtime.sendMessage(payLoad, callback);
};

function move() {
  coreAPI(smileActionGetPayLoad, function (response) {
    // ここに response を使った続きの処理
  });
};

Promise を使うと次のようになります。

function coreAPI(payLoad) {
  return new Promise(function (resolve) {
    chrome.runtime.sendMessage(payLoad, function(response) {
      resolve(response)
    });
  });
};

function move() {
  coreAPI(smileActionGetPayLoad).then(function (response) {
    // ここに response を使った続きの処理
  });
};

さらに async/await を使うと次のようになります。

function coreAPI(payLoad) {
  return new Promise(function (resolve) {
    chrome.runtime.sendMessage(payLoad, function(response) {
      resolve(response)
    });
  });
};

async function move() {
  const response = await coreAPI(smileActionGetPayLoad)
  // ここに response を使った続きの処理
};

Comments

[Daimian]

非常に勉強になりました。ご指摘いただきました内容で試したところ、期待通りの挙動になりました。
「非同期な関数で戻り値はありません」の部分の理解が自分に不足しているため、今から勉強をします。
素晴らしいご回答、誠にありがとうございます！

[karamarimo]

補足しておくと、非同期な関数ならば戻り値がない、というわけではないです。
ただ const result = ...sendMessage(...) という形で今欲しい response を受け取ることはできない、ということです。

[Daimian]

補足のコメントありがとうございます！この辺り理解が怪しいので学習の題材として非常に良い例だと思います。
return new Promise( )で呼び出し元であるcoreAPI( )にPromise関数を返し、async/awaitによりPromise関数のpendingが完了になるまでまち、完了したらその結果であるresponseを取得できる
という流れだと理解しました。