Chrome扩展报错：Uncaught (in promise) TypeError及异步处理求助

错误原因定位 #

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'action') 通常由以下场景导致：

1. Manifest版本与API不匹配：Manifest V3 中将 V2 的 chrome.browserAction 改为 chrome.action，若配置或代码调用未对应版本要求，会出现API未定义的问题。
2. API调用上下文错误：chrome.action 仅能在后台服务工作线程（background service worker）或弹窗（popup）页面中调用，内容脚本（content script）无权限访问该API，若误用会触发此错误。
3. Async/Await 用法不规范：未正确处理异步Promise、在同步函数中使用await，或异步调用未被包裹在try/catch中，导致链式调用出现undefined。

针对性修复步骤 #

1. 对齐Manifest版本配置 #

根据使用的Manifest版本调整配置：

• Manifest V3 配置示例：

{
  "manifest_version": 3,
  "name": "文本摘要扩展",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  },
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "permissions": ["activeTab", "scripting"]
}

• 若使用Manifest V2，需将代码中 chrome.action 替换为 chrome.browserAction，同时将background字段改为 scripts 而非 service_worker。

2. 修正API调用上下文 #

• 禁止在content.js中调用chrome.action：内容脚本需通过消息通信向后台或弹窗传递请求，由具备权限的上下文处理action相关操作。
  示例（content.js 发送消息）：

// content.js
async function getSelectedText() {
  const selectedText = window.getSelection().toString().trim();
  if (selectedText) {
    try {
      const response = await chrome.runtime.sendMessage({
        type: "generateSummary",
        text: selectedText
      });
      console.log("摘要结果:", response.summary);
    } catch (err) {
      console.error("消息发送失败:", err);
    }
  }
}

示例（background.js 接收消息并调用OpenAI API）：

// background.js
chrome.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
  if (message.type === "generateSummary") {
    try {
      const summary = await callOpenAIAPI(message.text);
      sendResponse({ summary });
    } catch (err) {
      sendResponse({ error: err.message });
    }
    return true; // 保持端口开放以支持异步响应
  }
});

async function callOpenAIAPI(text) {
  const apiKey = "你的OpenAI API密钥";
  const response = await fetch("https://api.openai.com/v1/chat/completions", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "Authorization": `Bearer ${apiKey}`
    },
    body: JSON.stringify({
      model: "gpt-3.5-turbo",
      messages: [{ role: "user", content: `请总结以下文本：${text}` }]
    })
  });
  const data = await response.json();
  return data.choices[0].message.content;
}

3. 规范Async/Await 使用 #

• 确保await的对象为Promise：例如chrome.runtime.sendMessage是异步方法，必须用await包裹。
• 所有异步调用需放在try/catch块中，捕获并处理异常，避免未处理的Promise报错。
• 只有async函数内才能使用await，禁止在同步函数中直接使用。

4. 弹窗页面API调用修正 #

若错误出现在popup.js中，需等待页面加载完成后再调用API：

// popup.js
document.addEventListener("DOMContentLoaded", async () => {
  const generateBtn = document.getElementById("generateBtn");
  generateBtn.addEventListener("click", async () => {
    try {
      const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
      const result = await chrome.scripting.executeScript({
        target: { tabId: tab.id },
        func: () => window.getSelection().toString().trim()
      });
      const selectedText = result[0].result;
      if (selectedText) {
        const summary = await callOpenAIAPI(selectedText);
        document.getElementById("summaryResult").textContent = summary;
      }
    } catch (err) {
      console.error("生成摘要失败:", err);
    }
  });
});

额外注意事项 #

• 禁止在content script中直接调用OpenAI API：会触发跨域问题，且API密钥会暴露，必须通过后台服务工作线程中转。
• Manifest V3 的后台服务工作线程是无状态的，无法使用DOM API，所有异步操作需确保逻辑独立。
• 测试时可通过Chrome扩展程序面板，查看后台服务工作线程或弹窗的控制台日志，定位具体错误位置。

内容的提问来源于stack exchange，提问作者Reenu