Google chrome extension Chrome扩展弹出窗口与运行CSS冲突的DOM w/o之间的交互

经过数小时的研究，我发现有多种方法可以做类似的事情。但我不想让自己以错误的方式来处理这个问题，所以我希望得到关于如何实现以下目标的任何建议

单击扩展图标时，我想将工具栏加载到当前页面。此工具栏有许多链接和表单，可以：

与原始页面交互（DOM侦听器，更改DOM）

在原始页面上创建其他扩展弹出窗口

向外部资源提出请求

从JS的角度来看，我认为将我自己的所有HTML直接注入页面并通过一个内容脚本处理功能是最容易的。在意识到我永远无法解释弹出窗口中的所有CSS冲突后，我放弃了这种方法

相反，这是我到目前为止得到的。当单击我的扩展图标时，我将一个div注入当前页面，并通过

chrome.Extension.getURL（'popup1.html'）

加载一个源于

popup.html

的iframe。这就是我被卡住的地方。通过将我的内容加载到iframe中，我隔离了所有CSS问题。但是假设我在父页面上选择了文本，然后单击我的

popup1.html

中的一个按钮。然后，是否有方法将所选文本传递回

popup1.html

，或在新的

popup2.html

中显示所选文本

---

我希望，一旦我了解了如何进行这种交互的工作流程，我就可以继续开发了。谢谢你的帮助

我曾考虑采用类似的方法，但考虑到这篇文章已经有2年多的历史了，我不确定这是否仍然是最好的方法。我最终找到了一篇最近发表的关于这一主题的文章。它非常有助于我理解Chrome extensions中的不同环境如何相互通信：