# Showing links to Contributor Breakdown on Stackoverflow Docs

So Stackoverflow Documentation has added "Contributor Breakdown". For any given topic (and example) people can display who contributed in which way.

That page is only available if you know the link though. And it's not linked publicly in any way. Since I like these hidden pages, but I keep forgetting the correct URLs to use, I wrote a short userscript to insert these links where relevant:

// ==UserScript==
// @namespace    http://github.com/Vogel612/mini-se-userscripts/documentation-contributor-breakdown
// @version      0.1
// @description  Add links to the contributor breakdown for topics and examples on stackoverflow documentation.
// @author       Vogel612
// @include      /https?:\/\/stackoverflow\.com\/documentation\/.*
// @grant        none
// @run-at       document-end
// ==/UserScript==

(function() {
// these are in here for debugging purposes
})();
// because the page is modified on SE side after loading. 2 secs should be enough to wait

'use strict';

for (var i = 0; i < exampleLinks.length; i++) {
}
}

'use strict';
let href = /documentation/contributors/${section}/${linkId};
let elem = document.createElement("A");
elem.href = href;
elem.innerHTML = "CB";
elem.title = "Contributor Breakdown";
}


Note that the documentation pages are modified by StackOverflow after loading and that removes the link, if I add it before the page is completely built. That's why I run addLinks() with a 2 second delay.

Any and all aspects are up for critique, as always :)

• document.querySelectorAll("a.doc-topic-link")[0] ==> document.querySelector("a.doc-topic-link") – Tushar Sep 13 '16 at 15:54

1. No need for timeout, just attach in a place that doesn't get overwritten: after the title.
2. Since the extracted link id number is always the last, we can process all links in one go, extracting section name from a link's class name via doc-(\w+)-link to make the pattern self-evident.
3. Instead of magic split indexes I suggest using a simple \d regexp to extract all digits.
4. Building DOM elements by individual properties is unreadable, it's a thing from '00s, I suggest using the equally fast (or faster) and much more readable insertAdjacentHTML.

The entire code boils down to:

for (let link of document.querySelectorAll("a.doc-topic-link, a.doc-example-link")) {
link.insertAdjacentHTML('afterend', 
<a href="/documentation/contributors/${section}/${lastNumber}"
title="Contributor Breakdown">CB</a>
);
}

• re your third point ... thinking about it a little more it's unfortunately not quite as simple as you make it to be, because the link to examples still contains the id of the containing topic. Accordingly what you recommend doesn't work quite as easily there :) Adding it after the title is a somewhat interesting idea, but I think it's semantically incorrect to do so, so I won't do it ... – Vogel612 Oct 3 '16 at 11:27
• #3 is okay because it gets the last number, although I can make it more reliable: let lastNumber = new URL(link.href).pathname.match(/\/(\d+)\//g).pop().slice(1, -1); As for #1, it's now invalid since the updated docs site overrides the click event, but semantic considerations are much less important when hacking something. – wOxxOm Oct 3 '16 at 11:41
• For example, #1 can be implemented by inserting the link into a topic/example container: p.ip.fi/Tu8L – wOxxOm Oct 3 '16 at 12:00

You're using 'use strict'; in all functions except the top one. Why not declare it at the top of your file?

You seem to have thought about readability. You're declaring variables for just that purpose here:

    let currentLink = exampleLinks[i];


So why oh why do I see magic numbers in your code?

setTimeout(addLinks, 2000);

• Because if you put it at the top of the file outside a function you get use the function form of "use strict"; which is annoying with linters – cat Sep 13 '16 at 18:07