UserScript: IMDb.com - Adds IMDb Code at the top right of the IMDB page for copying it to clipboard for use in movie search engines

userscript_copy_imdb_code.js

// ==UserScript==
// @name         Adds IMDb Code at the top right of the IMDB page for copying it to clipboard for use in movie search engines
// @namespace    http://tampermonkey.net/
// @version      0.3
// @description  try to take over the world!
// @author       You
// @match        https://www.imdb.com/title/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    var div =  document.createElement("div");
    div.id = "imdb-code-container";

    var input = document.createElement("input");
    input.type = "text";
    input.value = document.location.pathname.replace("/title/", "").replace(new RegExp("\/.*?$"), "");
    input.id = "imdb-code";

    input.onclick = function() {
        this.select();
        document.execCommand("copy");
        document.getElementById("imdb-code-tooltip").style.opacity = 1;
        document.getElementById("unselect").select();
    };
    input.onmouseout = function() {
        document.getElementById("imdb-code-tooltip").style.opacity = null;
    };

    div.append(input);

    var hidden = document.createElement("input");
    hidden.type = "text";
    hidden.value = "x";
    hidden.id = "unselect";

    div.append(hidden);

    var tooltip = document.createElement("span");
    tooltip.id = "imdb-code-tooltip";
    tooltip.innerHTML = "Copied to ciipboard";

    div.append(tooltip);

    document.body.append(div);

    // Function for additional CSS
    var sheet = (function() {

        // Create the <style> tag
        var style = document.createElement("style");

        // WebKit hack :(
        style.appendChild(document.createTextNode(""));

        // Add the <style> element to the page
        document.head.appendChild(style);

        return style.sheet;
    })();

    var tooltipTextSize = "40px / 3";

    // Add additional CSS
    sheet.addRule("div#imdb-code-container", '\
                  position: absolute;\
                  top: 0;\
                  right: 0;\
                  font-family: "Arial";\
                  font-size: calc(' + tooltipTextSize + ');\
    ', 0);
    sheet.addRule("input#imdb-code", '\
                  position: absolute;\
                  top: 0;\
                  right: 0;\
                  width: 5em;\
                  padding: 0 0.25em;\
                  margin: 0.25em;\
    ', 0);
    sheet.addRule("span#imdb-code-tooltip", '\
                  position: relative;\
                  right: 0.25em;\
                  top: calc(1em + ' + tooltipTextSize + ' + 0.25em);\
                  width: auto;\
                  padding: 5px;\
                  color: white;\
                  background-color: #555;\
                  border-radius: 6px;\
                  text-align: center;\
                  z-index: 1;\
                  pointer-events: none;\
                  opacity: 0;\
                  transition: opacity 0.3s;\
    ', 0);
    sheet.addRule("span#imdb-code-tooltip::after", '\
                  content: "";\
                  position: absolute;\
                  top: -10px;\
                  right: 2.5em;\
                  margin-left: -5px;\
                  border: 5px solid transparent;\
                  border-bottom-color: #555;\
    ', 0);
    sheet.addRule("input#unselect", '\
                  position: absolute;\
                  top: 0;\
                  right: 0;\
                  width: 1em;\
                  z-index: -99999;\
                  opacity: 0;\
    ', 0);

})();