在内容脚本中使用 Chrome API 时如何解决'无法读取未定义的属性”错误？

内容脚本中 Chrome API 出现“无法读取未定义的属性”错误

Chrome 扩展程序通常使用内容脚本将 JavaScript 注入网页。尝试在这些内容脚本中访问 c​​hrome API（例如 chrome.tabs）时会出现一个常见问题。

错误“无法读取未定义的属性‘名称’”表示该 API 在内容中不可用脚本上下文。这是因为与后台脚本和弹出脚本等其他脚本类型相比，内容脚本对 Chrome API 的访问受到限制。

原因：

内容脚本是沙盒的，仅具有访问一组特定的 API，包括 chrome.i18n、chrome.dom、chrome.storage 以及chrome.runtime/chrome.extension.

解决方案：

要访问内容脚本中的 chrome.tabs 等受限制的 chrome API，您可以使用消息传递来与合适的脚本类型（例如背景

实现：

1. 将消息从内容脚本传递到后台脚本、弹出脚本或 Service Worker（对于 MV3）。

// In contentScript.js
chrome.runtime.sendMessage({ action: "getTabs" });

2. 处理收件人中的消息

// In backgroundScript.js
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "getTabs") {
    chrome.tabs.query({}, (tabs) => {
      sendResponse(tabs);
    });
  }
});

3. 在适当的脚本中使用 API 并将结果返回到内容脚本。

按照以下步骤，您可以使用通过消息传递将请求委托给更有特权的脚本类型，从而解决内容脚本中不可用的 chrome API。

以上是在内容脚本中使用 Chrome API 时如何解决'无法读取未定义的属性”错误？的详细内容。更多信息请关注PHP中文网其他相关文章！