Username_lookup.user.js

// ==UserScript==
// @name        Username lookup
// @namespace   .
// @include     http://chat.stackoverflow.com/search*
// @version     1
// @grant       none
// ==/UserScript==

boxHTML = '<div id="searchBoxBox" style="display:none"><div id="searchBox" style="outline:1px solid black; padding: 10px; min-height: 200px; display:inline-block; background-color: white"><div id="searchTermsBox" style="display:inline-block; padding:10px">Username: <input type="text" id="username"></input><br/><input type="button" id="searchButton" value="Search"></input></div><div id="namesBox" style="display:inline-block; overflow-y:auto; max-height:200px; min-width: 200px; white-space:nowrap"><span id="waitingMessage" style="display:none">Processing...</span><span id="namesListBox"></span></div></div></div>'

function setup(){
    //create lookup box
    node = document.createElement("span");
    node.innerHTML = boxHTML;

    console.log(node.childNodes);

    //add box to DOM
    form = document.getElementById("refine-search");
    form.appendChild(node);


    //create button that opens lookup box
    openSearchBoxButton = document.createElement("a");
    openSearchBoxButton.innerHTML = "(🔍)"
    openSearchBoxButton.title = "Username lookup";
    openSearchBoxButton.onclick = openSearchBoxButtonClicked

    //add button to DOM
    usernameBox = document.getElementById("user");
    usernameBox.parentNode.insertBefore(openSearchBoxButton, usernameBox.nextSibling);

    //register callback for lookup box's Search button
    document.getElementById("searchButton").onclick = searchButtonClicked;
}

function showSearchBox(){
    document.getElementById("searchBoxBox").style.display = "";
}

function hideSearchBox(){
    document.getElementById("searchBoxBox").style.display = "none";
}

function clearNameList(){
    var box = document.getElementById("namesListBox");
    while(box.firstChild){box.removeChild(box.firstChild);}
}

function openSearchBoxButtonClicked(){
    showSearchBox();
}

function searchButtonClicked(){
    makeRequest(document.getElementById("username").value);
}

//Send a request to the server asking for usernames matching the one we give it.
function makeRequest(name){
    if(name == ""){return;}
    //this won't work while we're testing on localhost, due to the same origin policy.
    //so we'll mock it with setTimeout
    
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "http://chat.stackoverflow.com/users/search?q=" + name, true);
    xhr.onload = function (e) {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          gotResponse(xhr.responseText);
        } else {
          //todo: implement
        }
      }
    };
    xhr.onerror = function (e) {
      //todo: implement
    };
    xhr.send(null);

    clearNameList();
    document.getElementById("waitingMessage").style.display = "";
}

//called when the server responds to our request for names/avatars.
function gotResponse(s){
    try{
    document.getElementById("waitingMessage").style.display = "none";
    var box = document.getElementById("namesListBox");
    clearNameList();

    var data = s.split("\n").map(JSON.parse);

    data.forEach(function(line){
        label = document.createElement("SPAN");
        label.appendChild(make_image(line));
        label.innerHTML += line["dn"];
        label.onclick = function(){
            console.log("item with id " + line["id"] + " was clicked.");
            hideSearchBox();
            saidByBox = document.getElementById("user");
            if(saidByBox){
                saidByBox.value = line["id"];
            }
        }

        box.appendChild(label);
        box.appendChild(document.createElement("BR"));
    });
    }
    catch(e){
        console.log(e);
    }
}

//create an image element suitable for both gravatars and non-gravatars
function make_image(line){
    var img = document.createElement("img");
    if(line["hash"][0] == "!"){
        img.src = line["hash"].slice(1);
    }else{
        img.src = "https://www.gravatar.com/avatar/" + line["hash"] + "?s=128&d=identicon&r=PG";
    }
    img.style.margin = "5px";
    img.style.maxWidth="32px";
    img.style.maxHeight="32px";
    img.style.verticalAlign="middle";
    return img;
}

try{
    console.log("If you can see this, there wasn't a syntax error.");
    setup();
}catch(e){
    console.log(e);
}

here too