Adding links to tags on StackExchange sites

This Greasemonkey script adds links to tags on StackExchange sites which allow for activating, deactivating and ignoring favorite and related tags by using UI components.

Since JavaScript is not my favourite language I'd be glad to hear what can be done more elegant, more beautiful, more performant, etc. (also by using jQuery, for instance).

```
// ==UserScript==
// @name SEQTAIL - StackExchange Questions' TAgs Inline Links
// @author Gerold 'Geri' Broser
// @license GNU GPLv3
// @namespace igb
// @description Adds links to all tags that allow for activating, deactivating and ignoring favorite and related tags by UI components rather than by editing the search field.
// @description:de Fügt zu allen Tags Links hinzu, die es erlauben Favorite und Related Tags über UI-Konponenten zu aktivieren oder zu deaktivieren, anstelle das Suchfeld zu bearbeiten.
// @include http://stackoverflow.com/questions*
// @include http://stackoverflow.com/unanswered*
// @include http://codereview.stackexchange.com/questions*
// @version 16.4.7
// @icon http://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico
// @run-at document-idle
// @tested-with Firefox 45.0.1, Greasemonkey 3.7; Chrome 49.0.2623.110, TamperMonkey 4.0.10
// ==/UserScript==

(function() { 'use strict';

console.debug("BEGIN SEQTAIL...");

function qouteRegexSpecialCharsIn(string) {
return string.replace(/([\[\]\(\)\{\}\|\?\+\-\*\^\$\\\.\!\=])/g, "\\$1");
}

// Adds links to all tags that allow to active, deactivate and ignore favorite and related tags
// by selecting rather than by editing the search field.
function addLinksTo(tags) {

for (var n = 0; n /g, "");

// 'ignore' tag
if (search !== "" // if search field is empty (an ignored tag cannot exist on its own in search field)...
&& search != "[" + tagName + "]" // ...and tag not the only active (see above)...
&& s

Since Stack Exchange already uses jQuery, I think it's a good idea to write userscripts using jQuery too. However, rewriting the whole code to use jQuery instead of native APIs would require a lot of work, so I will just comment on the code you wrote.

(function() { 'use strict';

I would put the 'use strict' statement in the next line.

You're using many semicolons. JavaScript has a nice feature called automation semicolon insertion, which means you almost don't need to use semicolons at all, with just a few exceptions. From npm style guide:


Don't use them [semicolons] except in four situations:

• for (;;) loops. They're actually required.

• null loops like: while (something) ; (But you'd better have a good reason for doing that.)

• case 'foo': doSomething(); break

• In front of a leading ( or [ at the start of the line. This prevents the expression from being interpreted as a function call or property access, respectively.

Note that it's only a matter of style. You don't have to follow it if you don't like it, but personally I think that if something is not required, there's no reason to use it.

You don't use quotes or apostrophes for string literals consistently. For example:

'use strict'
console.debug("BEGIN StackExchange Questions...")
document.getElementById('search')

Decide if you want to write string using either apostrophes or double quotes and use it consistently in the whole code. Personally, I prefer apostrophes, because they require to press only one key, whereas to insert a double quote character you have to hold Shift too.

And for example if you choose apostrophes and you want to make a string which contains apostrophes, feel free to use double quotes in this specific situation, so you don't have to escape the apostrophes with a backslash.

You're using document.evaluate() to select DOM elements. I don't really see any reason why it could be better than document.querySelector(), which uses CSS-style selectors. And unfortunately, it's not supported by IE at all. I think you should support at least IE 11, because still many people use it.

ECMAScript 6 has a lot of great features, and most of them are already supported in major browsers, but you aren't using any of them. For example, in for loop, you could use let instead of var, to limit the scope of the variable to the loop. This loop:

for (var n = 0; n < tags.snapshotLength; n++)

could be changed to:

for (let n = 0; n < tags.snapshotLength; n++)

Read more about let keyword on MDN docs.

I see you're using strict comparison operators (=== and !==) almost everywhere, but in one place I think you forgot one equal sign:

&& search != "[" + tagName + "]"

var i = document.createElement('a');

Try to use some more meaningful identifiers, for example ignoreTagLink.

i.style = "background-color: #e6e6e6; padding: 0 0.4em;";

Instead of using inline styles, I recommend you adding a class to the element, and define CSS rules for that class, like that:

var $style = document.createElement("style")
$style.textContent = `
.someClass {
  background-color: #e6e6e6;
  padding: 0 0.4em;
}
`
document.head.appendChild($style)

You're repeating some code — don't do this, it's a bad practice. Try to follow DRY (don't repeat yourself) principle.

Some lines of code are too lengthy, like this one:

var iTags = document.evaluate("//div[@id='interestingTags']/a", iTag, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);

You could split it into multiple lines like that:

var iTags = document.evaluate(
      "//div[@id='interestingTags']/a",
      iTag,
      null,
      XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
      null
    );

That's all issues I see for now, if I find some more, I'll edit this answer.

StackExchange Code Review Q#125083, answer score: 5