質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.58%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,949

score 2

エラー内容

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を記述、拡張機能を更新
→改善せず

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

0

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.58%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る