This guide shows how to add a row of model buttons to ChatGPT, hide/show the native dropdown with a checkbox, and remember your last used model — all without page refreshes.
- Chrome (or any Chromium browser)
- The extension “User JavaScript and CSS” (from the Chrome Web Store)
This runs 100% locally. No data leaves your browser. You can remove it at any time.
- Install User JavaScript and CSS.
- Open its options page and add a new site entry for:
https://chatgpt.com/*
(optional: addhttps://chat.openai.com/*if you still use that host)
- In that site entry, paste your CSS in the CSS box and your JavaScript in the JS box.
- Save.
Tip: if the extension has a setting for run-at, choose document-end (default is fine).
If you ever tweak CSS/JS, reload the ChatGPT tab to apply.
- A quick-switch bar of model buttons added into the header (right of the model text).
- A small checkbox (fixed size) to show/hide the native dropdown so the header doesn’t “jump”.
- No page reload when switching models (it updates via the History API).
- Remembers the last used model and reapplies it on the home screen.
- Auto-learns the real model keys the site expects (see “Learning keys” below).
- The little checkbox to the left of the quick bar toggles “Show dropdown model picker”.
- Checked → dropdown visible (useful the first time you teach/learn mappings).
- Unchecked → dropdown hidden (prevents layout shifts when the model label changes).
- Your preference is saved and persists across sessions.
You can remove, reorder, or comment out the items in the BUTTONS list.
(This list lives near the top of your userscript.)
const BUTTONS = [
{ label: '5 Fast', fallbacks: ['gpt-5-instant'] },
{ label: '5 Thinking', fallbacks: ['gpt-5-thinking'] },
{ label: '5 Thinking mini', fallbacks: ['gpt-5-t-mini', 'gpt-5-thinking-mini', 'gpt-5-mini', 'gpt-5-thinking-fast'] },
{ label: 'GPT-4o', fallbacks: ['gpt-4o'] },
{ label: 'GPT-4.1', fallbacks: ['gpt-4.1', 'gpt-4-1', 'gpt4.1'] },
{ label: 'o3', fallbacks: ['o3'] },
{ label: 'o4-mini', fallbacks: ['o4-mini'] },
]- Reorder the objects to change the button order.
- Comment out or delete any object to remove that button.
- Add new models by following the shape
{ label, fallbacks }.
Some models use internal keys that differ from the label (e.g., “5 Thinking mini” → gpt-5-t-mini).
The script learns these automatically:
- Keep the checkbox checked (dropdown visible).
- Use the native dropdown once to select each model at least one time.
- The script detects the resulting URL key and saves a mapping: label → key.
- After that, your quick buttons will switch without reload and without the dropdown.
You can also seed or fix a mapping manually in the Console:
__qm.setMapping('5 Thinking mini', 'gpt-5-t-mini')
- See current mapping table
__qm.map() - Clear the mapping cache (if you want to re-learn)
__qm.clear() - Programmatically select a model by label
__qm.select('GPT-4o') - Quick state check (header label, URL param, etc.)
__qm.state() - Manually set a mapping
__qm.setMapping('5 Thinking mini', 'gpt-5-t-mini')
Mappings and preferences are stored in
localStorageunder keys like:
qm_modelKeyByLabel_v2(label → key map)qm_lastLabel_v2(last used label)qm_show_native_picker(checkbox state)
- A button doesn’t work yet
Use the native dropdown to pick that model once (with the checkbox on). Then try the button again. - Dropdown briefly flashes when sending a message
This is already handled by applying the “hide” class on<html>, which is stable across re-renders. If you still see a flash, ensure you updated to the latest CSS/JS with that change. - The bar moved or styles changed after a site update
You can put the bar inside the left header wrapper or keep your CSS override that sets:#page-header { justify-content: flex-start !important }#page-header > .flex.items-center:last-of-type { margin-left: auto }
- Dark-mode checkbox looks too bright
The CSS uses a custom-styled checkbox with a dark fill and white checkmark.
- This is a local UI enhancement. It doesn’t bypass permissions, doesn’t send data elsewhere, and doesn’t reload pages.
- If you disable or remove the userscript, ChatGPT returns to normal immediately.
- Toggle off or delete the site entry in User JavaScript and CSS, then refresh ChatGPT.
- If you want to wipe local settings: open DevTools Console and run
__qm.clear().
Once the mappings are learned (or seeded), you can hide the dropdown with the checkbox and enjoy one-click model switching that never shifts your header around.