实时编辑HTML并获取完整源码：自定义书签工具遇问题

我太懂你这种困扰了——试了一堆WYSIWYG编辑器不是忽略<html>标签，就是把你压缩好的HTML乱格式化，完全不符合需求！你用的那段书签代码确实能让页面变成可编辑状态，但核心问题在于：contentEditable和designMode只是修改了浏览器实时渲染的DOM树，并没有同步更新页面的原始HTML源码，所以直接查看源码自然看不到你编辑的内容。

解决方案：分两步走（书签工具版） #

我给你整理了两个实用的书签代码，完美解决你的需求：

1. 开启网页实时编辑模式

把这段代码保存为书签，点击后就能直接在页面上编辑内容：

javascript:(function(){
  document.body.contentEditable = 'true';
  document.designMode = 'on';
  alert('✅ 页面已进入可编辑状态，直接修改内容即可！');
})();

2. 获取编辑后的完整HTML源码

编辑完成后，点击这个书签，就能把当前DOM序列化后的完整HTML下载成文件（或者复制到剪贴板）：

版本1：直接下载为HTML文件

javascript:(function(){
  // 把整个文档的DOM序列化为HTML字符串
  const fullHtml = document.documentElement.outerHTML;
  // 创建Blob对象并生成下载链接
  const blob = new Blob([fullHtml], { type: 'text/html' });
  const downloadUrl = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = downloadUrl;
  a.download = 'edited-page.html';
  a.click();
  // 清理临时URL
  URL.revokeObjectURL(downloadUrl);
})();

版本2：复制源码到剪贴板

如果不想下载文件，直接复制源码到剪贴板用这个版本：

javascript:(function(){
  const fullHtml = document.documentElement.outerHTML;
  navigator.clipboard.writeText(fullHtml)
    .then(() => alert('✅ 编辑后的HTML源码已复制到剪贴板！'))
    .catch(err => {
      console.error('复制失败:', err);
      alert('❌ 复制失败，请手动复制下方源码:\n\n' + fullHtml);
    });
})();

为什么这个方法有效？ #

document.documentElement.outerHTML会把当前整个DOM树（包括你编辑后的所有修改）完整序列化为HTML字符串，这和浏览器加载的原始HTML不同——它是实时反映当前页面状态的源码，完全保留你的编辑内容，也不会乱格式化你的压缩代码。

小提示 #

如果遇到部分网站有内容安全策略（CSP）限制导致书签无法运行，你可以打开浏览器的开发者工具（F12），把代码直接粘贴到控制台执行，效果是一样的。

内容的提问来源于stack exchange，提问作者Gracie williams