Decorate the AI icon and the background of chat frame in ChatGPT app

chatgpt-ai-decorator.user.js

// ==UserScript==
// @name         chatgpt-ai-decorator
// @namespace    https://tomoyukim.net/
// @version      0.1
// @description  Decorate the AI icon and the background of chat frame in ChatGPT app
// @author       tomoyukim
// @match        https://chat.openai.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const imageUrl = '<your-image-url>';
    const backgroundUrl = imageUrl;

    function changeUserIcon() {
        const container = document.querySelectorAll('.items-end>div:first-of-type>div:has(svg>path[d^="M37.5324 16.8707C37.9808"])');
        if (container) {
            container.forEach(e => {
                const svgElement = e.firstElementChild;
                svgElement.style.display = 'none';
                e.style.cssText = `background-image:url(${imageUrl}) !important; background-size:36px !important;`;
            });
        }
    }

    function changeBackground() {
        const frame = document.querySelector('div[role=presentation]>div.flex-1>div>div');
        if (frame) {
            frame.style.cssText = `background-image: url(${backgroundUrl}) !important; background-size:contain !important; background-repeat: no-repeat !important; background-position: center !important`;
            const c = frame.children;
            for (let i = 0; i < c.length; i++) {
                c[i].style.opacity = 0.9;
            }
        }
    }

    window.onload = function() {
        changeUserIcon();
        changeBackground();
    };

    const observer = new MutationObserver((mutations) => {
        // Note: add any filter condition if necessary.
        changeUserIcon();
        changeBackground();
    });
    const body = document.querySelector('body');
    observer.observe(body, { childList:true, subtree:true });
})();