Loading External JavaScript and CSS Files in Tampermonkey

This article introduces how to load external JavaScript and CSS files in Tampermonkey in the JavaScript programming language.

JavaScript is, how should I say, a language with unique characteristics that I’m not good at, but I’m getting more enthusiastic about it as demand requires.

Speaking of JavaScript, it’s Tampermonkey. If you can load external CSS and JavaScript libraries in Tampermonkey, it broadens what you can do. Did I not do this before? It seems I was using a confusing method of appending to the HTML head. When you search on Google normally, you find the solution I’m introducing today, but why didn’t I do this before?

Loading External JavaScript Files

To load external JavaScript files in Tampermonkey, write in the meta comment block like // @require https://yuis.xsrv.jp/cdn/js/jsrc.js.

This is simpler compared to loading CSS, so it should be easy to remember.

jquery - How do I include a remote javascript file in a Greasemonkey script? - Stack Overflow

Loading External CSS Files

Loading external CSS files in Tampermonkey is a bit complex.

Write in the meta comment block as follows:

// @resource    alertify.min.css  https://cdn.jsdelivr.net/npm/[email protected]/build/css/alertify.min.css

1. Add the following to the meta comment block to grant method execution permissions

1. Load the CSS source code

newCSS = GM_getResourceText (“alertify.min.css”); GM_addStyle (newCSS);

[Adding jQuery UI to Greasemonkey script fails with external CSS file - Stack Overflow](https://stackoverflow.com/questions/8688330/adding-jquery-ui-to-greasemonkey-script-fails-with-external-css-file)
## Using alertify.js
This time we'll use alertify.js as a push notification library. When loading normally in HTML, you'd append to the head like this:
```html
<script src="//cdn.jsdelivr.net/npm/[email protected]/build/alertify.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/build/css/alertify.min.css"/>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/build/css/themes/default.min.css"/>

This time we’ll load it in Tampermonkey, so it loads like the source code below.

Code

// ==UserScript==
// @name         TITLE
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://www.google.com/*
// @require     https://cdn.jsdelivr.net/npm/[email protected]/build/alertify.min.js
// @resource    alertify.min.css  https://cdn.jsdelivr.net/npm/[email protected]/build/css/alertify.min.css
// @resource    default.min.css  https://cdn.jsdelivr.net/npm/[email protected]/build/css/themes/default.min.css
// @grant           GM_addStyle
// @grant           GM_getResourceText
// ==/UserScript==

var newCSS ;

newCSS = GM_getResourceText ("alertify.min.css");
GM_addStyle (newCSS);

newCSS = GM_getResourceText ("default.min.css");
GM_addStyle (newCSS);

document.addEventListener('keyup', function(e){
    // if (e.keyCode == "16") {  // shift
    if (e.shiftKey && e.keyCode == "70") {  // shift+F
            copyTextToClipboard( document.location.href.match(/product_id\/([A-Z0-9]*)/)[1] ) ;
            alertify.success(` Clipboard copied: ${ document.location.href.match(/product_id\/([A-Z0-9]*)/)[1]  } `)
    }
} , false);