google-chrome-extension - 如何将 CSS 和 Javascript 注入(inject)到 chrome 扩展中加载的 iframe

Question

我的 chrome 扩展中有一个加载网站的 iframe，我想将 CSS 和 Javascript 注入(inject)网站，但只有当它加载到我的扩展 iframe 中时(所以当用户正常浏览网站时它不会受到影响)。

我很惊讶 Chrome 扩展程序在尝试访问 iframe 的内部时应用了跨域安全策略，即使它们可以发出跨域 XHR 请求。

是否有捷径可寻？我虽然可以使用 executeScript 来做到这一点，但它需要一个选项卡 ID。

Answer 1

了解您是否在 ifrmae 中的唯一方法是 window不是top .

if (window == top) {
  // Not in iframe
}
else {
  // In an iframe
}

您只能对内容脚本执行此操作，而不能对样式表执行此操作。我通常做的是在内容脚本中，我检查它是否不在顶部窗口中，然后继续脚本，否则我就结束它。

回顾

为该 URL 注入(inject)内容脚本

在内容脚本中，检查窗口属性 if (window != top) { loadContentScript() }

如果您太担心它会影响它，请在 JavaScript 中创建 CSS。如果您使用唯一 ID，则不应该这样做。

希望有所帮助，我这样做是为了我的一些扩展。