無法將消息從 popup.js 發送到 chrome 擴展中的 content.js

Question

我一直在構建擴展並嘗試在單擊彈出窗口中的按鈕時向內容腳本發送消息，但一直收到此錯誤“無法建立連接。接收端不存在。” 有時還會在 popup.js 中出現“Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'id')”

// 清單.json 文件

{
  "manifest_version": 3,
  "name": "Extension",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "js": ["content.js"],
      "matches": ["https://discord.com/channels/*"]
    }
  ],
  "permissions": ["tabs"],
  "background": {
    "service_worker": "background.js"
  },
  "host_permissions": ["https://discord.com/channels/*"]
}

// popup.js 文件。

const sendMessageBtn = document.querySelector("button");

sendMessageBtn.addEventListener("click", async () => {
  console.log("clicked");       // being logged to console
  const [tab] = await chrome.tabs.query({
    active: true,
    lastFocusedWindow: true,
  });
  const response = await chrome.tabs.sendMessage(tab.id, { greeting: "hello" });
  // do something with response here, not outside the function
  console.log(response);
});

單擊按鈕時出現錯誤：“無法建立連接。接收端不存在。” 在擴展錯誤日志中

// content.js 文件

console.log("content script running"); // being logged to console
chrome.runtime.onMessage.addListener(
     async function(request, sender, sendResponse) {
      console.log(sender.tab ?
                  "from a content script:" + sender.tab.url :
                  "from the extension");
                //   console.log(request);
      if (request.greeting === "hello")
         await sendResponse({farewell: "goodbye"});
    }
  );

//彈出.html文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Extension</title>
    <link rel="stylesheet" href="popup.css" />
  </head>
  <body>
    <h1>extension</h1>

    <input id="message-field" type="text" placeholder="enter message" />
    <button>Send message</button>

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

Answer 1

有幾個問題。

當彈出窗口的開發工具集中時，Chrome 中的一個錯誤會破壞 chrome.tabs.query，更多信息。
chrome.runtime.onMessage 偵聽器無法在 Chrome 中使用async聲明，更多信息。
安裝/更新擴展時，其新內容腳本不會自動注入到 Chrome/ium 中當前打開的選項卡中，因此您必須自己明確地執行此操作，如此處所示，但在以下情況下有更好的選擇你的，只有在用戶調用擴展后才需要訪問頁面：通過 executeScript 進行編程注入。
- 刪除 content.js
- 從 manifest.json 中刪除content_scripts
- 從“權限”中刪除“制表符”——這不是必需的，現在不會有關於觀察瀏覽器歷史記錄的警告。
- 將“腳本”添加到“權限”。

document.querySelector('button').onclick = async () => {
  // workaround for devtools window https://crbug.com/462939
  const { id: windowId } = await chrome.windows.getCurrent();
  const [tab] = await chrome.tabs.query({ active: true, windowId });
  let result;
  try {
    [{ result }] = await chrome.scripting.executeScript({
      target: { tabId: tab.id },
      // this runs in the web page, so it can't see variables in scope like `tab` 
      func: (param1, param2) => {
        return document.documentElement.innerHTML;
        // return {it: 'can', be: ['an object', 'too']};
      },
      // this is sent to the func's param1 and 2
      args: [123, { foo: 'bar' }],
    });
  } catch (err) {
    // the tab is not injectable
    console.warn(err);
    return;
  }
  console.log(result); // printing in the popup's devtools console
};

無法將消息從 popup.js 發送到 chrome 擴展中的 content.js

問題描述

1 個解決方案

解決方案1
1 已采納 2023-01-03 09:58:08

無法將消息從 popup.js 發送到 chrome 擴展中的 content.js

問題描述

1 個解決方案

解決方案1 1 已采納 2023-01-03 09:58:08

解決方案1
1 已采納 2023-01-03 09:58:08