React Chrome 扩展：从 popup.tsx 发送消息到内容脚本错误

Question

我正在尝试做一个 chrome 扩展，我想通过单击 popup.tsx 的按钮来发送消息到内容脚本，但我收到此错误： 错误处理响应：TypeError：无法读取未定义的属性（读取“再见”）

这是我的代码：

按钮组件：

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

内容脚本：

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

清单 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"]
        }
    ]
}

我得到的错误： Chrome 扩展程序出错

Answer 1

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