React Chrome Extension: Hantar mesej daripada popup.tsx kepada ralat skrip kandungan

Question

Saya cuba membuat sambungan krom dan saya mahu menghantar mesej kepada skrip kandungan dengan mengklik butang dalam popup.tsx tetapi saya mendapat ralat ini: Ralat mengendalikan respons: TypeError: Tidak dapat membaca sifat yang tidak ditentukan (baca "selamat tinggal")

Ini kod saya:

Komponen butang:

    function TWCredibility() {
      const ValidateTwitterTweets = () => {
        // Send message to content script to perfom Twitter Api validation
        chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
          chrome.tabs.sendMessage(
            tabs[0].id as number,
            { sender: "www", instruction: "api" },
            function (response) {
              alert(response.farewell);
            }
          );
        });
      };
    
      return (
        <div id="PageSensitiveButtons" className="flex justify-center">
          <button
            id="VerifyPageButtonTwitterApi"
            type="submit"
            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
            onClick={ValidateTwitterTweets}
          >
            Verify Page Tweets with Twitter Api
          </button>
        </div>
      );
    }

Timbul.tsx:

const Popup = () => {

  return (
    <div className="container max-h-60 p-2.5 w-[480px]">
      <h2 className="title text-3xl font-bold my-1 text-center py-2">
        T-CREo v2.0.0
      </h2>

      {/* Plain Text Credibility */}
      <PlainTextCredibility />

      <hr id="firstHorBar" className="my-2.5" />
      <h6 id="currentPage" className="flex justify-center text-base">
        {" "}
      </h6>

      {/* TW Credibility */}
      <TWCredibility />

      {/* Spinner */}
    </div>
  );
};

Skrip kandungan:

chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  // If sender is 'www' and instruction is 'api', then scraping
  if (msg.sender === "www" && msg.instruction === "api") {
    console.log("Message received from www");
    alert("Message received from www");
    sendResponse({ farewell: "to-do" });
  }
});

Senarai semak v3:

{
    "manifest_version": 3,
    "name": "T-CREo v2.0",
    "description": "sí",
    "version": "1.0.0",
    "action" : {
        "default_popup": "popup.html",
        "default_title": "T-CREo v2.0",
        "default_icon" : "icon.png"
    },
    "permissions": [
        "activeTab",
        "background",
        "contextMenus",
        "declarativeContent",
        "tabs",
        "storage",
        "scripting"
    ],
    "icons": {
        "16" : "icon.png",
        "48" : "icon.png",
        "128" : "icon.png"
    },
    "options_page": "options.html",
    "background": {
        "service_worker": "background.js"
    },
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["contentScript.js"]
        }
    ]
}

Ralat yang saya dapat: Ralat sambungan Chrome

Answer 1

Adakah anda memuat semula tab selepas mengemas kini sambungan? Pernahkah anda cuba membuka sambungan pada tapak web HTTP/HTTPS?