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

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

ただいまの
回答率

87.58%

Chrome Extentionでpopup からcontent_scriptにメッセージを送信したいが,エラーが出てうまく動かない

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 587

score 0

前提・実現したいこと

chrome extensionでpopup.html内のtextariaに打ち込んだ文字をcontent.jsによって,サイトに任意の文字を埋め込むような操作を行いたいのですがエラーが出てどこを直すべきかわからない状態です.
私自身は最近chrome extension Javascriptを触り始めたこともあり,何を直せばいいのかも手探り状態ですどうかご助言お願いします.

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

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


のようなエラーが出てなにを直せばいいのかわからない状態です.

該当のソースコード

popup.html
<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Cmt</title>
    <link rel="stylesheet" href="popup.css" />
    <script src="../lib/jquery-3.5.1.min.js"></script>

</head>
<body>
    <textarea id="comment"></textarea>
    <button id="send">send</button>

    <script src="popup.js"></script>
</body>
</html>
popup.js
var comment;

$("#send").on("click", function () {
    comment = {
        text: $("#comment").val(),
        lastUpdate: new Date()
    };
    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
        //commentの内容をcontentScriptに送る

        chrome.tabs.sendMessage(tabs[0].id, { cmt: comment.text }, function (item) {

        });
    });
});
content.js
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
    const p = document.createElement("p");
    const text = document.createTextNode(request);
    document.body.appendChild(p).appendChild(text);
});
manifest.json
{
  "manifest_version": 2,
  "name": "NiconicoCmt",
  "version": "1.0",
  "description": "Comment Sys ",
  "permissions": [ "tabs"],
  "browser_action": {
    "default_title": "Cmt",
    "default_popup": "popup/popup.html"
  },
  "content_scripts": [

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

試したこと

content_scriptにはchrome.runtime.sendMessageでなくchrome.tabs.sendMessageを使うとのことだったので書き換えたのですがエラーは消えませんでした.またmanifest.jsonも自分が調べた限りで直しましたが改善しませんでした.

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

jquery : jquery-3.5.1.min.js

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

まだ回答がついていません

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

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

関連した質問

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