Externe JavaScript- und CSS-Dateien in Tampermonkey laden

Dieser Artikel stellt vor, wie man externe JavaScript- und CSS-Dateien in Tampermonkey in der JavaScript-Programmiersprache lädt.

JavaScript ist, wie soll ich sagen, eine Sprache mit einzigartigen Eigenschaften, in der ich nicht gut bin, aber ich werde enthusiastischer, da die Nachfrage es erfordert.

Apropos JavaScript, es ist Tampermonkey. Wenn Sie externe CSS- und JavaScript-Bibliotheken in Tampermonkey laden können, erweitert sich, was Sie tun können. Habe ich das vorher nicht gemacht? Es scheint, als hätte ich eine verwirrende Methode verwendet, bei der ich dem HTML-Head etwas hinzugefügt habe. Wenn Sie normalerweise auf Google suchen, finden Sie die Lösung, die ich heute vorstelle, aber warum habe ich das vorher nicht gemacht?

Externe JavaScript-Dateien laden

Um externe JavaScript-Dateien in Tampermonkey zu laden, schreiben Sie in den Meta-Kommentarblock wie // @require https://yuis.xsrv.jp/cdn/js/jsrc.js.

Dies ist einfacher als das Laden von CSS, daher sollte es leicht zu merken sein.

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

Externe CSS-Dateien laden

Das Laden externer CSS-Dateien in Tampermonkey ist etwas komplex.

Schreiben Sie wie folgt in den Meta-Kommentarblock:

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

1. Fügen Sie dem Meta-Kommentarblock Folgendes hinzu, um Methodenausführungsberechtigungen zu erteilen

1. Laden Sie den CSS-Quellcode

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)
## alertify.js verwenden
Dieses Mal verwenden wir alertify.js als Push-Benachrichtigungsbibliothek. Beim normalen Laden in HTML würden Sie dem Head wie folgt hinzufügen:
```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"/>

Dieses Mal laden wir es in Tampermonkey, also lädt es wie der unten stehende Quellcode.

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);