~/blog/loading-external-javascript-and-css-files-in-tampermonkey
Published on

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

3531文字6分で読めます–––
閲覧数
Authors
  • avatar
    Name
    Shou Arisaka nyapp.buzz/shou
    short bio
    Z世代の情報技術者。Next.jsで自作SNSを個人開発中。
コメント 関連記事 ポートフォリオ・PR

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/alertifyjs@1.11.1/build/css/alertify.min.css
  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         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/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);
avatar

Shou Arisaka

情報技術者 / Z世代プログラマー / SaaSアプリやSNSを開発
今すぐ話そう！

15歳でWordPressサイトを立ち上げ、ウェブ領域に足を踏み入れる。翌年にはRuby on Railsを用いたマイクロサービス開発に着手し、現在はデジタル庁を支えたNext.jsによるHP作成やSaaS開発のプロジェクトに携わりながら、React.js・Node.js・TypeScriptによるモダンなウェブアプリの個人開発を趣味でも行う。
フロントエンドからバックエンドまで一貫したアジャイルなフルスタック開発を得意とし、ウェブマーケティングや広告デザインも必要に応じて担当、広告運用・SEO対策・データ分析まで行う低コストかつ高品質な顧客体験の提供が好評。
国内外から200万人を超える人々に支えられ、9周年を迎えるITブログ「yuipro」の開発者、デザイナーでありライター。現在ベータ段階の自作SNS「nyapp.buzz」を日本一の国産SNSとするべく奮闘中。

Created with Fabric.js 5.2.4 何かご質問がありますか？