☰

ChatGPT Artefacts

Claude-like Artefacts inside ChatGPT Code Blocks.

如何安装

您需要先安装一个扩展，例如 篡改猴、Greasemonkey 或 暴力猴，之后才能安装此脚本。

您需要先安装一个扩展，例如 篡改猴 或 暴力猴，之后才能安装此脚本。

您需要先安装一个扩展，例如 篡改猴 或 暴力猴，之后才能安装此脚本。

您需要先安装一个扩展，例如 篡改猴 或 Userscripts ，之后才能安装此脚本。

您需要先安装一款用户脚本管理器扩展，例如 Tampermonkey，才能安装此脚本。

您需要先安装用户脚本管理器扩展后才能安装此脚本。

（我已经安装了用户脚本管理器，让我安装！）

如何安装

您需要先安装一款用户样式管理器扩展，比如 Stylus，才能安装此样式。

您需要先安装一款用户样式管理器扩展，比如 Stylus，才能安装此样式。

您需要先安装一款用户样式管理器扩展，比如 Stylus，才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

（我已经安装了用户样式管理器，让我安装！）

作者
MartianInGreen
日安装量
0
总安装量
57
评分
0 0 0
版本
1.3.1
创建于
2024-09-19
更新于
2024-09-21
大小
35.2 KB
许可证
MIT
适用于

ChatGPT Artefacts

Description

ChatGPT Artefacts is a userscript that enhances your ChatGPT experience by adding Claude-like artefact functionality to code blocks. This script allows you to open code snippets in a side panel or a new tab, making it easier to view and interact with code examples provided by ChatGPT.

Key Features:

  • Run Demo Button: Adds a "Run Demo" button next to code blocks, allowing you to open the code in a slide-out side panel.

  • Open in New Tab Button: Provides an "Open in New Tab" button to view the code in a separate browser tab.

  • Slide-out Panel: A resizable side panel that displays the code content in an iframe for easy viewing.

  • Code Cleaning: Automatically removes the added buttons when displaying code in the side panel or new tab.

  • Responsive Design: The side panel is draggable and resizable, with a minimum width of 300px and a maximum of 900px.

  • Visual Enhancements: Hover effects and tooltips for buttons, improving user experience.

How to Use:

  1. Install the script using Tampermonkey or any compatible userscript manager.
  2. Navigate to ChatGPT at https://chatgpt.com/.
  3. Look for the new "Open Demo" and "Open in New Tab" buttons next to code blocks.
  4. Click "Open Demo" to view the code in a side panel, or "Open in New Tab" to open it in a new browser tab.

Notes:

  • The script automatically processes existing code blocks and observes for new ones as you interact with ChatGPT.
  • I recommend the use of this GPT.
  • An "Artefacts Active" indicator briefly appears when the script is loaded successfully.
  • The side panel can be closed using the "Close" button or by clicking outside the panel.
  • Works with Javascript. Must disable CSP policy. Disable at own risk. I recommend using something like CORS Unblock, downloading it from Github and changing the urls it is allowed to access in the manifest.json to only the https://chatgpt.com/ domain.

Compatibility:

This script is designed for use on the ChatGPT platform (https://*.chatgpt.com/*).

Author:

Issues and pull requests are welcome on the GitHub repository.

License:

This script is distributed under the MIT License.

Changelog

Version 1.3.1 (Current)

  • Added support for markdown artefacts.

Version 1.3

  • Added support for Mermaid diagrams.

Version 1.2.2

  • Fix: Opening of new Tab from Library

Version 1.2.1

  • Reworked library UI to be more compact

Version 1.2

  • Add Library for artefacts.
    • Added a library for artefacts.
    • Added save button to add artefacts to the library.
    • Added ability to run items in library in sidebar and in new tab.
    • Added ability to delete artefacts from the library.
    • Added ability to import and export artefacts from the library.

Version 1.1

  • Improvement: Auto reinitialization of the backend-processes when the observer is disconnected. Should lead to improved reliability of the buttons always appearing.

Version 1.0

  • Initial release with core functionality for opening code demos in a side panel or new tab.
  • Added responsive design for the side panel with drag-to-resize feature.
  • Implemented automatic code block processing and dynamic button addition.