Javascriptプログラミング言語において、tampermonkeyで外部JavaScript、外部CSSファイルを読み込む方法について紹介します。
JavaScriptはなんというか、いろいろ特徴が独特で、苦手な言語なのですが、需要に伴ってまた熱が入ってきています。
JavaScriptといえばtampermonkeyですね。tampermonkey上でCSSやJavascriptの外部ライブラリを読み込むことができたら、できることの幅が広がります。 今まではやっていなかったのか、というと、いままではHTMLのheadに追記するというよくわからないやり方をしていたようです。普通にグーグル検索すると今回紹介する解決策が見つかるのですが、なぜこうしなかったのでしょうか。
外部JavaScriptファイルを読み込む
tampermonkeyで外部JavaScriptファイルを読み込むには、メタコメントブロックに// @require https://yuis.xsrv.jp/cdn/js/jsrc.jsのように記述します。
こちらはCSSの読み込みと比べて単純なので覚えやすいかと思います。
jquery - How do I include a remote javascript file in a Greasemonkey script? - Stack Overflow
外部CSSファイルを読み込む
tampermonkeyで外部CSSファイルを読み込むのは少し複雑です。
メタコメントブロックに以下のように、記述します。
// @resource alertify.min.css https://cdn.jsdelivr.net/npm/[email protected]/build/css/alertify.min.css- メタコメントブロックに以下を追記してメソッド実行の権限を追加します
- CSSソースコードを読み込みます
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を使います
プッシュ通知をするライブラリとして今回はalertify.jsを使用します。HTML上で通常読み込む場合は以下のようにheadに追記するわけですが、
```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"/>今回はtampermonkey上で読み込みますので、以下ソースコードのように読み込むことになります。
コード
// ==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);