我正在寻找一种使用 WebExtensions 在某些网站上显示独立叠加层的方法。
iframe 似乎是解决此问题的方法，因为它为 css、js 和 DOM 提供了一个完整的独立范围。另一件好事是目标网站将无法读取或更改内容。
在 Chrome 扩展中似乎没有任何问题，但在 Firefox 中使用 WebExtensions，即使它们共享相同的语法，我也会收到安全警告/错误并且它不起作用。
我尝试了两种不同的方法:
创建一个没有 src 属性的 iframe 并将其注入(inject)网站主体。
此方法失败，因为我在执行 iframe.contentWindow.document.open() 时收到 CSP 错误/警告。
相关内容脚本代码:
let html = `
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>TEST</h1>
</body>
</html>
`
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 设置为 browser.extension.getURL('overlay.html') 让 iframe 加载它。
相关内容脚本代码:
let iframe = document.createElement('iframe')
iframe.src = browser.extension.getURL('overlay.html')
document.body.appendChild(iframe)
在 list 中，我为此将 overlay.html 定义为 web_accessible_resources:
"web_accessible_resources": [
"overlay.html"
],
问题是 iframe 根本不会加载 overlay.html 文件。但是肯定是可以用的，不然location.href = browser.extension.getURL('overlay.html')就不行了。如果这可行的话，那将是非常方便的，因为我可以将整个叠加层(html、css、js)作为单独的文件存储在我的扩展中。就好像它将是一个独立的网站。使用内容脚本我可以访问它以添加新数据或其他内容。
编辑:
目前我正在使用我的 iframe 的 srcdoc 属性来设置它应该包含的源代码(感谢 wOxxOm)。所以至少我现在有一些有用的东西。但我真正不喜欢这种方法的是，我无法与内容脚本中的 iframe 内容进行交互。有趣的是，我可以从 iframe 的 js 代码中与父页面交互，但同样不能与内容脚本交互。将所有 html、css、js 代码放入一个字符串中，而不是像普通网站那样放入多个文件中，这也非常困惑、不方便且难以维护。
最佳答案
问题
首先，我们知道问题是安全问题，到底是什么问题？好吧，当尝试通过设置 iframe src 将扩展资源加载到 iframe 时，浏览器会提示安全问题并阻止 iframe 通过不同的协议(protocol)连接，在本例中为“moz-extension://”。
解决方案
从扩展上下文加载 html 等并作为字符串注入(inject)。
实事求是
为了解决这个问题，我们可以将 iframe 的 src 属性设置为 data:text/html;charset=utf8,${markup}。
这直接告诉 iframe 内容是 html，它使用 utf8 编码，后面是原始标记。我们完全绕过了 iframe 通过网络加载任何资源的需要。
Firefox 内容脚本的执行上下文与加载它的页面是分开的。这意味着您可以在不违反 CSP 的情况下发出 xhr 请求。
如果你向你的标记发出一个 xhr 请求，你可以得到响应的内容作为一个字符串，并直接将它注入(inject)到 iframe src 属性中。
因此内容脚本:
function loaded (evt) {
if (this.readyState === 4 && this.status === 200) {
var html = this.responseText;
console.log(html);
var iframe = document.createElement('iframe');
iframe.src = 'data:text/html;charset=utf-8,' + html;
document.body.appendChild(iframe);
console.log('iframe.contentWindow =', iframe.contentWindow);
} else {
console.log('problem loading');
}
}
var xhr = new XMLHttpRequest();
xhr.overrideMimeType("text/html");
xhr.open("GET", browser.extension.getURL('test.html'), false);
xhr.addEventListener("readystatechange", loaded);
xhr.send(null);
用一个简单的 HTML 文件
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta charset="utf8" />
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
现在您已成功将 html 模板注入(inject)到目标 iframe 中。
如果您需要任何图像、脚本、css 文件等，您需要根据上述方法编写一个引导加载程序，将新的脚本标签等直接注入(inject)到 iframe 文档中。
关于javascript - Firefox WebExtension，独立的 HTML 覆盖，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41751264/
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
我有一个包含模块的模型。我想在模块中覆盖模型的访问器方法。例如:classBlah这显然行不通。有什么想法可以实现吗？ 最佳答案 您的代码看起来是正确的。我们正在毫无困难地使用这个确切的模式。如果我没记错的话，Rails使用#method_missing作为属性setter，因此您的模块将优先，阻止ActiveRecord的setter。如果您正在使用ActiveSupport::Concern(参见thisblogpost)，那么您的实例方法需要进入一个特殊的模块:classBlah
在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这
我有一个在Linux服务器上运行的ruby脚本。它不使用rails或任何东西。它基本上是一个命令行ruby脚本，可以像这样传递参数:./ruby_script.rbarg1arg2如何将参数抽象到配置文件(例如yaml文件或其他文件)中？您能否举例说明如何做到这一点？提前谢谢你。 最佳答案 首先，您可以运行一个写入YAML配置文件的独立脚本:require"yaml"File.write("path_to_yaml_file",[arg1,arg2].to_yaml)然后，在您的应用中阅读它:require"yaml"arg
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
我在pry中定义了一个函数:to_s，但我无法调用它。这个方法去哪里了，怎么调用？pry(main)>defto_spry(main)*'hello'pry(main)*endpry(main)>to_s=>"main"我的ruby版本是2.1.2看了一些答案和搜索后，我认为我得到了正确的答案:这个方法用在什么地方？在irb或pry中定义方法时，会转到Object.instance_methods[1]pry(main)>defto_s[1]pry(main)*'hello'[1]pry(main)*end=>:to_s[2]pry(main)>defhello[2]pry(main)
在Ruby类中，我重写了三个方法，并且在每个方法中，我基本上做同样的事情:classExampleClassdefconfirmation_required?is_allowed&&superenddefpostpone_email_change?is_allowed&&superenddefreconfirmation_required?is_allowed&&superendend有更简洁的语法吗？如何缩短代码？ 最佳答案 如何使用别名？classExampleClassdefconfirmation_required?is_a
我们的git存储库中目前有一个Gemfile。但是，有一个gem我只在我的环境中本地使用(我的团队不使用它)。为了使用它，我必须将它添加到我们的Gemfile中，但每次我checkout到我们的master/dev主分支时，由于与跟踪的gemfile冲突，我必须删除它。我想要的是类似Gemfile.local的东西，它将继承从Gemfile导入的gems，但也允许在那里导入新的gems以供使用只有我的机器。此文件将在.gitignore中被忽略。这可能吗？ 最佳答案 设置BUNDLE_GEMFILE环境变量:BUNDLE_GEMFI
我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.
我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'