monolith-of-web：一键下载网页为静态HTML文件

monolith-of-web：一键下载网页为静态HTML文件

项目介绍

monolith-of-web 是一款基于 Chrome 浏览器的扩展程序，它可以将当前浏览的网页下载为一个静态的 HTML 文件。这款扩展程序是从命令行工具 Monolith 转移而来，通过将 Monolith 编译为 WebAssembly，实现了同样的功能。

项目技术分析

monolith-of-web 使用了 WebAssembly 技术，将 Monolith 编译为可以在浏览器中运行的程序。在用户点击扩展程序图标后，它会从当前标签页获取 HTML 文本和页面标题，并在后台页面生成一个静态的 HTML 文件。此外，monolith-of-web 还提供了丰富的配置选项，用户可以自定义是否在生成的 HTML 文件中包含 JavaScript、CSS、iframe 和图片等资源。

项目技术应用场景

monolith-of-web 适用于以下场景：

1. 离线阅读：用户可以将网页保存为静态 HTML 文件，方便在无网络环境下阅读。
2. 数据抓取：用户可以通过生成的 HTML 文件，获取网页中的数据，以便进行进一步分析。
3. 页面备份：用户可以为重要的网页创建一个备份，以防原页面被修改或删除。

项目特点

1. 易用性：monolith-of-web 以 Chrome 扩展程序的形式呈现，用户只需点击图标即可一键下载网页。
2. 配置灵活：用户可以自定义生成的 HTML 文件中包含的资源类型，满足不同需求。
3. 安全性：monolith-of-web 在生成 HTML 文件过程中，默认忽略 CORS 错误。当用户需要包含跨域资源时，可以通过配置允许 CORS 请求。
4. 跨平台：monolith-of-web 基于 WebAssembly 技术，可以在不同平台的 Chrome 浏览器中运行。

以下是关于 monolith-of-web 的详细使用说明：

安装

1. 从 Chrome Web Store 安装
2. 从 releases 页面下载 .crx 文件，手动安装

使用

1. 打开需要保存的网页
2. 点击浏览器工具栏上的 monolith-of-web 图标（将打开一个弹出窗口，如图所示）
3. 点击“Get Monolith”按钮
4. 等待处理完成
5. 生成的静态 HTML 文件将保存在下载文件夹中

在弹出窗口底部，用户可以通过切换图标来决定是否在生成的 HTML 文件中包含以下资源：

• JavaScript
• CSS
• <iframe/>
• 图片

弹出窗口右上角的按钮用于切换是否允许 CORS 请求。关于权限和 CORS 请求的详细信息，请参阅以下章节。

权限

• 必需权限
  • activeTab：此扩展从活动标签页获取 HTML 文本和页面标题以生成 monolith
  • storage：此扩展记住弹出窗口底部切换按钮的最后状态。
• 可选权限
  • http://*/* 和 https://*/*：允许在后台页面中发送任何跨域请求。这是一个运行时权限，因此此扩展默认不要求。**只有在看到由于后台页面中的 CORS 错误而生成的破碎 HTML 文件时，请启用“允许 CORS 请求”按钮。**关于这些权限的原因，请参阅下一节的“CORS 请求在后台页面”部分。

CORS 请求在后台页面

此扩展在 Chrome 扩展的背景页面中生成一个静态 HTML 文件。由于内容脚本的 CSP 在后台页面中不适用，因此后台页面中的一些资源无法获取。

默认情况下，此扩展忽略后台页面中的 CORS 错误。通常这不是问题，因为受 CSP 保护的资源通常是脚本，它们不会影响主要内容。但是，由于 CORS 错误，可能会生成一个破碎的单个 HTML 页面。

当用户看到由于后台页面中的 CORS 错误而生成的破碎页面时，请启用弹出窗口右下角的“允许 CORS 请求”按钮。此时会弹出权限对话框，要求发送 CORS 请求的权限。接受后，CORS 请求错误将被禁用，所有资源应能无误地获取。

在生成单个 HTML 文件后，此扩展将尽快撤销权限以提高安全性。

开发

WebAssembly 版本的 Monolith 在 分叉仓库 中开发。目前，它与原始仓库有一些差异和重复。在 reqwest 支持 Wasm 之前（0.10.0 之前），我的 Wasm 版本没有使用 reqwest，而是直接通过 js_sys 和 web_sys 软件包使用 fetch()。

此存储库将分叉的 Monolith 存储库作为 Git 子模块添加，并通过 Webpack 打包源代码以使用它。

许可

本项目遵循 MIT 许可进行分发。