我正在寻找一种使用WebExtensions在某些网站上显示孤立叠加层的方法.
iframe似乎是这样做的方式,因为它为css,js和DOM提供了一个完整的独立范围.另一个巧妙的事情是目标网站将无法阅读或更改内容.
在Chrome扩展程序中似乎没有任何问题,但在Firefox中使用WebExtensions,即使它们共享相同的语法,我也会收到安全警告/错误,但它不起作用.
我尝试过两种不同的东西:
创建一个没有src属性的iframe并将其注入到网站主体中.此方法失败,因为我在执行时收到CSP错误/警告iframe.contentWindow.document.open()
.
相关内容 - 脚本代码:
let html = `TEST
` let iframe = document.createElement('iframe') document.body.appendChild(iframe) iframe.contentWindow.document.open() iframe.contentWindow.document.write(html) iframe.contentWindow.document.close()
我尝试的另一件事(因为它会禁止网站访问内容会更有意义),就是将我的iframe代码放入overlay.html
我的WebExtension中的文件()中,并通过将其设置为src来使iframe加载browser.extension.getURL('overlay.html')
.
相关内容 - 脚本代码:
let iframe = document.createElement('iframe') iframe.src = browser.extension.getURL('overlay.html') document.body.appendChild(iframe)
在清单中,我web_accessible_resources
为此定义了overlay.html :
"web_accessible_resources": [ "overlay.html" ],
关于这一点的是,iframe根本不加载overlay.html文件.但它肯定是可用的,否则location.href = browser.extension.getURL('overlay.html')
将无法正常工作.如果这样做会非常方便,因为我可以将整个叠加层(html,css,js)存储为扩展中的单独文件.好像它将是一个独立的网站.使用内容脚本我可以访问它以添加新数据或其他任何内容.
编辑:
目前我正在使用srcdoc
iframe 的属性来设置它应包含的源代码(感谢wOxxOm).所以至少我有一些现在有用的东西.但我真正不喜欢这种方法的是我无法与内容脚本中的iframe内容进行交互.有趣的是,我可以在iframe的js代码中与父页面进行交互,但同样不能与内容脚本进行交互.将所有的html,css,js代码放入一个字符串而不是像普通网站这样的多个文件,这也非常麻烦,不方便且难以维护.