☰

ChatGPT Artefacts with Enhanced Library

Claude-like Artefacts inside ChatGPT Code Blocks with Save functionality and an Enhanced Library. Open in Side Panel, Open in New Tab, or Save to Library.

目前為 2024-09-20 提交的版本，檢視 最新版本。

如何安裝

您需要先安裝使用者腳本管理器擴展，如 Tampermonkey、Greasemonkey 或 Violentmonkey 之後才能安裝該腳本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安裝使用者腳本管理器擴充功能，如 Tampermonkey或 Violentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能，如 Tampermonkey或 Userscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展，比如 Tampermonkey，才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

（我已經安裝了使用者腳本管理器，讓我安裝！）

如何安裝

你需要先安裝一款使用者樣式管理器擴展，比如 Stylus，才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展，比如 Stylus，才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展，比如 Stylus，才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

（我已經安裝了使用者樣式管理器，讓我安裝！）

作者
MartianInGreen
評價
0 0 0
版本
1.2
建立日期
2024-09-19
更新日期
2024-09-20
尺寸
30.8 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.2 (Current)

  • 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.