防止Google Chrome内容脚本干扰网页DOM CSS定义

Question

我正在构建一个Chrome扩展，它向当前网页选项卡的页面DOM中注入了相当数量的JavaScript、CSS和HTML。它这样做是为了展示一个带有扩展功能的modal窗口。

我不能使用background或popup脚本来完成我需要做的事情，所以我必须使用一个注入到实际页面DOM中的content脚本。

到目前为止，我的问题是我必须非常小心CSS类名和JS，并且我发现如果页面中有一个CSS类与我的任何扩展CSS的名称相匹配，那么我的扩展就会凌驾于页面CSS之上！

我已经看到，其他一些必须在内容中执行大量HTML、CSS、JS的扩展最终会注入到页面中的自己的Iframe中，这有助于防止名称冲突。

在这种情况下，使用Iframe是标准的最佳实践吗？

我的扩展中的一个特性是做完整页面的屏幕截图，这需要我的contnet.js脚本向我的background.js脚本发送一条消息，负责调用CHrome API，并在页面视图中获取当前滚动位置的屏幕快照。

• 用户单击DOM模式窗口中的按钮
• content.js用视图端口的坐标向background.js发送消息。
• background.js用这些坐标截图。THen向content.js发送一条消息。
• 然后，content.js将页面向下滚动到下一个屏幕截图的视口区域，然后将这些新的坐标发送回background.js。
• 这个循环一直持续到整个页面的一个镜头被制作并缝合在一起，然后在完成后将新图像的URL发回给content.js。

因为Chrome需要在我的content.js和background.js之间来回发送消息，如果有iframe，则iframe必须与页面和iframe一起来回发送消息。

正因为如此，我不确定我是否可以使用iframe或甚至不？

另外，如果我确实使用了iframe，它将不会从远程服务器加载内容，而是以html的形式加载到页面中。

那么，这样做有什么最佳做法吗？

Answer 1

1. 使用内联样式而不是 您可以将css封装在content.js中，然后将其应用于目标元素，它不会干扰网页的原始设计。
2. 使用 阴影DOM 它为js/css提供了封装，并使您的组件易于与主文档的DOM分离。