时间戳

首页 > 解决方案 > 从 Chrome 扩展替换网站的整个 HTML 文档

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

问题描述

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

在我的content.js文件中，我将“此站点被阻止”页面的完整 HTML 模板存储在一个名为 var 的变量中template（因为我无法弄清楚从扩展名内的文件中加载它，我白天是一名 Python 编码员...... ）。清单包含大量 URL，因此如果已加载 content.js 脚本，则应阻止该站点（或检查本地用户是否已通过“无论如何允许”允许它）。如果一个网站应该被阻止，我唯一要做的就是：

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 进行一些查找 + 替换 - 这是有关 URL 的数据，从后台脚本中获取，该脚本只是一个带有大量字典的 .js 文件。

问题是它显然只替换了<body>，并且网站 CSS 会影响阻止页面。是否可以替换整个页面内容？试图替换document.body完全抛出The provided value is not of type 'HTMLElement'.

我仍在学习 JS + 扩展开发，任何建议表示赞赏。

标签： javascriptgoogle-chrome

解决方案

使用 document.write

您遇到的问题是您正在替换身体，而不是头部（或任何驻留在身体之外的 <script> ）。

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

例子

替换所有 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()

确认

使用Chrome 开发者工具（应该是选项 > 更多工具 > 开发者工具），我们可以导航到控制台并获取内容

-> 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>"

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

推荐阅读