在Chrome开发者工具中，您可以编辑并对样式元素进行持久更改。
https://developer.chrome.com/devtools/docs/workspaces
您还可以编辑任何网站上的任何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脚本，但仍然希望我可以在浏览器中更简单地在客户端实现更多功能。
http://www.deanmao.com/2012/08/28/modify-a-site-you-dont-own/
我可能需要某种浏览器扩展，允许我标记某些dom元素节点，为它们写一些重写，保存此配置文件，然后重新加载页面。
这样的事情存在吗？
In Chrome Dev Tools you can edit and make persistent changes to style elements.
https://developer.chrome.com/devtools/docs/workspaces
You can also edit any HTML from any site and preview it live, sort of editing any site including ones you don't own or have access to.
However, I want to persistently, for me at least, edit the HTML, not just the style elements. How can I do this?
More specifically, I want to change the URLs of the static resources as if they're on a CDN.
Now:
Request: http://www.targetsite.tld/ <html> <img src="http://www.targetsite.tld/image1.jpg"> </html>Goal:
Request: http://www.targetsite.tld/ <html> <img src="http://testcdn.tld/targetsite.tld/image1.jpg"> </html>Hosts file editing won't work as the initial request will then not resolve to the right server. I really want to load the document from the existing server, not save the entire source off somewhere, then edit that.
I've found this nodejs script but remain hopeful I could achieve something more simply on the client side within the browser.
http://www.deanmao.com/2012/08/28/modify-a-site-you-dont-own/
I probably need some kind of browser extension that allows me to tag certain dom element nodes, write some rewrites for them, save this profile and then reload the page.
Does something like this exist?
最满意答案
答案是用户脚本。 特别是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">换句话说，它没有那么多替换图像，它复制请求，改变第二个。 当然，这对性能测量等有影响。所以要小心。
The answer is User Scripts. In particular, GreaseMonkey for FireFox and TamperMonkey for Chrome. These are browser add-ons/extensions which allow you to manipulate DOM elements on the pages you visit, using simple JavaScript to achieve your goals.
This route, I achieved my goal with one caveat:
The browser first parses the original HTML and hence then makes all the HTTP requests for the assets it finds on the original source page. Only then does the User Script manipulate the content. Any edits you make on-the-fly with your user script then gets loaded after the the original HTML. So in my case:
<img src="http://www.targetsite.tld/image1.jpg">The original image gets requested from the original host. Then my user script in TamperMonkey manipulates the URLs, causing the browser to than also request my new img:
<img src="http://testcdn.tld/targetsite.tld/image1.jpg">In other words, it doesn't so much replace the image, it duplicates the request, altering the second one. This, of course, has implications for performance measurements etc. So beware.
更多推荐
发布评论