Often times chatrooms can get overrun by oneboxes. Room owners and mods can move irrelevant oneboxes to a bin but sometimes these messages are relevant and shouldn't be binned.

It would be really great if there was a way to minimize them client-side with the ability to maximize them if needed.

This will be incredibly helpful for things like book referrals from amazon that, quite frankly, can be huge.

Take the following screenshot for example: Example before minimized

Minimizing the first youtube onebox could look something like this: Example after minimized

Related: Make chat oneboxing smaller and less obnoxious - click to enlarge instead

inb4 duplicate: I am not suggesting we make them smaller by default, I am requesting a feature to completely minimize them onclick and not change default settings

  • 3
    I've a related, older feature request for collapsible question feeds in chat. Oct 28, 2013 at 14:32
  • 2
    minimize all the things! Oct 28, 2013 at 14:33
  • Sounds like a chance for someone to make a userscript (and get a ton of Meta upvotes ;))
    – Undo
    Oct 28, 2013 at 14:34
  • Yeah, those oneboxes look really relevant... Oct 30, 2013 at 11:29
  • way to miss the point @LightnessRacesinOrbit ;] Nov 14, 2013 at 16:10
  • 1
    @TravisJ Although similar, that's not a dupe as the one you linked is targeting comments. This is specifically targeting oneboxes. Mar 28, 2015 at 0:20

2 Answers 2


User scripts to the rescue!

Works exactly as specified above:





So far I've only tested this in Chrome but I expect it to work in any (sane) environment. I've thrown this together pretty quickly, so there may be a few gremlins. If you see anything that doesn't work in the wild, let me know - preferably with a reproducible example ;-)


  • Now fixes avatar sizes after show/hide operation
  • Use jQuery animations a bit more effectively (apparently I forgot how it works)
  • Link text for oneboxed historical chat messages now includes domain
  • 2
    +1 this looks fantastic Oct 28, 2013 at 18:39
  • @CarrieKendall Updated with a few general improvements Oct 29, 2013 at 10:15
  • Great! Though, in the case of a link to a Stack Exchange question, would it be possible to retain the title of the question in place of a truncated site url? Oct 29, 2013 at 11:47
  • @StéphaneGimenez Sure. The URL shortening logic just mirrors what SE does with links that are not oneboxed (clips it to 30 chars), but that is a little over-zealous in my view. The easiest way to adjust it to suit your needs with but to change this line in such a way that maxLength is a more sensible (larger) value. If you want to handle SE questions as a special case, that function would also be the place to add some custom code. Oct 29, 2013 at 12:05

I wanted to give this a try too,


Three collaped oneboxes and one expanded.
I added the toggle to the right side, as I don't see an hover menu for my own messages

If actually anyones ever going to use this. The text for the label is computed by the getLabel function. It gets called with the onebox element to generate the label for, feel free to parse information from it.

No jQuery, pure JavaScript only.Tested only in Chrome 32 and IE 11

(function () {
var chat = document.getElementById ("chat");
var oneboxes = chat.getElementsByClassName ("onebox"); 
var _userContainer = window.userContainer;
var _updateUserContainer = window.updateUserContainer;

function minimizeOneboxes (boxes) {
  var hasToggle, toggle, label, labelEle, container, classList;

  for (var i=0,j; j=oneboxes [i] ; i++) {
     classList = [].join.call ( j.classList, " ");

     hasToggle = !!~ classList.indexOf ("onebox-toggle");
     if (!hasToggle) {
        show = document.createElement ("a" )
        hide = document.createElement ("span");

        show.innerHTML = getLabel (j) + " onebox.";
        hide.innerHTML = " ▼ ";

        container = [].pop.call (j.parentElement.parentElement.children);

        j.parentElement.insertBefore (show, j);
        container.insertBefore (hide, container.children [0]);

        j.style.display = "none";
        j.className += " onebox-toggle";        

        hide.addEventListener ("click",toggleBox);


function getLabel (ele) {
        var classList = [].join.call ( ele.classList, " ");
        label = classList .split ("-").slice (1);
        for (var k = 0,l=label.length; k<l; k++) {
            var cur = label [k];
            label [k] = cur.slice (0,1).toUpperCase () + cur.slice (1)
        return label.join ("");

function toggleBox (e) {
   var source = e.srcElement || e.target;
   var target = source.parentElement.parentElement.children [1]
   var hidden = target.children [1].style.display === "none";

   source.innerHTML = hidden ?   " ▲ " : " ▼ ";

   target.children [0].style.display = hidden ? "none" : "";
   target.children [1].style.display = hidden ? "" : "none";

minimizeOneboxes (oneboxes);

if (!window.NoOneboxes) {

    window.userContainer = function () {

        oneboxes = chat.getElementsByClassName ("onebox");
        oneboxes.length && minimizeOneboxes (oneboxes);

        return _userContainer.apply (this, arguments);
    window.updateUserContainer = function () {
        oneboxes = chat.getElementsByClassName ("onebox");
        oneboxes.length && minimizeOneboxes (oneboxes);

        return _updateUserContainer.apply (this, arguments);
    window.NoOneboxes = true;

Not the answer you're looking for? Browse other questions tagged .