Tampermonkey script to beautify related tags in Stack Exchange

Question

I've got the following code which is ran inside tampermonkey (It's a userscript), but there is a variable that is being declared, used, then overwritten by the next line. I'm looking for a way to shorten this code, or possibly remove the line if I can get the same results another way.

$(function() {
        /***** RELATED TAGS *****/
        var oldtags = main_content.find('div#related-tags, .module.js-gps-related-tags');
        var vctags = genSBWidget('Related Tags', '<svg aria-hidden="true" class="svg-icon" width="18" height="18" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"></path></svg>', 'relatedtags');

        oldtags.before(vctags).children('h4, a').remove().parent();

        vctags = main_content.find('div#visualcrumbs-relatedtags'); //THIS LINE

        vctags.prepend(oldtags.children()).children().wrapAll('<div class="js-watched-tag-list grid gs4 py4 fw-wrap">').each(function() {
            $(this).toggleClass('dno js-hidden js-tag grid--cell').children().slice(1).remove();
        });
});

genSBWidget simply generates some HTML, not sure if this is really relevant but I'll post the function anyways:

function genSBWidget(title, icon, innerid) {
        var widget = '\
        <div class="s-sidebarwidget" style="margin-bottom:19.500px;">\
            <div class="s-sidebarwidget--header grid">\
                 <span class="grid--cell mr4">'+ icon +'</span>\
                 <span class="grid--cell fl1">' + title + '</span>\
            </div>\
            <div id="visualcrumbs-'+ innerid +'" class="s-sidebarwidget--content fd-column"></div>\
        </div>\
        ';
        return widget;
    }

Side not: This script just takes "Related tags" in the right sidebar of stackoverflow and puts it into one of the new style boxes in the sidebar, and gives it the same styling as Watched Tags.

My actual userscript works on more than just related tags, it converts everything in the sidebar into this new style box, what I'm hoping to do from this question is learn some new methods of doing what I'm trying to do with related tags, so I can expand this accross my entire script.

Here is a minimal example of the script:

// ==UserScript==
// @name         Related Tags Beautifier
// @namespace    https://github.com/GrumpyCrouton/Userscripts
// @version      1.0
// @description  Customizes StackExchange to your liking.
// @author       GrumpyCrouton
// @match          *://*.stackoverflow.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    var $ = window.jQuery;

    /***** GLOBAL SITE CHANGES *****/
    var main_content = $('body div.container').find('div#content');

    $(function() {
        /***** RELATED TAGS *****/
        var oldtags = main_content.find('div#related-tags, .module.js-gps-related-tags');
        var vctags = genSBWidget('Related Tags', '<svg aria-hidden="true" class="svg-icon" width="18" height="18" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"></path></svg>', 'relatedtags');

        oldtags.before(vctags).children('h4, a').remove().parent();
        vctags = main_content.find('div#visualcrumbs-relatedtags');
        vctags.prepend(oldtags.children()).children().wrapAll('<div class="js-watched-tag-list grid gs4 py4 fw-wrap">').each(function() {
            $(this).toggleClass('dno js-hidden js-tag grid--cell').children().slice(1).remove();
        });

     });

    function genSBWidget(title, icon, innerid) {
        var widget = '\
        <div class="s-sidebarwidget" style="margin-bottom:19.500px;">\
            <div class="s-sidebarwidget--header grid">\
                 <span class="grid--cell mr4">'+ icon +'</span>\
                 <span class="grid--cell fl1">' + title + '</span>\
            </div>\
            <div id="visualcrumbs-'+ innerid +'" class="s-sidebarwidget--content fd-column"></div>\
        </div>\
        ';
        return widget;
    }

})();

Answer 1

[...], but there is a variable that is being declared, used, then overwritten by the next line.

Indeed. And it's not clear why it is that way. I believe you're talking about vctags, here:

vctags = main_content.find('div#visualcrumbs-relatedtags'); //THIS LINE

vctags.prepend(oldtags.children()).children().wrapAll('<div class="js-watched-tag-list grid gs4 py4 fw-wrap">').each(function() {
    $(this).toggleClass('dno js-hidden js-tag grid--cell').children().slice(1).remove();
});

The assignment here is unnecessary, because you could chain the call directly on main_content.find(...), without assigning the result to a variable. It would be quite natural that way.

I find long chains easier to read when split to multiple lines, like this:

main_content
    .find('div#visualcrumbs-relatedtags')
    .prepend(oldtags.children())
    .children()
    .wrapAll('<div class="js-watched-tag-list grid gs4 py4 fw-wrap">')
    .each(function() {
        $(this).toggleClass('dno js-hidden js-tag grid--cell').children().slice(1).remove();
    });

Unnecessary selector

The last .parent() here is unnecessary, you can safely drop it:

oldtags.before(vctags).children('h4, a').remove().parent();

Generating the new widget

The value of the second parameter is too long, and it's hard to read what else is on the line:

var vctags = genSBWidget('Related Tags', '<svg aria-hidden="true" class="svg-icon" width="18" height="18" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"></path></svg>', 'relatedtags');

It would be better to put that value in a variable:

var icon = '<svg aria-hidden="true" class="svg-icon" width="18" height="18" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"></path></svg>';
var vctags = genSBWidget('Related Tags', icon, 'relatedtags');

Like this, it's reasonably clear that the line var icon = '...' is just a very long string and so even if I don't scroll to the far right, I probably won't miss anything too important. And the parameters of the function call are now clearly visible.

Furthermore, in the posted code genSBWidget is only called once. If that's the case in your real code, then there's no need for the parameters, they could be inlined in the function itself.

Naming

I suggest some renames:

• oldtags to oldWidget and vctags to newWidget, as I think that describes better what they really are.
• main_content to mainContent to make the naming style consistently camelCase.

Alternative implementation

Putting the above together, I would write the main function this way:

$(function() {
    var icon = '<svg aria-hidden="true" class="svg-icon" width="18" height="18" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"></path></svg>';
    var newWidget = genSBWidget('Related Tags', icon, 'relatedtags');
    var oldWidget = mainContent.find('div#related-tags, .module.js-gps-related-tags');

    oldWidget.children('h4, a').remove();
    oldWidget.before(newWidget);

    mainContent
        .find('div#visualcrumbs-relatedtags')
        .prepend(oldWidget.children())
        .children()
        .wrapAll('<div class="js-watched-tag-list grid gs4 py4 fw-wrap">')
        .each(function() {
            $(this).toggleClass('dno js-hidden js-tag grid--cell').children().slice(1).remove();
        });
});

Note that I did not chain the calls on oldWidget, even though I could have written as:

    oldWidget
        .before(newWidget)
        .children('h4, a')
        .remove();

I think the way I wrote above is somewhat easier to read, clear and unambiguous without much thinking.