tampermonkeyで外部JavaScript、外部CSSファイルを読み込む

    >


どうも。先日.bashrcが7000行を越えました。BASHerのyuisです。Bash最高。

JavaScriptはなんというか、いろいろ特徴が独特で、苦手な言語なのですが、需要に伴ってまた熱が入ってきています。

JavaScriptといえばtampermonkeyですね。tampermonkey上でCSSやJavascriptの外部ライブラリを読み込むことができたら、できることの幅が広がります。
今まではやっていなかったのか、というと、いままではHTMLのheadに追記するというよくわからないやり方をしていたようです。普通にgooglingすると今回紹介する解決策が見つかるのですが、なぜこうしなかったのでしょうか。

今回は例として、”dlsite上でショートカットキーをするとクリップボードにRJコードをコピーするとともに、プッシュ通知をする ” という機能を実装してみたいと思います。

https://yuis.xsrv.jp/images/ss/ShareX_ScreenShot_80fda24f-e60d-4758-a21c-f2e3259f88aa.gif

【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ファイルを読み込むのは少し複雑です。

  1. メタコメントブロックに以下のように、記述します。

// @resource alertify.min.css https://cdn.jsdelivr.net/npm/alertifyjs@1.11.1/build/css/alertify.min.css

// @resource [任意の名称] [ファイルパス]

  1. メタコメントブロックに以下を追記してメソッド実行の権限を追加します
// @grant           GM_addStyle
// @grant           GM_getResourceText
  1. 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);



お困りですか?この記事で紹介していることをマンツーマンで指導、解説、代行します。まずはお気軽にお問い合わせください。


Close Menu