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>

主机文件编辑将无法正常工作，因为初始请求将无法解析为正确的服务器。我真的想从现有服务器加载文档，而不是将整个源保存在某处，然后编辑它。

我已经找到了这个nodejs脚本，但仍然希望我可以在浏览器中更简单地在客户端实现更多功能。

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

这样的事情存在吗？

Answer 1

答案是用户脚本。特别是GreaseMonkey for FireFox和TamperMonkey for Chrome。这些是浏览器加载项/扩展，允许您使用简单的JavaScript来操作您访问的页面上的DOM元素，以实现您的目标。

这条路线，我实现了一个警告：

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

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

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

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

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