Javascript 从Chrome扩展替换网站的整个HTML文档_Javascript_Google Chrome

Javascript 从Chrome扩展替换网站的整个HTML文档

javascript google-chrome

Javascript 从Chrome扩展替换网站的整个HTML文档,javascript,google-chrome,Javascript,Google Chrome,我正在开发一个阻止网站的Chrome扩展，但没有使用Chrome内置的阻止方法。自定义的原因是，我需要为每个被阻止的网站显示一个自定义阻止页面-相同的模板，详细说明为什么这个特定的网站被阻止在我的content.js文件中，我在一个名为template的var中存储了一个完整的“this site is blocked”页面的HTML模板，因为我不知道如何从扩展名中的文件加载它，我每天都是Python程序员。。。。清单中包含大量URL，因此如果已加载content.js脚本，则应阻止或检查此站

我正在开发一个阻止网站的Chrome扩展，但没有使用Chrome内置的阻止方法。自定义的原因是，我需要为每个被阻止的网站显示一个自定义阻止页面-相同的模板，详细说明为什么这个特定的网站被阻止

在我的content.js文件中，我在一个名为template的var中存储了一个完整的“this site is blocked”页面的HTML模板，因为我不知道如何从扩展名中的文件加载它，我每天都是Python程序员。。。。清单中包含大量URL，因此如果已加载content.js脚本，则应阻止或检查此站点，以查看用户是否在本地使用“allow anyway”允许它。如果一个网站被屏蔽，我唯一能做的就是：

var template = `<html>...full web page template removed...</html>`;

chrome.runtime.sendMessage({method: "getSite", site: window.location.host.toString()}, (response) => {
  console.log(response.data);

  document.body.innerHTML = renderTemplate(template, response.data);
});

renderTemplate函数只是获取HTML，并使用response.data进行一些查找和替换，response.data是关于URL的数据，从一个后台脚本中获取，该脚本只是一个带有大量字典的.js文件

问题是，它显然只会替换块页面，而网站CSS会影响块页面。是否可以替换整个页面内容？尝试替换document.body时，所提供的值不是“HtmleElement”类型

我仍在学习JS+扩展开发，任何建议都值得赞赏。

使用document.write 您遇到的问题是您正在替换身体，而不是头部或任何位于身体外部的s

要替换所有html，您需要使用document.write。根据您想要覆盖的方式，您可能想要覆盖

实例替换所有html的示例如下所示：

newHTML = `<html>
  <head>
    <title>A Simple HTML Document</title>
  </head>
  <body>
    <p>This is a very simple HTML document</p>
    <p>It only has two paragraphs</p>
  </body>
</html>`

document.open()
document.write(newHTML)
document.close()

验证使用应该是选项>更多工具>开发人员工具，我们可以导航到控制台并获取内容

-> document.documentElement.outerHTML
<- html 
   <html><head>
   <title>
   A Simple HTML Document
   </title>
   </head>
   <body>
   <p>This is a very simple HTML document</p>
   <p>It only has two paragraphs</p>

   </body></html>"

这显示了它的外观，并替换了CSS背景。

非常感谢您，这正是我所需要的。我尝试过覆盖文档的所有属性，但并没有想到写！再次感谢！