Skip to content

Instantly share code, notes, and snippets.

@bitmunja
Last active April 23, 2025 18:07
Show Gist options
  • Save bitmunja/c8136007f0eddbeec0e5e3bf328420f4 to your computer and use it in GitHub Desktop.
Save bitmunja/c8136007f0eddbeec0e5e3bf328420f4 to your computer and use it in GitHub Desktop.
ChatGPT width
// ==UserScript==
// @name ChatGPT / Gemini / Claude Width
// @namespace http://tampermonkey.net/
// @version 0.10
// @description increase chatgpt, gemini and claude box width
// @author bitmunja
// @license MIT
// @match https://gemini.google.com/*
// @match https://chat.openai.com/*
// @match https://chatgpt.com/*
// @match https://claude.ai/chat/*
// @icon data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant none
// ==/UserScript==
(function() {
'use strict';
// Convenience function to execute your callback only after an element matching readySelector has been added to the page.
function runWhenReady(readySelector, callback) {
var numAttempts = 0;
var tryNow = function() {
var elem = document.querySelector(readySelector);
if (elem) {
callback(elem);
} else {
numAttempts++;
if (numAttempts >= 34) {
console.warn(`Width script: giving up after 34 attempts. Could not find: ${readySelector}`);
} else {
setTimeout(tryNow, 250 * Math.pow(1.1, numAttempts));
}
}
};
tryNow();
}
// Function to apply width adjustment to the elements returned by the getElementsCallback
function applyWidth(getElementsCallback) {
const elements = getElementsCallback();
for (let i = 0; i < elements.length; i++) {
elements[i].style.setProperty('max-width', '98%', 'important');
}
}
// Generic function to observe mutations and apply width adjustments
function observeMutations(getElementsCallback) {
const observer = new MutationObserver(function(mutations) {
let eventRegistrationCount = 0;
mutations.forEach(function(mutation) {
if (mutation.type === 'childList') {
eventRegistrationCount++;
}
});
if(eventRegistrationCount > 0) {
applyWidth(getElementsCallback);
}
});
observer.observe(document.documentElement, { childList: true, subtree: true });
}
// Check the domain and apply the corresponding logic
const hostname = window.location.hostname;
if (hostname === 'chat.openai.com' || hostname === 'chatgpt.com') {
const getElements = () => document.querySelectorAll('.text-base');
runWhenReady('.text-base', function() {
applyWidth(getElements);
observeMutations(getElements);
});
} else if (hostname === 'gemini.google.com') {
const getElements = () => document.querySelectorAll('.conversation-container');
runWhenReady('.conversation-container', function() {
applyWidth(getElements);
observeMutations(getElements);
});
} else if (hostname === 'claude.ai') {
const getElements = () => {
const coreSelector = 'div[data-test-render-count]';
const l1Element = document.querySelector(coreSelector).parentElement;
const l2Element = l1Element.parentElement;
return [l1Element, l2Element]
}
runWhenReady('div[data-is-streaming]', function() {
applyWidth(getElements);
observeMutations(getElements);
});
}
})();
@fn5
Copy link

fn5 commented Apr 10, 2025

Hi, I would recommend changing

// @match https://gemini.google.com/app/*
to
// @match https://gemini.google.com/*

As when I use Gemini on an account signed into after the first, the interface is provided at https://gemini.google.com/u/3/app/* or similar.
I have been testing this change and so far it works fine.

@bitmunja
Copy link
Author

Thanks for that @fn5 I've not seen that url pattern but I believe you and will make the update.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment