一些避免社死的伪装
// ==UserScript==
// @name GPT to Wechat
// @description 一些避免社死的伪装
// @match https://chat.openai.com/*
// @copyright Chuxin Liang
// @version 1.2.2
// @license http://www.gnu.org/licenses/gpl-3.0.html
// @namespace https://blog.becomingcelia.com
// ==/UserScript==
// 设置 =====
// 显示在聊天列表名字下面的字
var customMessage = "天地玄黄，宇宙洪荒";
// 背景图链接
var customBackground = "https://images.unsplash.com/photo-1682241229580-e72acdf0eb6d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80";
// 修改图标
// 是否启用 (true / false)
var iconOption = true;
// 自定义图标链接
var customIcon = "https://cdn.jsdelivr.net/gh/liangchuxin/blog-imgs2/img/202304271042142.png";
// 自定义GPT头像
// 是否启用 (true / false)
var avatarOption = true;
// GPT3的
var customAvatar3 = "https://cdn.jsdelivr.net/gh/liangchuxin/blog-imgs2/img/202304272103095.webp";
// GPT4的
var customAvatar4 = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRTkvnkIq8QQXT1fNWhHrND3QZCRFnJl-3OvQ&usqp=CAU";
// 左侧栏时间标识（today, yesterday, etc.）
var timeLabel = false;
// 设置结束 ======
// Wechat styles
var style = document.createElement('style');
var basicStyle = '.flex.flex-grow.flex-col.gap-3 { margin-left: auto !important; padding: 8px 13px !important; border-radius: 5px !important; } .relative.flex { margin-left: auto !important; } .bg-gray-50 .relative.flex { margin-left: 0 !important; } .bg-gray-50 .flex.flex-col.relative.items-end { position: relative !important; top: unset !important; left: unset !important; bottom: unset !important; right: unset !important; } .flex.flex-col.relative.items-end { position: absolute !important; right: -51px !important; top: 20px !important; } .bg-gray-50 .flex.flex-grow.flex-col.gap-3 { width: auto !important; max-width: 100% !important; margin-right: auto !important; margin-left: 0 !important; } .markdown.prose.w-full.break-words p, .markdown.prose.w-full.break-words li, .flex.flex-col.items-start.gap-4.whitespace-pre-wrap.break-words { font-size: 14px !important; font-family: system-ui; } .text-base.m-auto, .group.w-full.text-gray-800, .h-full, .w-full.h-32.flex-shrink-0 { background: #111111 !important; } .group.w-full.text-gray-800 { border: none !important; } .relative.flex.flex-col.gap-1 { max-width: 100% !important; } .text-base.gap-4.m-auto { position: relative !important; } .absolute.bottom-0.left-0.w-full.border-t.pt-2 { width: 617px !important; } .relative.flex.h-full.flex-1.items-stretch { flex-direction: row-reverse !important; } .flex.flex-col.w-full.py-2.flex-grow.relative.border { background: transparent !important; border: 0 !important; box-shadow: none !important; } textarea.m-0.w-full.resize-none.border-0.bg-transparent.p-0.pr-7.pl-2 { font-size: 14px !important; font-family: system-ui !important; } textarea.m-0.w-full.resize-none.border-0.bg-transparent.p-0.pr-7.pl-2::placeholder { color: transparent !important; } .btn.btn-neutral.border-0 .flex.w-full.items-center.justify-center.gap-2 { font-size: 0 !important; } .flex.w-full.items-center svg.h-3.w-3 { margin-right: -7.5px !important; } .h-full.flex.ml-1.md.justify-center { margin-bottom: -4px !important; height: 54px px !important; } button.btn.relative.btn-neutral.border-0 { border: 0 !important; opacity: 0.3 !important; background: transparent !important; } .h-full.flex.ml-1.justify-center { margin-top: 1px !important; } div.overflow-hidden.w-full.h-full.relative.flex { height: 600px !important; width: 900px !important; margin: 0 auto !important; border: 1px solid !important; border-radius: 13px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 22px 70px 4px rgba(0, 0, 0, 0.56), 0 0 0 1px rgba(0, 0, 0, 0) !important; } div#__next { display: flex !important; align-items: center !important; background: url(' + customBackground + ') !important; background-size: cover !important; } .flex-1.overflow-hidden > div.h-full > div { height: 100%; overflow-y: auto; width: 702px !important; } .flex.flex-col.items-center.text-sm { margin: 0 128px 0 14px !important; } form.stretch.mx-2.flex.flex-row.gap-3 { margin-bottom: 20px !important; } a.flex.py-3.px-3.items-center.gap-3.relative.rounded-md.group { border-radius: 0 !important; padding: 15px 1rem !important; font-size: 13.5px !important; font-family: system-ui !important; } a.flex.py-3.px-3.items-center.gap-3.relative.rounded-md.group.bg-gray-800 { padding-bottom: 34px !important; } a.flex.py-3.px-3.items-center.gap-3.relative.rounded-md.group.bg-gray-900 { padding-bottom: 34px !important; } .from-gray-900, .from-gray-800 { display: none !important; } a.flex.py-3.px-3.items-center.gap-3.transition-colors.duration-200.text-white.cursor-pointer.text-sm.rounded-md.border.flex-shrink-0 { height: 25px !important; border-radius: 3px !important; margin: 10px 0 !important; border: 0 !important; font-size: 12px !important; } a.flex.py-3.px-3.items-center.gap-3.relative.rounded-md.cursor-pointer.break-all.pr-14.group::after, a.flex.py-3.px-3.items-center.gap-3.relative.rounded-md.cursor-pointer.break-all.group::after { content: "' + customMessage + '"; position: absolute; left: 44px; bottom: 10px; font-size: 12px; } .text-base.gap-4.m-auto { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; } .bg-gray-500 .relative.flex span { width: 30px !important; } .flex-1.text-ellipsis.max-h-5.overflow-hidden.break-all.relative { padding-right: 36px !important; }';
var darkStyle = '.bg-gray-50 .flex.flex-grow.flex-col.gap-3 { background-color: #2c2c2c !important; color: #eaeaea !important; } .absolute.bottom-0.left-0.w-full.border-t.pt-2 { background: #111111 !important; border-top: solid 1.5px #1d1d1d !important; } .flex.flex-col.w-full.py-2.flex-grow.relative.border { background: transparent !important; color: #e7e7e7 !important; border: 0 !important; } .px-3.pt-2.pb-3.text-center.text-xs.text-gray-600 span { color: #353435 !important; } div.overflow-hidden.w-full.h-full.relative.flex { border-color: #545454 #414141 #414141 #414141 !important; } a.flex.py-3.px-3.items-center.gap-3.relative.rounded-md.group { background-color: #191919 !important; } a.flex.py-3.px-3.items-center.gap-3.relative.rounded-md.group.bg-gray-800 { background-color: #302f30 !important; } a.flex.py-3.px-3.items-center.gap-3.transition-colors.duration-200.text-white.cursor-pointer.text-sm.rounded-md.border.flex-shrink-0 { background: #202020 !important; color: #646364 !important; } a.flex.py-3.px-3.items-center.gap-3.relative.rounded-md.cursor-pointer.break-all.pr-14.group::after, a.flex.py-3.px-3.items-center.gap-3.relative.rounded-md.cursor-pointer.break-all.group::after { color: #636263; } .text-base.m-auto, .group.w-full.text-gray-800, .h-full, .w-full.h-32.flex-shrink-0 { background: #111111 !important; } .flex.flex-grow.flex-col.gap-3 { background-color: #42b26a !important; color: #09110a !important; }';
var brightStyle = '.bg-gray-50 .flex.flex-grow.flex-col.gap-3 { background-color: #ffffff !important; color: #191919 !important; } .absolute.bottom-0.left-0.w-full.border-t.pt-2 { background: #f3f3f3 !important; border-top: solid 1px #e0e0e0 !important; } .flex.flex-col.w-full.py-2.flex-grow.relative.border { background: transparent !important; color: #171717 !important; border: 0 !important; } .px-3.pt-2.pb-3.text-center.text-xs.text-gray-600 span { color: #aaaaaa !important; } div.overflow-hidden.w-full.h-full.relative.flex { border-color: #FCFCFC #F5F5F5 #F6F6F6 #F5F5F5 !important; } a.flex.py-3.px-3.items-center.gap-3.relative.rounded-md.group { background-color: #f7f7f7 !important; } a.flex.py-3.px-3.items-center.gap-3.relative.rounded-md.group.bg-gray-800 { background-color: #dedede !important; } a.flex.py-3.px-3.items-center.gap-3.transition-colors.duration-200.text-white.cursor-pointer.text-sm.rounded-md.border.flex-shrink-0 { background: #eaeaea !important; color: #a4a4a4 !important; } a.flex.py-3.px-3.items-center.gap-3.relative.rounded-md.cursor-pointer.break-all.pr-14.group::after, a.flex.py-3.px-3.items-center.gap-3.relative.rounded-md.cursor-pointer.break-all.group::after { color: #acacac; } .text-base.m-auto, .group.w-full.text-gray-800, .h-full, .w-full.h-32.flex-shrink-0 { background: #f3f3f3 !important; } .flex.flex-grow.flex-col.gap-3 { background-color: #a9ea7a !important; color: #11170c !important; } .flex-1.text-ellipsis.max-h-5.overflow-hidden.break-all.relative { color: #181818 !important; } .scrollbar-trigger.relative.h-full.w-full.flex-1.items-start { border-right: solid 1px #e0e0e0; } .group button.flex.w-full.items-center:hover, .group:where([data-headlessui-state~=open]) button { background-color: #dedede !important; } .grow.overflow-hidden.text-ellipsis.whitespace-nowrap.text-left.text-white { color: #181818; } svg.h-4.w-4 { color: #adadad !important; } nav.flex.h-full.w-full.flex-col.p-2 { background: #f7f7f7 !important; }';
// style.setAttribute("id", "gpt-to-wechat");
style.innerText = basicStyle;
if (document.documentElement.classList.contains("dark")) {
style.innerText += darkStyle;
} else {
style.innerText += brightStyle;
}
if(!timeLabel) {style.innerText += " .sticky.top-0{display: none!important;}"}
var head=document.getElementsByTagName('head')[0]; head.appendChild(style);
head.appendChild(style);
var theme = document.documentElement.classList[0];
let themeInterval = setInterval(function(){
if (document.documentElement.classList[0] != theme) {
window.location.reload();
clearInterval(themeInterval);
themeInterval = null;
}
}, 100);
// Change Favicon
if (iconOption) {
var link = document.createElement('link'),
oldLink = document.getElementById('dynamic-favicon');
link.id = 'dynamic-favicon';
link.rel = 'shortcut icon';
link.href = customIcon;
if (oldLink) {
document.head.removeChild(oldLink);
}
document.head.appendChild(link);
}
// Change Profile Pic
function isGpt4() {
var divs = document.getElementsByTagName('div');
var i;
for (i = 0; i < divs.length; i++) {
var div = divs[i];
var styles = window.getComputedStyle(div);
var backgroundColor = styles.getPropertyValue('background-color');
if ((backgroundColor === 'rgb(0, 0, 0)' || backgroundColor === '#000' || backgroundColor === 'black') && div.tagName.toLowerCase() === 'div') {
var children = div.children;
for (var j = 0; j < children.length; j++) {
if (children[j].tagName.toLowerCase() === 'svg') {
return true;
}
}
}
}
return false;
}
function changeAvatar(version) {
var customAvatar;
if (version=="4") {
customAvatar = customAvatar4;
} else if (version=="3") {
customAvatar = customAvatar3;
}
var avatars = document.querySelectorAll('.group.w-full.bg-gray-50 .text-base.gap-4 .flex.flex-col.relative.items-end');
if (avatars.length === 0) {
return;
}
for (var i = 0; i < avatars.length; i++) {
if (avatars[i].hasChildNodes()) {
for (var j = avatars[i].childNodes.length - 1; j >= 0; j--) {
avatars[i].removeChild(avatars[i].childNodes[j]);
}
}
var newAvatar = document.createElement("div");
newAvatar.innerHTML = '<div class="relative flex"><span style="box-sizing: border-box; display: inline-block; overflow: hidden; width: initial; height: initial; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; position: relative; max-width: 100%;"><span style="box-sizing: border-box; display: block; width: initial; height: initial; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; max-width: 100%;"><img alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2738%27%20height=%2738%27/%3e" style="display: block; max-width: 100%; width: initial; height: initial; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px;"></span><img alt="Chuxin LIANG" srcset="' + customAvatar + '" src="' + customAvatar + '" decoding="async" data-nimg="intrinsic" class="rounded-sm" style="position: absolute; inset: 0px; box-sizing: border-box; padding: 0px; border: none; margin: auto; display: block; width: 0px; height: 0px; min-width: 100%; max-width: 100%; min-height: 100%;"></span></div>';
avatars[i].appendChild(newAvatar);
}
}
(() => {
let oldPushState = history.pushState;
history.pushState = function pushState() {
let ret = oldPushState.apply(this, arguments);
window.dispatchEvent(new Event('pushstate'));
window.dispatchEvent(new Event('locationchange'));
return ret;
};
let oldReplaceState = history.replaceState;
history.replaceState = function replaceState() {
let ret = oldReplaceState.apply(this, arguments);
window.dispatchEvent(new Event('replacestate'));
window.dispatchEvent(new Event('locationchange'));
return ret;
};
window.addEventListener('popstate', () => {
window.dispatchEvent(new Event('locationchange'));
});
})();
let interval;
window.addEventListener('locationchange', function(){
if (avatarOption) {
clearInterval(interval);
interval = null;
setTimeout(function() {
checkChange();
}, 450); // 半秒内重新检测gpt版本，如果网页响应慢导致异常建议上调
}
})
window.addEventListener('load', function() {
if (avatarOption) {
checkChange();
}
});
function checkChange() {
var numHistory = 0;
var avatarSet = false;
var setValue;
var stateSet = true;
interval = setInterval(function() {
var currentUrl = window.location.href;
var nodes = document.querySelectorAll('.bg-gray-50 .flex.flex-grow.flex-col.gap-3');
var nodesNum = nodes.length;
if(nodesNum == 1) {
var responseLength = document.querySelectorAll('.bg-gray-50 .flex.flex-grow.flex-col.gap-3 p')[0].innerHTML.length;
if(responseLength > 1 ){
numHistory = nodesNum;
if (avatarSet == false) {
setValue = isGpt4()?"4":"3";
avatarSet = true;
}
if (stateSet == true) {
changeAvatar(setValue);
}
} else {
}
} else {
if (nodesNum !== numHistory) {
numHistory = nodesNum;
if (avatarSet == false) {
setValue = isGpt4()?"4":"3";
avatarSet = true;
}
if (stateSet == true) {
changeAvatar(setValue);
}
}
}
}, 100); // 每 0.1 秒替换头像
}