将 Javascript 代码注入网页答案

【问题标题】：Inject Javascript code into a web page将 Javascript 代码注入网页
【发布时间】：2013-01-11 06:48:05
【问题描述】：

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

编辑：为了让我的问题更清楚，请参阅 this post 和 this post

【问题讨论】：

在 jquery 网站上搜索 .getScript();
你的问题不是很清楚。你想在哪里下载这个网页？这个任务似乎更适合服务器端脚本，而不是 javascript。
@DarinDimitrov 来自浏览器
从浏览器保存 HTML 文件只会保存初始标记，不会保存对 DOM 的任何 JavaScript 更改。
@Bergi 我不确定。不过，我可以使用 Firebug 编辑源代码并保存编辑后的代码。

标签： javascript html jquery javascript-injection

【解决方案1】：

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

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

【讨论】：

为了说明我的问题，请参阅this post
保护来自 javascript 的“注入”源不是一件容易的事。你说的“进一步处理”是什么？如果您告诉我们更多关于您的实际问题，我们可能会建议更好的方法来实现您的目标。
我希望数以百万计的网页使用预定义的标签进行注释，以便它们具有语义，从而可以被机器处理。
也可以查看this post

【解决方案2】：

如果您想将修改后的源代码保存为 html，您可以使用不同的方法，这取决于您要进行主要处理的内容。遗憾的是，使用 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 步 - 从打开的窗口文本区域复制粘贴代码

如果你想用 PHP 来做，你可以很容易地用 curl 下载页面并根据需要操作内容和保存文件。

【讨论】：

【解决方案3】：

您可以使用浏览器扩展程序，例如 Requestly 到 Inject custom Javascript/CSS on web pages。

你可以这样做。

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

屏幕截图 - 插入脚本规则

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

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

免责声明 - 我请求构建

【讨论】：