Chrome-Erweiterung reagieren: Nachricht von popup.tsx an Inhaltsskriptfehler senden

Question

Ich versuche, eine Chrome-Erweiterung zu erstellen und möchte durch Klicken auf eine Schaltfläche in popup.tsx eine Nachricht an ein Inhaltsskript senden, erhalte jedoch diese Fehlermeldung: Fehlerbehandlungsantwort: TypeError: Eigenschaft von undefiniert kann nicht gelesen werden (lesen Sie „Auf Wiedersehen“)

Das ist mein Code:

Button-Komponente:

    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>
      );
    }

Popup.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>
  );
};

Inhaltsskript:

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" });
  }
});

Checkliste 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"]
        }
    ]
}

Der Fehler, den ich erhalte: Chrome-Erweiterungsfehler

Answer 1

更新扩展程序后您是否刷新了选项卡？您是否还尝试在 HTTP/HTTPS 网站上打开扩展程序？