如何从您无权访问其源代码的站点编辑 HTML？

Question

在 Chrome 开发工具中，您可以对样式元素进行编辑和持久更改。

您还可以从任何网站编辑任何 HTML 并实时预览，编辑任何网站，包括您不拥有或无权访问的网站。

但是，我想坚持不懈地编辑 HTML，而不仅仅是样式元素。我该怎么做？

更具体地说，我想更改静态资源的 URL，就像它们在 CDN 上一样。

现在：

Request: http://www.targetsite.tld/
<html>
<img src="http://www.targetsite.tld/image1.jpg">
</html>

目标：

Request: http://www.targetsite.tld/
<html>
<img src="http://testcdn.tld/targetsite.tld/image1.jpg">
</html>

Hosts 文件编辑将无法工作，因为初始请求将无法解析到正确的服务器。我真的很想从现有服务器加载文档，而不是将整个源保存在某个地方，然后对其进行编辑。

我找到了这个 nodejs 脚本，但仍然希望我能在浏览器的客户端实现更简单的功能。

我可能需要某种浏览器扩展，允许我标记某些 dom 元素节点，为它们编写一些重写，保存此配置文件，然后重新加载页面。

有这样的东西吗？

Answer 1

答案是用户脚本。特别是用于 FireFox 的 GreaseMonkey 和用于 Chrome 的 TamperMonkey。这些浏览器 add-ons/extensions 允许您操作您访问的页面上的 DOM 元素，使用简单的 JavaScript 来实现您的目标。

这条路线，我达到了我的目标，但要注意一点：

浏览器首先解析原始 HTML，然后对它在原始源页面上找到的资产发出所有 HTTP 请求。只有这样，用户脚本才会操纵内容。您使用用户脚本即时进行的任何编辑都会在原始 HTML 之后加载。所以就我而言：

<img src="http://www.targetsite.tld/image1.jpg">

原始图像是从原始主机请求的。然后我在 TamperMonkey 中的用户脚本操纵 URL，导致浏览器也请求我的新 img:

<img src="http://testcdn.tld/targetsite.tld/image1.jpg">

换句话说，它并没有替换图像，而是复制了请求，改变了第二个。当然，这对性能测量等有影响。所以要小心。

How to edit HTML from a site you don't have access to source of?