Chrome扩展，在浏览器显示之前替换响应代码中的HTML

Posted 2023-03-05

【中文标题】Chrome扩展，在浏览器显示之前替换响应代码中的HTML

【英文标题】：Chrome extension, replace HTML in response code before browser displays it

【发布时间】：2011-09-09 21:57:48

【问题描述】：

我想知道是否有某种方法可以做这样的事情： 如果我在特定站点上，我希望直接从我的计算机（例如 file:///c:/test.js）加载一些 javascript 文件，而不是从服务器加载。

为此，我在考虑是否有可能制作一个扩展程序，该扩展程序可以更改响应中的 html 代码，浏览器在显示它之前就可以得到它。所以整个过程应该是这样的：

请求已完成 浏览器从服务器获取响应 #response is changed# - 这是扩展进来的部分 浏览器解析更改的响应并使用该新响应显示页面。

它甚至不必是 Chrome 扩展程序。它应该只是完成上述工作。它可以阻止原始文件并提供另一个文件（DNS/代理？）或过滤我计算机中的整个 HTTP 流量并将特定代码替换为另一个匹配的响应。

【参考方案1】：

您可以使用WebRequest API 来实现这一点。例如，您可以添加一个onBeforeRequest 监听器并重定向一些请求：

chrome.webRequest.onBeforeRequest.addListener(function(details)

  var responseData = "<div>Some text</div>"
  return redirectUrl: "data:text/html," + encodeURIComponent(responseData);
, urls: ["https://www.google.com/"], ["blocking"]);

这将显示带有文本“一些文本”的 <div> 元素，而不是 Google 主页。请注意，您只能重定向到允许 Web 服务器本身重定向到的 URL。这意味着重定向到file:/// URL 是不可能的，如果这些是web accessible，您只能重定向到扩展内的文件。 data: 和 http: URL 工作正常。

【参考方案2】：

在 Windows 中，您可以使用 Proxomitron (proxomitron.info)，它是一个本地代理，可以拦截正在加载到浏览器中的任何页面或文件，并使用正则表达式（无 DOM 解析）在它出现之前对其进行更改由浏览器渲染。