我写了一个Mozilla Firefox Addon，它可以让我评论网站：当我打开一个网站并点击某个地方时，插件会在这个位置创建一个<div>框，我可以在其中输入评论文本。后来，当我再次打开网站时，插件会自动将我之前创建的评论框放在它们之前的位置。(类似于许多PDF阅读器中的评论功能等)
这导致了一个安全问题：网站可以使用事件侦听器来侦听新<div>元素的创建并读取它们的内容，从而允许它读取我的私人评论。
如何解决此安全问题？基本上，我想要一个Firefox插件将私有内容放在网站中，而网站应该无法通过JavaScript访问这些内容。(除非我愿意。)
我可以听取听众的意见，并在网站连接他们后立即将他们分离——但这听起来确实是一个可靠的解决方案。
是否有一个安全概念可以使我的插件分别对DOM进行更改，以控制对某些元素的访问？或者，是否可以实现某种覆盖，它不是网站DOM的实际部分，而是只能由插件访问？
其他插件也会出现类似的安全问题。他们是如何解决的？
如果您在文档中注入DOM，文档将始终能够对其进行操作，您实际上对此无能为力
1) 不要直接在文档中插入您的注释，而只是一个占位符，如果有注释的第一个单词，或者注释的图像版本(您可以使用canvas生成)，请将完整的注释保留在JavaScript插件范围中，这是无法从页面访问的：当您单击编辑或添加时，您可以打开panel并在那里进行编辑。
2) 注入一个iframe，如果你的页面远程位于另一个域中，应该不会有任何问题，父级的文档无法访问该iframe；反之亦然：您需要将内容脚本附加到您的iframe，以便与附加代码进行对话，然后您可以使用附加代码发送和接收来自iframe和父级文档的消息。如果您使用本地resource://文档，恐怕您需要一个糟糕的解决方法，并且您需要使用sandbox策略来避免父文档可以与iframe本身通信。请点击此处查看我的回复：Firefox插件SDK：将插件文件加载到iframe 中
3) 使用CSS：您可以通过页面模块中的contentStyle和contentStyleFile将CSS应用于文档。以这种方式附加的CSS不能被文档本身检查，您可以使用content将文本添加到页面中，而无需实际添加可以检查的DOM。例如，你的风格可能是：
span#comment-12::after{
content: 'Hello World';
}
您添加的DOM可能在哪里：
<div><span id='comment-12'></span></div>
如果页面试图检查跨度的内容，则会得到一个空的文本节点；而且，由于无法从页面本身检查以这种方式添加的样式表，因此它们无法使用样式规则来获取文本。
不确定是否有其他选择，这些都是我脑海中浮现的解决方案。
创建一个iframe并将所有事件绑定到新的DOM。通过为网站提供不同的域，您将阻止他们收听事件和更改。
插件可以使用devtools使用的匿名内容API来创建其节点highlighter覆盖。
尽管匿名内容上支持的操作相当有限，但对于您的用例来说，这可能不够，也可能不够。