- // ==UserScript==
- // @name ChatGPT Copy as Markdown with MathJax Support
- // @name:zh-CN 支持数学公式的ChatGPT Markdown一键复制
- // @namespace http://tampermonkey.net/
- // @version 0.6
- // @description Copy the chatGPT Q&A content as a markdown text, with MathJax Render Support, you can use this together with 'OpenAI-ChatGPT LaTeX Auto Render (with MathJax V2)' that adds support for math render, based on 'chatGPT Markdown' by 赵巍໖.
- // @description:zh-cn 将chatGPT问答内容复制成markdown文本,并支持MathJax渲染内容导出,与'OpenAI-ChatGPT LaTeX Auto Render(with MathJax V2)'一起使用可以渲染公式, 基于赵巍໖的'chatGPT Markdown'。
- // @license MIT
- // @author jbji
- // @match https://chat.openai.com/chat
- // @match https://chat.openai.com/chat/*
- // @icon https://chat.openai.com/favicon-32x32.png
- // @grant none
- // ==/UserScript==
-
- (function () {
- 'use strict';
- var mathFixEnabled = true;
- function toMarkdown() {
- var main = document.querySelector("main");
- var article = main.querySelector("div > div > div > div");
- var chatBlocks = Array.from(article.children)
- .filter(v => v.getAttribute("class").indexOf("border") >= 0);
- // for chatgpt plus
- if (chatBlocks.length > 0 && chatBlocks[0].classList.contains("items-center")) {
- chatBlocks.shift(); // remove first element from array
- }
- var new_replacements = [
- //['\\', '\\\\', 'backslash'], //Don't need this any more cause it would be checked.
- ['`', '\\`', 'codeblocks'],
- ['*', '\\*', 'asterisk'],
- ['_', '\\_', 'underscores'],
- ['{', '\\{', 'crulybraces'],
- ['}', '\\}', 'crulybraces'],
- ['[', '\\[', 'square brackets'],
- [']', '\\]', 'square brackets'],
- ['(', '\\(', 'parentheses'],
- [')', '\\)', 'parentheses'],
- ['#', '\\#', 'number signs'],
- ['+', '\\+', 'plussign'],
- ['-', '\\-', 'hyphen'],
- ['.', '\\.', 'dot'],
- ['!', '\\!', 'exclamation mark'],
- ['>', '\\>', 'angle brackets']
- ];
-
- // A State Machine used to match string and do replacement
- function replacementSkippingMath(string, char_pattern, replacement) {
- var inEquationState = 0; // 0:not in equation, 1:inline equation expecting $, 2: line euqation expecting $$
- var result = "";
- for (let i = 0; i < string.length; i++) {
- if(string[i] == '\\'){
- result += string[i];
- if (i+1 < string.length) result += string[i+1];
- i++; // one more add to skip escaped char
- continue;
- }
- switch(inEquationState){
- case 1:
- result += string[i];
- if(string[i] === '$'){
- inEquationState = 0; //simply exit and don't do further check
- continue;
- }
- break;
- case 2:
- result += string[i];
- if(string[i] === '$'){
- if (i+1 < string.length && string[i+1] === '$'){ //matched $$
- result += '$';
- inEquationState = 0;
- i++; // one more add
- }
- //else is unexpected behavior
- continue;
- }
- break;
- default:
- if(string[i] === '$'){
- if (i+1 < string.length && string[i+1] === '$'){//matched $$
- result += '$$';
- inEquationState = 2;
- i++; // one more add
- }else{ //matched $
- result += '$';
- inEquationState = 1;
- }
- continue;
- }else if(string[i] === char_pattern[0]){ //do replacement
- result += replacement;
- }else{
- result += string[i];
- }
- }
- }
-
- return result;
- }
-
- function markdownEscape(string, skips) {
- skips = skips || []
- //reduce function applied the function in the first with the second as input
- //this applies across the array with the first element inside as the initial 2nd param for the reduce func.
- return new_replacements.reduce(function (string, replacement) {
- var name = replacement[2]
- if (name && skips.indexOf(name) !== -1) {
- return string;
- } else {
- return replacementSkippingMath(string, replacement[0], replacement[1]);
- }
- }, string)
- }
-
- function replaceInnerNode(element) {
- if (element.outerHTML) {
- var htmlBak = element.outerHTML;
- if(mathFixEnabled){
- //replace mathjax stuff
- var mathjaxBeginRegExp = /(<span class="MathJax_Preview".*?)<scr/s; //this is lazy
- var match = mathjaxBeginRegExp.exec(htmlBak);
- while(match){
- htmlBak = htmlBak.replace(match[1], '');
- //repalace math equations
- var latexMath;
- //match new line equations first
- var latexMathNLRegExp = /<script type="math\/tex; mode=display" id="MathJax-Element-\d+">(.*?)<\/script>/s;
- match = latexMathNLRegExp.exec(htmlBak);
- if(match){
- latexMath = "$$" + match[1] + "$$";
- htmlBak = htmlBak.replace(match[0], latexMath);
- }else{
- //then inline equations
- var latexMathRegExp = /<script type="math\/tex" id="MathJax-Element-\d+">(.*?)<\/script>/s;
- match = latexMathRegExp.exec(htmlBak);
- if(match){
- latexMath = "$" + match[1] + "$";
- htmlBak = htmlBak.replace(match[0], latexMath);
- }
- }
- match = mathjaxBeginRegExp.exec(htmlBak);
- }
- }
-
- var parser = new DOMParser();
- //default code block replacement
- var nextDomString = htmlBak.replace(/<code>([\w\s-]*)<\/code>/g, (match) => {
- var doc = parser.parseFromString(match, "text/html");
- return "`" + (doc.body.textContent) + "`";
- });
- return parser.parseFromString(nextDomString, "text/html").body.children[0];
- }
- return element;
- }
-
- var elementMap = {
- "P": function (element, result) {
- let p = replaceInnerNode(element);
- result += markdownEscape(p.textContent, ["codeblocks", "number signs"]);
- result += `\n\n`;
- return result;
- },
- //this should be unordered!
- "UL": function (element, result) {
- let ul = replaceInnerNode(element);
- Array.from(ul.querySelectorAll("li")).forEach((li, index) => {
- result += `- ${markdownEscape(li.textContent, ["codeblocks", "number signs"])}`;
- result += `\n`;
- });
- result += `\n\n`;
- return result;
- },
- "OL": function (element, result) {
- let ol = replaceInnerNode(element);
- var olStart = parseInt(ol.getAttribute("start") || "1"); //bug fix thanks to original author
- Array.from(ol.querySelectorAll("li")).forEach((li, index) => {
- result += `${index + olStart}. ${markdownEscape(li.textContent, ["codeblocks", "number signs"])}`;
- result += `\n`;
- });
- result += `\n\n`;
- return result;
- },
- "PRE": function (element, result) {
- var codeBlocks = element.querySelectorAll("code");
- //first get class name
- var regex = /^language-/;
- var codeType = '';
- for(var c of codeBlocks){
- var classNameStr = c.className.split(' ')[2];
- if (regex.test(classNameStr)){
- codeType = classNameStr.substr(9);
- }
- }
- //then generate the markdown codeblock
- result += "```" + codeType + "\n";
- Array.from(codeBlocks).forEach(block => {
- result += `${block.textContent}`;
- });
- result += "```\n";
- result += `\n\n`;
- return result;
- }
- };
- var TEXT_BLOCKS = Object.keys(elementMap);
-
- var mdContent = chatBlocks.reduce((result, nextBlock, i) => {
- if (i % 2 === 0) { // title
- let p = replaceInnerNode(nextBlock);
- let text = markdownEscape(p.textContent, ["codeblocks", "number signs"]);
- let lines = text.split('\n');
- for (let j = 0; j < lines.length; j++) {
- result += `> ${lines[j]}\n`;
- }
- result += '\n';
- }else{
- //try to parse the block
- var iterator = document.createNodeIterator(
- nextBlock,
- NodeFilter.SHOW_ELEMENT,
- {
- acceptNode: element => TEXT_BLOCKS.indexOf(element.tagName.toUpperCase()) >= 0
- },
- false,
- );
- let next = iterator.nextNode();
- while (next) {
- result = elementMap[next.tagName.toUpperCase()](next, result);
- next = iterator.nextNode();
- }
- }
- return result;
- }, "");
- return mdContent;
- }
- //for copy button
- //var copyHtml = `<div id="__copy__" style="cursor:pointer;position: fixed;bottom: 210px;left: 20px;width: 100px;height: 35px;background: #333333;border: 1px solid #555555;border-radius: 5px;color: white;display: flex;justify-content: center;align-items: center;transition: all 0.2s ease-in-out;"><span>Copy .md</span></div>`;
- // for copy function
- //var copyElement = document.createElement("div");
- //document.body.appendChild(copyElement);
- //copyElement.outerHTML = copyHtml;
-
- // listen and add element
- // select the body element
- var body = document.querySelector('body');
-
- // create a new MutationObserver instance
- var observer = new MutationObserver(function(mutations) {
- // iterate over the mutations array
- mutations.forEach(function(mutation) {
- // if a div element was added to the body
- if (mutation.type === 'childList'){
- //TypeError: undefined is not an object (evaluating 'mutation.addedNodes[0].nodeName')
- if(mutation.addedNodes[0] && mutation.addedNodes[0].nodeName === 'DIV'
- && mutation.addedNodes[0].id === 'headlessui-portal-root') {
- // do something
- setTimeout(function(){var navListHidden = document.querySelector('#headlessui-portal-root').querySelector('div > div > div > div.flex > div.flex > div.flex > nav');
- addCopyButton(navListHidden);},300);
- }
- }
- });
- });
-
- // set the observer options
- var options = {
- childList: true, // listen for changes to child nodes
- subtree: true // listen for changes in all descendant nodes
- };
-
- // start observing the body element
- observer.observe(body, options);
-
- function addCopyButton(navigationList) {
- if(navigationList.childNodes[2].text == 'Copy .md'){ //avoid duplicate
- return;
- }
- var date = new Date();
- var time = date.getTime();
- var id = "__copy__" + time;
- var copyButton = document.createElement("a");
- copyButton.id = id;
- copyButton.innerHTML = '<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>'
- +'<span>Copy .md</span>';
- copyButton.className = 'flex py-3 px-3 items-center gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm';
- navigationList.insertBefore(copyButton, navigationList.childNodes[2]);
-
- //for anchor
- var copyAnchor = document.getElementById(id);
- copyAnchor.addEventListener("click", () => {
- // Get the `span` element inside the `div`
- let span = copyAnchor.querySelector("span");
-
- // Change the text of the `span` to "Done"
- span.innerText = "Copied!";
-
- // Use `setTimeout` to change the text back to its original value after 3 seconds
- setTimeout(() => {
- span.innerText = "Copy .md";
- }, 1000);
-
- // Perform the rest of the original code
- navigator.clipboard.writeText(toMarkdown()).then(() => {
- //alert("done");
- });
- });
- }
- //default case
- setTimeout(function(){
- var navList = document.querySelector('#__next').querySelector("div > div.hidden > div > div > nav");
- addCopyButton(navList);
- },600);
- //ensure next conversation works.
- setTimeout(function(){
- var nextConversationObserver = new MutationObserver(function(mutations) {
- mutations.forEach(function(mutation) {
- //console.log(" Mutation detected. Trying to add copy button...");
- });
- setTimeout(function(){
- var navList = document.querySelector('#__next').querySelector("div > div.hidden > div > div > nav");
- addCopyButton(navList);
- },400);
- });
- //console.log("Trying to setup observation...");
- nextConversationObserver.observe(document.querySelector("#__next"), { childList: true });
- //console.log("Over.");
- },1100);
- /**
- window.addEventListener("load", function (event) {
- // Your code here, for example:
- console.log("Page loaded");
- });
- **/
- })();