从我的网站获取 HTML 页面并将其注入到我的 chrome 扩展中答案

【问题标题】：Getting the HTML page from my website and inject it inside my chrome extension从我的网站获取 HTML 页面并将其注入到我的 chrome 扩展中
【发布时间】：2015-07-28 06:13:41
【问题描述】：

我想从我的网站链接中获取 html 页面，并像 html 一样再次将其注入到我的 google chrome 扩展中的 popup.html 页面中我需要使用 JavaScript 来编写代码，我不需要任何 jquery，因为我之前用 jquery 做了一部分

$.get('some website ', function(data) {
  $('.result').html(data);
  alert('Load was performed.');
});

但我希望 JavaScript 代码从我想在代码中定义它的链接中获取 html

例如，我有像www.something.com/page.html 这样的网站我需要获取 page.html 的源代码并将其注入 popup.html 这意味着扩展程序将显示page.html

我希望这是一个很好的解释

【问题讨论】：

您只是在寻找 innerHTML 吗？理解你的问题有点困难......
您想要一个 iframe 来在弹出窗口中显示您的网站，还是想要从您的网站复制 html 并将其放入您的弹出窗口中？
不，我需要从页面获取 html，例如：www.some.com/page.html 之后我需要在 popup.html 中发布 page.html

标签： javascript html google-chrome google-chrome-extension

【解决方案1】：

这应该可以解决问题，但请注意 security implications 将一堆 HTML 注入另一个文档 - 这是导致 XSS 的简单方法：

var element = ... // some element in your popup.html document
var request = new XMLHttpRequest();
request.onload = function() {
  element.innerHTML = this.responseText;
};
request.open("get", "http://www.some.com/page.html", true);
request.send();

您还需要向您的清单添加一个权限，以允许您的扩展程序对"http://www.some.com" 执行跨站点 XHR。假设没有其他权限：

"permissions": [
  "http://www.somecom/"
],

从安全 POV 来看，向 some.com 询问 JSON 数据，通过 JSON.parse() 解析，然后在 Chrome 扩展程序中构建您需要的任何 UI 会更有意义。使您的扩展程序也更加稳定/灵活，因为所有 UI 都包含在 Chrome 扩展程序中，而不是分布在扩展程序和 some.com 中。

或者，如果page.html 足够静态，请将其捆绑到您的扩展中，并使用类似于上述代码的代码 sn-p 注入它，但使用chrome.extension.getUrl('page.html') 作为request.open() 的 URL。

无论您的 page.html 是来自其他站点还是来自扩展程序内部，您都可能需要修复图像、脚本、样式表的相对 URL（Chrome 不会在此处为您执行此操作），例如通过在它们的 src/href 属性前面加上 http://www.some.com/ 来再次将它们指向预期的资源。

【讨论】：