Javascriptプログラミング言語において、tampermonkeyで外部JavaScript、外部CSSファイルを読み込む方法について紹介します。
どうも。先日.bashrcが7000行を越えました。BASHerのyuisです。Bash最高。
JavaScriptはなんというか、いろいろ特徴が独特で、苦手な言語なのですが、需要に伴ってまた熱が入ってきています。
JavaScriptといえばtampermonkeyですね。tampermonkey上でCSSやJavascriptの外部ライブラリを読み込むことができたら、できることの幅が広がります。
今まではやっていなかったのか、というと、いままではHTMLのheadに追記するというよくわからないやり方をしていたようです。普通にgooglingすると今回紹介する解決策が見つかるのですが、なぜこうしなかったのでしょうか。
今回は例として、”dlsite上でショートカットキーをするとクリップボードにRJコードをコピーするとともに、プッシュ通知をする ” という機能を実装してみたいと思います。
【20%OFF】レミリア・スカーレットのドキドキご奉仕ディスク [アールグレイ] | DLsite 同人
外部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/alertifyjs@1.11.1/build/css/alertify.min.css
// @resource
[任意の名称] [ファイルパス]
- メタコメントブロックに以下を追記してメソッド実行の権限を追加します
// @grant GM_addStyle
// @grant GM_getResourceText
- CSSソースコードを読み込みます
var newCSS ;
newCSS = GM_getResourceText ("alertify.min.css");
GM_addStyle (newCSS);
Adding jQuery UI to Greasemonkey script fails with external CSS file – Stack Overflow
alertify.jsを使います
プッシュ通知をするライブラリとして今回はalertify.jsを使用します。HTML上で通常読み込む場合は以下のようにheadに追記するわけですが、
<script src="//cdn.jsdelivr.net/npm/alertifyjs@1.11.1/build/alertify.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.11.1/build/css/alertify.min.css"/>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.11.1/build/css/themes/default.min.css"/>
今回はtampermonkey上で読み込みますので、以下ソースコードのように読み込むことになります。
コード
// ==UserScript==
// @name DLsite copy RJ code shortcut
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author You
// @match https://www.dlsite.com/*
// @require https://yuis.xsrv.jp/cdn/js/jsrc.js
// @require https://cdn.jsdelivr.net/npm/alertifyjs@1.11.1/build/alertify.min.js
// @resource alertify.min.css https://cdn.jsdelivr.net/npm/alertifyjs@1.11.1/build/css/alertify.min.css
// @resource default.min.css https://cdn.jsdelivr.net/npm/alertifyjs@1.11.1/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);