如何将CSS和Javascript注入到chrome扩展中加载的iframe中

Question

我的Chrome扩展程序中有一个加载网站的iframe,我想将CSS和Javascript注入网站,但只有当它加载到我的扩展iframe中时(因此当用户正常浏览网站时它不会受到影响) ).

我很惊讶Chrome扩展程序在尝试访问iframe的内部时会应用跨域安全策略,即使他们可以进行跨域XHR请求.

是否有捷径可寻？我虽然可以使用executeScript来完成它,但它需要一个选项卡ID.

Answer 1

知道您是否处于 ifrmae 的唯一方法是window不是top。

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

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

回顾

1. 注入该 URL 的内容脚本
2. 在内容脚本中，检查窗口属性，if (window != top) { loadContentScript() }
3. 如果你太担心CSS影响的话，就在JavaScript中创建CSS。如果您使用唯一的 id，则不应该这样做。

希望有帮助，我在我的一些扩展中这样做。