Chrome Bookmarklet 可让您使用当前复制到剪贴板的任何包含的 css 和 javascript 呈现完整的 HTML 页面。也适用于 SVG 代码。与 ChatGPT Canvas 一起使用时很有用。
为什么这个书签很有用 ChatGPT 最近发布了canvas画布功能，非常适合生成和查看结构化内容。但是，它目前缺乏生成 HTML 或 SVG 代码直接预览的功能。 此书签小工具可让您直接在浏览器中快速预览 HTML 内容，从而填补了这一空白。
您无需将代码复制到 IDE、保存文件并刷新页面，而是可以跳过所有这些步骤，直接查看实时内容。
只需使用 ChatGPT 或 Claude 界面上的“复制到剪贴板”按钮，然后单击此书签小工具即可立即查看呈现为完整 HTML 页面的内容。它也适用于 SVG 图形，使其适用于 Web 开发和设计任务。
Minified (Use this for the bookmarklet)
javascript:(function(){try{navigator.clipboard.readText().then(function(clipboardText){if(clipboardText){var newWindow=window.open("","_blank","width=800,height=600");newWindow.document.open();newWindow.document.write(clipboardText);newWindow.document.close();}else{alert('Clipboard is empty. Please copy some text to the clipboard first.');}}).catch(function(err){console.error('Failed to read clipboard contents: ',err);alert('An error occurred while trying to access the clipboard. Please ensure your browser allows clipboard access.');});}catch(e){console.error('An error occurred:',e);alert('An error occurred while trying to open the new window with the clipboard content.');}})();
|
可读格式：
javascript:(function() {
try {
//从剪贴板读取文本
navigator.clipboard.readText()
.then(function(clipboardText) {
// 检查剪贴板中是否有任何内容
if (clipboardText) {
// 以指定的宽度和高度打开新窗口
var newWindow = window.open("", "_blank", "width=800,height=600");
// 在新窗口中打开文档，并将剪贴板内容写入其中
newWindow.document.open();
newWindow.document.write(clipboardText);
newWindow.document.close();
} else {
//提示用户剪贴板是否为空
alert('Clipboard is empty. Please copy some text to the clipboard first.');
}
})
.catch(function(err) {
// 处理从剪贴板读取数据时出现的任何错误
console.error('Failed to read clipboard contents: ', err);
alert('An error occurred while trying to access the clipboard. Please ensure your browser allows clipboard access.');
});
} catch (e) {
//处理任何其他意外错误
console.error('An error occurred:', e);
alert('An error occurred while trying to open the new window with the clipboard content.');
}
})();
|
如何保存书签
- 复制上面的缩小书签代码。
- 在 Chrome（或其他浏览器）中打开书签栏。
- 右键单击书签栏并选择“添加页面...”或“添加书签”。
- 在URL 字段中，粘贴小书签代码（确保它以 开头javascript:）。
- 为您的书签命名（例如“HTML 预览器”），然后单击“保存”。
- 确保已将 HTML 内容复制到剪贴板。
- 只需单击书签栏中的HTML 预览器书签即可。
- 将打开一个新标签，立即呈现 HTML 内容。
- 跳过打开 IDE、保存文件和刷新浏览器的过程，从而节省时间。
- 无需任何其他工具即可立即预览 HTML 的更改。
网友： 另一种方法是将其粘贴到具有预览功能的在线 HTML 编辑器中。这是我制作的一个： https://no-gravity.github.io/html_editor/
这样做的好处是您也可以随后编辑 html。
它还具有将 HTML 渲染为图像的功能（通过“渲染”按钮）。我想知道是否可以将该图像反馈给 ChatGPT，以提供有关其编码内容的视觉反馈？也许它会回答“哦，现在我看到了，让我们把页眉上的边距弄小一点，背景更丰富多彩一点” :)