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

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

新規登録して質問してみよう
ただいま回答率
86.12%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Chrome extension

Chrome拡張機能

解決済

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

tenshinhan
tenshinhan

総合スコア2

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Chrome extension

Chrome拡張機能

1回答

0グッド

0クリップ

3761閲覧

投稿2021/01/14 06:27

###エラー内容

error

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

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

###コード

javascript

1(content.js) 2 3chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) { 4 const jsInitCheckTimer = setInterval(jsLoaded, 1000) 5 6 // 表示されているツイートの本文部分の要素を取得 7 let articles = document.querySelectorAll('div[lang] > span') 8 9 if (articles.length > 0) { 10 Array.prototype.forEach.call(articles, async (article) => { 11 if (!article.innerText.includes(message.text)) { 12 let tweet = article.closest('article') 13 let range = tweet.parentNode 14 range.style.display = 'none' 15 } 16 }) 17 } 18 return true 19})

vue

1(App.vue) 2 3<template> 4 <div> 5 <h3>検索ワード</h3> 6 <input type="text" v-model="text" placeholder="入力"> 7 <h3>日付</h3> 8 <h4>次の日付以降</h4> 9 <input type="text" v-model="since" placeholder="20**/**/**"> 10 <h4>次の日付以前</h4> 11 <input type="text" v-model="until" placeholder="20**/**/**"> 12 <div> 13 <button v-on:click="search">検索</button> 14 </div> 15 </div> 16</template> 17 18<script> 19export default { 20 name: 'App', 21 data: function () { 22 return { 23 text: '', 24 since: '', 25 until: '' 26 } 27 }, 28 methods: { 29 search: function () { 30 31 // 入力情報を配列に代入 32 const inputData = [this.text, this.since, this.until] 33 34 // ページのロードが完了したらmessageSendを実行 35 function waitPageLoad (callback, inputData) { 36 37 // 取得するタブの条件 38 const queryInfo = { 39 active: true, 40 currentWindow: true 41 } 42 43 chrome.tabs.query(queryInfo, function (tabs) { 44 const currentTab = tabs[0] 45 46 if (currentTab.status === 'complete') { 47 ///messageSend実行 48 callback(currentTab, inputData) 49 } else { 50 ///再度WaitPageLoad実行 51 setTimeout(() => { 52 waitPageLoad(callback, inputData) 53 }, 50) 54 } 55 }) 56 } 57 58 // メッセージ送信(callbackで呼び出している関数) 59 function messageSend (Tab, inputData) { 60     ///ここでエラーが発生する 61 chrome.tabs.sendMessage( 62 Tab.id, 63 { text: inputData[0], since: inputData[1], until: inputData[2] }, 64 () => {} 65 ) 66 } 67 68 waitPageLoad(messageSend, inputData) 69 } 70 } 71} 72</script> 73 74<style> 75 html { 76 width: 400px; 77 height: 400px; 78} 79</style> 80

json

1(manifest.json) 2 3{ 4 "manifest_version": 2, 5 "name": "__MSG_extName__", 6 "homepage_url": "http://localhost:8080/", 7 "description": "a extention for Google Chrome", 8 "default_locale": "en", 9 "permissions": [ 10 "<all_urls>", 11 "*://*/*", 12 "storage", 13 "tabs" 14 ], 15 "icons": { 16 "16": "icons/16.png", 17 "48": "icons/48.png", 18 "128": "icons/128.png" 19 }, 20 "background": { 21 "scripts": [ 22 "js/background.js" 23 ], 24 "persistent": false 25 }, 26 "content_scripts": [{ 27 "matches": ["*://*.twitter.com/*"], 28 "js": [ 29 "content/content.js" 30 ], 31 "run_at": "document_end", 32 "all_frames": true 33 }], 34 "browser_action": { 35 "default_popup": "popup.html", 36 "default_title": "__MSG_extName__", 37 "default_icon": { 38 "19": "icons/19.png", 39 "38": "icons/38.png" 40 } 41 } 42} 43

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

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

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

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

投稿2021/01/14 08:37

編集2021/01/14 08:38
tenshinhan

総合スコア2

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

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

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

このような回答には修正を依頼しましょう。

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

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Chrome extension

Chrome拡張機能