プログラミング

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

Javascriptプログラミング言語において、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);



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です