popupからcontentscriptsへsendMessageするとCould not establish connectionになる

Question

###エラー内容

Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.

popup側でsendMessageしてcontentscripts側でメッセージを受け取りたいのですが、sendMessageのタイミングで上記のエラーが出ます。

###コード

(content.js)

chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
  const jsInitCheckTimer = setInterval(jsLoaded, 1000)

  // 表示されているツイートの本文部分の要素を取得
  let articles = document.querySelectorAll('div[lang] > span')

  if (articles.length > 0) {
    Array.prototype.forEach.call(articles, async (article) => {
      if (!article.innerText.includes(message.text)) {
        let tweet = article.closest('article')
        let range = tweet.parentNode
        range.style.display = 'none'
      }  
    })
  }
  return true
})

(App.vue)

<template>
  <div>
    <h3>検索ワード</h3>
    <input type="text" v-model="text" placeholder="入力">
    <h3>日付</h3>
    <h4>次の日付以降</h4>
    <input type="text" v-model="since" placeholder="20**/**/**">
    <h4>次の日付以前</h4>
    <input type="text" v-model="until" placeholder="20**/**/**">
    <div>
    <button v-on:click="search">検索</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data: function () {
    return {
      text: '',
      since: '',
      until: ''
    }
  },
  methods: {
    search: function () {

      // 入力情報を配列に代入
      const inputData = [this.text, this.since, this.until]

      // ページのロードが完了したらmessageSendを実行
      function waitPageLoad (callback, inputData) {

        // 取得するタブの条件
        const queryInfo = {
          active: true,
          currentWindow: true
        }

        chrome.tabs.query(queryInfo, function (tabs) {
          const currentTab = tabs[0]

          if (currentTab.status === 'complete') {
            ///messageSend実行
            callback(currentTab, inputData)
          } else {
            ///再度WaitPageLoad実行
            setTimeout(() => {
              waitPageLoad(callback, inputData)
            }, 50)
          }
        })
      }

      // メッセージ送信(callbackで呼び出している関数)
      function messageSend (Tab, inputData) {
　　　　　///ここでエラーが発生する
        chrome.tabs.sendMessage(
          Tab.id,
          { text: inputData[0], since: inputData[1], until: inputData[2] },
          () => {}
        )
      }

      waitPageLoad(messageSend, inputData)
    }
  }
}
</script>

<style>
  html {
  width: 400px;
  height: 400px;
}
</style>

(manifest.json)

{
  "manifest_version": 2,
  "name": "__MSG_extName__",
  "homepage_url": "http://localhost:8080/",
  "description": "a extention for Google Chrome",
  "default_locale": "en",
  "permissions": [
    "<all_urls>",
    "*://*/*",
    "storage",
    "tabs"
  ],
  "icons": {
    "16": "icons/16.png",
    "48": "icons/48.png",
    "128": "icons/128.png"
  },
  "background": {
    "scripts": [
      "js/background.js"
    ],
    "persistent": false
  },
  "content_scripts": [{
    "matches": ["*://*.twitter.com/*"],
    "js": [
      "content/content.js"
    ],
    "run_at": "document_end",
    "all_frames": true
  }],
  "browser_action": {
   "default_popup": "popup.html",
   "default_title": "__MSG_extName__",
   "default_icon": {
     "19": "icons/19.png",
     "38": "icons/38.png"
   }
 }
}

###試したこと
他の拡張機能をオフにする
→改善せず

chrome extension の Unchecked lastError value: Error: Could not establish connection. Receiving end does not exist.の対処法

これを参考にタブのステータスが'complete'になってからsendMessageを実行するよう書き換え
→改善せず
(読み込んでいるタブがtwitterで、twitterはツイートを非同期で取得しているのですが、もしかしてそれが関係していたりするのでしょうか…？)

Chrome拡張のUnchecked runtime.lastError: Could not establish connection. Receiving end does not exist.というエラーを解決する

return trueを記述、拡張機能を更新
→改善せず

何かアドバイス等ありましたら教えていただけると幸いです。よろしくお願いいたします。

Answer 1

messageSend(function)を削除して、messageSend内に書いてあった処理をwaitPageLoad>chrome.tabs.queryのifの中に直接記述
Chrome拡張のUnchecked runtime.lastError: Could not establish connection. Receiving end does not exist.というエラーを解決する
(tabs.queryは非同期だからsendMessageをtabs.query外に設定すると初期値しか返さないとかなんとか…正直よくわかってない)

→次、以下のエラーが発生

Unchecked runtime.lastError: The message port closed before a response was received

Unchecked runtime.lastError: The message port closed before a response was received. を回避した一例

chrome.tabs.messageSendの第三引数を削除
content.jsの末尾のreturn trueを削除
その代わりに以下の記述を追加

sendResponse()
return

これで一応解決しました。