将 Javascript 代码注入 web 页面

Question

我想将 web 页面下载为 html 文件。 在将 web 页面源代码保存到 html 文件之前，我想先编辑一些页面内容。 我假设我可以使用 Javascript 编辑内容。不幸的是我对 Javascript 没有什么经验。我想我必须将我的脚本注入 web 页面以便浏览器可以一起执行它们。 我应该如何编写脚本？ 我应该编写一个独立的脚本并将页面 url 传递给我的脚本以便它们可以同时执行吗？ 或者还有其他方法可以注入我的脚本？

编辑：为了弄清楚我的问题，请参阅这篇文章和这篇文章

Answer 1

由于您只是这样做一次，从浏览器JavaScript控制台启动脚本就足够了。 打开开发人员工具，导航到控制台选项卡，粘贴脚本内容，然后按Enter键。

要获取已编辑的HTML，请在控制台中评估表达式document.documentElement.outerHTML 。 将输出复制到您选择的文本编辑器，前面加上doctype，并将其另存为html。

Answer 2

如果你想将修改后的源码保存为html，你可以使用不同的aproaches，取决于你想要主要的。 遗憾的是，使用javascript保存文件很棘手并且取决于很多东西，因此您可以使用选项手动复制粘贴文件源或编写浏览器和设置特定的文件保护程序。 我更喜欢javascript + php组合解决方案。 或者，如果没有必要用javascript操纵某些东西，我会完全在php中完成它。

第1步 - 使用控制台打开浏览器，使用chrome和firefox CTRL + SHIFT + J并允许弹出窗口。 第2步 - 打开您想要的网页第3步 - 将下一个代码复制到控制台

//Script loading function
function load_script( source ) {
    var new_script  = document.createElement('script');
    new_script.type = 'text/javascript';
    new_script.src = source;
    new_script.className = 'MyInjectedScript';
    document.getElementsByTagName('head')[0].appendChild(new_script);
}
function escapeHtml(unsafe) {
  return unsafe
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&#039;");
}
//Load jQuery, if page do not have it by default
if (typeof(jQuery) != 'function') load_script('http://code.jquery.com/jquery-latest.js');

第4步 - 在控制台中进行操作

第5步 - 将下一个代码复制到控制台

//In the end remove your injected scripts
$('.MyInjectedScript').remove(); //Or jquery script will be in source
//get Document source
var doc_source = $('html',document).html();
doc_source = '<html>'+doc_source+'</html>';


var new_window = window.open('', '', 'scrollbars=yes,resizable=yes,location=yes,status=yes');
$(new_window.document.body).html('<textarea id="MySource">'+escapeHtml(doc_source)+'</textarea>');

第6步 - 从打开的窗口textarea复制粘贴代码

如果你想用PHP做，你可以轻松下载curl页面并操纵内容并根据需要保存文件。

Answer 3

您可以使用像Requestly这样的浏览器扩展在 web 页面上注入自定义 Javascript/CSS 。

这就是您可以做到的。

请求下载并打开规则页面
创建新规则并 Select 插入自定义脚本/CSS 规则类型
输入您的域（或页面 URL 模式）并定义您的脚本

屏幕截图 - 插入脚本规则

如果您正在寻找跨浏览器解决方案，那么您可以使用Requestly Desktop App并类似地配置您的规则。

在您的特定情况下，您可以选择一个选项，例如在页面加载后运行脚本，以便所有 DOM 元素在您修改/注释它们之前都出现在页面上。

免责声明 - 我按要求建造

将 Javascript 代码注入 web 页面

问题描述

3 个解决方案

解决方案1
2 已采纳 2013-01-11 06:57:55

解决方案2
1 2013-01-11 08:01:07

解决方案3
-1 2022-02-12 04:47:07

屏幕截图 - 插入脚本规则

将 Javascript 代码注入 web 页面

问题描述

3 个解决方案

解决方案1 2 已采纳 2013-01-11 06:57:55

解决方案2 1 2013-01-11 08:01:07

解决方案3 -1 2022-02-12 04:47:07

屏幕截图 - 插入脚本规则

解决方案1
2 已采纳 2013-01-11 06:57:55

解决方案2
1 2013-01-11 08:01:07

解决方案3
-1 2022-02-12 04:47:07