【Violentmonkey】ユーザースクリプトを実行できる拡張機能
この記事では、ウェブサイトにユーザースクリプト（JavaScript）を適用できるChrome拡張機能「Violentmonkey」について書きます。
「Greasy Fork」などからスクリプトをインストールして、任意のウェブサイト上で実行できる拡張機能です。
本記事ではChrome拡張機能を紹介しますが、Firefoxアドオン、Microsoft Edgeアドオンもあり、幅広いブラウザで利用できます。JavaScriptを適用できる拡張機能で有名…というか僕が今まで使っていたのは「Tampermonkey」です。記事にもしています。
https://www.naporitansushi.com/tampermonkey/僕はJavaScriptができないこともあり、有志の方やAI（ChatGPT）が作ったコードを書き込んで最低限実行できればそれでいい派です。
細かい部分のこだわりがないため、何の不満もなく「Tampermonkey」を利用していましたが、ある日読者様から「Violentmonkeyがおすすめ！理由はオーブンソースだから！」というメールをいただきました。
教えていただくまで知らなかったのですが、調べてみると「Tampermonkey」はプロプライエタリ化して、現在のバージョンではソースコードを確認できないようです。プロプライエタリ化という言葉も知らなかったので調べてみると、情報の非公開・独占的といった意味でした。
参考：Greasemonkey, Violentmonkey, Tampermonkey 比較表
確かにGitHubを見てみると最終更新日が何年も前になっています。ただ拡張機能自体は更新されていて、Chromeウェブストアの最終更新日は新しいです。
オープンソースが偉くてクローズドソースが危ない・悪いことには一概にならないと思いますが、人によっては気になるかもしれません。個人的にはオープンソースだから安全って思うのも短絡的だと思っています。
今のままで特に困っていませんでしたが、物は試しで使ってみたところ「Tampermonkey」と同じ操作感ですぐに馴染めました。以下のような特徴がありました。
- Chrome、Firefox、Edgeなど幅広いブラウザで利用できる
- 「Greasy Fork」などのストアからサクッとスクリプトを入手できる
- ストアからインストールしたスクリプトの自動更新
- スクリプトのオンオフ、ポップアップの見た目など「Tampermonkey」と同じ操作感で使いやすい
- 「Tampermonkey」のスクリプトを丸々移行できる
- インストールしたスクリプト一覧がタイル状で見やすい。管理しやすい
- コードエディターの見た目（テーマ）を変えられる
- スクリプトのテンプレートを作成・編集できる
- インポート・エクスポートのバックアップ機能
- Dropbox、OneDrive、Google Driveなどのクラウド同期機能
- 特定のサイトで動作させないブロックリストの作成
- エディターページのカスタムCSS
大抵のことは「Tampermonkey」でもできます。同じような感じだから移行しやすいというメリットがありつつ、そもそもこれといった優位性がパッと分からないので移行する意味がないと言われたらそれまでです。あ、僕は初心者なのでベテランさんからしたら「いや、めっちゃ違いあるじゃん！」となるかもです。
コードをばりばり自分で書いたり編集する場合は、テーマの見た目や構文チェックなど細かいエディターのオプションが気になると思いますが、僕みたいな初心者からしたらどっちでもいい気がしました。
僕はせっかく読者様から教えてもらったし、実際使ってみて僕が好きなデザイン（角丸なとことか）で操作性も悪くなかったので移行することにしました。スクリプトの構文や書き方は一緒なので、これまで「Tampermonkey」で使っていたスクリプトも問題なく利用できます。
リリース元：Violentmonkey（公式サイト、ブログ）
記事執筆時のバージョン：2.19.0（2024年05月19日）
インストール方法
Chromeウェブストアからインストールできます。
https://chromewebstore.google.com/detail/violentmonkey/jinja...Firefoxをご利用の方は、以下のFirefoxアドオンストアからインストールできます。
https://addons.mozilla.org/ja/firefox/addon/violentmonkey/「Firefoxへ追加」をクリックします。
「Chromeに追加」をクリックします。
「拡張機能を追加」をクリックします。
拡張機能をインストールする時、色々な権限へのアクセス許可を求められます。ウェブサイトにJavaScriptを適用させるために「すべてのウェブサイト上にある自分の全データの読み取りと変更」は必要なのかなと思います。「Tampermonkey」もそうですし。
公式サイトのよくある質問に「clipboard」権限が必要な理由が記載されています。
わざわざ丁寧に説明されている点、プライバシーポリシーに記載されている個人情報を収集しない点なども含めて、ユーザーに寄り添っている印象を受けました。
「As discussed in this issue, we will not collect any of your usage data, even anonymously.
We use popular cloud storage services (Dropbox, Google Drive, OneDrive) to synchronize extension data with your authorization. Your script code and settings may be synced to the cloud service directly, without transit to other servers.
We do not use Google Analytics or similar technologies to collect your browser information.
We do not disclose your personal data and extension data to any other third party.【翻訳】
この問題で説明したように、私たちは匿名であってもあなたの使用状況データを一切収集しません。弊社では、一般的なクラウドストレージサービス（Dropbox、Google Drive、OneDrive）を使用して、拡張機能のデータをお客様の承認と同期しています。お客様のスクリプトコードと設定は、他のサーバーに転送されることなく、直接クラウドサービスに同期される場合があります。
Google Analyticsや類似の技術を使用してお客様のブラウザ情報を収集することはありません。
当社は、お客様の個人データおよびエクステンションデータを他のいかなる第三者にも開示しません。
Violentmonkey
拡張機能のオーバーフローメニュー内に拡張機能ボタンが追加されればOKです。
使い方
自分で書ける人は書く、書けない人はストアなどから入手
自分でコードを書けるようなベテランさんは、特に説明しなくてもサクサク使えると思います。僕みたいな一切書けない初心者は、有志の方が公開されているスクリプトをインストールします。
拡張機能メニューをクリックして、「Violentmonkey」拡張機能アイコンをクリックします。頻繁に利用する場合は、ピン留めアイコンをクリックしてツールバーに直接配置するといいかなと思います。僕はピン留めしています。
メニューが表示されます。現在開いているページ（タブ）上で有効になっているスクリプトが一覧表示されます。最初は何もインストールしていないので0です。
「このサイト用のスクリプトを探す」をクリックすると、指定したドメインで「GreasyFork」の検索結果ページに飛んでくれます。スクリプトをインストールできるサイトです。例えば「YouTube」上でクリックしたら、こちらのページを新規タブで開いてくれます。
ストアから好きなスクリプトをインストールします。試しに「YouTube」のトップページやチャンネルページの一行に表示されるサムネイル数を、好きな列数に増やせるJavaScript「YouTube Normal Thumbnails」をインストールしてみます。
「スクリプトをインストール」をクリックします。
自動的に「Violentmonkey」拡張機能のインストール画面が表示されます。
もし他のJavaScriptを適用できる拡張機能（Tampermonkeyなど）を入れていると、競合して別のインストール画面が表示されたり、エラーが出る可能性があります。
基本的にストアからインストールして使う僕みたいなタイプは、どっちかの拡張機能に絞ったほうがいいと思います。僕の場合「Violentmonkey」に移行したので「Tampermonkey」をアンインストールしています。
左側にスクリプトの情報（タイトル、バージョン、適用サイト）やインストールボタンが表示されて、右側にコードのプレビューが表示されます。もし記述に不備がある場合、左側に赤文字でエラー内容が表示されます。
ベテランさんは中身のコードを見て「うんうん、大丈夫だな」と分かるかもしれませんが、僕みたいな初心者は分からないのであんまり気にする場所じゃないかなと思います。信頼できる場所からインストールしたり、既に他の方が使って紹介しているスクリプトを入れるのが最低限自分ができることです。
インストールする場合、「インストール（Ctrl+Enter）」をクリックします。右側に「スクリプトが実行されました」と表示されたらOKです。「閉じる」を押すとタブを閉じてくれます。
いちいちインストール→閉じるボタンを押すのは手間だと思います。
インストールボタンの右にある「+閉じる」にチェックを入れると、インストールと閉じる作業を同時にしてくれます。効率的です。一度チェックしたら次回別のスクリプトを入れる時も記憶してくれています。
拡張機能のメインページ（ダッシュボード）を開くと、インストールしたスクリプトが表示されます。「インストール済み」の左側にインストールしているスクリプト数が表示されます。
実際導入したスクリプトが動作するサイトを開きます。「YouTube Normal Thumbnails」の場合「YouTube」です。
拡張機能メニュー内の「Violentmonkey」アイコン右上に、発動しているスクリプト数が表示されます。クリックして「このサイト用のスクリプト」内で確認できます。
トグルがあり、クリックでオンオフを切り替えられます。切り替えた後、反映させるにはページを一度リロードします。
スクリプトが発動して、一行に表示されるサムネイル数（列数）が変わります。
スクリプトを一括でオフにする方法
拡張機能アイコンをクリック→一番上のトグルをオフにします。
アイコンがグレーアウトして全サイトの全スクリプトが一時的にオフになります。オフにした後は一度ページをリロードします。不具合検証などの際に便利です。
ダッシュボード（スクリプト一覧ページ）の開き方
拡張機能アイコンをクリック→歯車ボタンをクリックします。
インストール済みのスクリプトが一覧表示されます。オンオフ、設定、削除、コードの確認などができます。
うっすらグレーになっているスクリプトはオフになっている印です。トグルをクリックしてオンにすることで元の色になります。スクリプト側でアイコンが指定されていない場合は「Violentmonkey」アイコンになります。
スクリプトの中身を確認する方法
拡張機能アイコンを押して表示されているスクリプト右横の「
」ボタンをクリックします。
ダッシュボードからも同じ方法です。
中身のスクリプトが専用のエディターで表示されます。
上部の「設定」タブで高度な設定ができます。
スクリプトの削除方法
ダッシュボードの一覧ページから削除したいスクリプトのゴミ箱アイコンをクリックします。
あるいは対象サイトを開いて、拡張機能アイコンをクリック→削除したいスクリプトの三点ボタン（⋮）→「削除」をクリックします。
ダッシュボードから削除した場合、その場限りで元に戻すことも可能です。「あっ、やべミスった」って時に便利です。
ダッシュボードの見た目を変える
ダッシュボード右上のドロップダウンで並び替えられます。実行順、アルファベット順、最終更新日順、サイズ順にできます。
右横の歯車ボタンで見た目を変えられます。「表形式」にチェックした画像を貼っておきます。それぞれのスクリプトの余白が狭くなり、きゅっとした見た目になります。
「1列表示」にチェックした画像を貼っておきます。デフォルトでは3列ですが、チェックを入れると1列になります。
1ページに収まるスクリプト量は減りますが、ゆとりがあって人によっては見やすいかもしれません。僕的には文字や余白が小さくてもいいから1ページに情報量を増やしてほしい派なので3列表示です。
豆知識ですが、ウェブサイトを拡大縮小する要領と同じでスクリプトページ上でCtrlを押しながらマウスホイール回転すると拡大縮小できます。ページ倍率を100%以下にすると自動的に3列や4列表示に切り替わります。レスポンシブなようです。GIF画像を貼っておきます。
特定のサイトでスクリプトを発動させない
通常各スクリプトに「@exclude 〇〇〇」という形で発動させたくないサイト・ドメインを書き込むと、そのサイトが除外されます。それとは別で、コード内容に関わらず絶対発動させないようにするブロックリストを拡張機能側で設定できます。
「YouTubeでは絶対に使わないからオフにしたい…」、「このサイトは重要だからうっかりスクリプトが発動して誤作動するの困る」みたいな時に便利かもしれません。
設定の「ブロックリスト」にスクリプトを実行させたくないサイトルールを書き込みます。書き方は「@exclude 〇〇〇」という形です。正規表現（ワイルドカード）を利用できます。
例えば、YouTube上で無効化したい場合は以下の表記になります。
@exclude *://www.youtube.com/*書き方のパターンは色々あります。公式ページが参考になるかと思います。「*」が任意の1文字以上って意味なので、除外したいドメインの前後を「*」で囲むのが基本形になるかなと思います。
僕のサイト上なら「@exclude *://www.naporitansushi.com/*」、Xなら「@exclude *://x.com/*」といった感じです。
書き込んだ状態でYouTubeを開いてもスクリプトが発動しません。拡張機能のポップアップを開くと「ブロックリストに登録済み」と表示されます。
カスタムCSSで見た目を変える
設定ページ内にある「スタイルの指定」にCSSを書き込むことで、スクリプト一覧ページのデザインを自分でカスタマイズできます。結構上級者向け機能ですが、こういうことも自由にできるんだ～と感心しました。
例えば、スクリプトの背景色を変える以下のCSSを書き込むとします。「保存」をクリックしてスクリプトページを開きます。
.script{background:#788890}書き込んだCSSが適用されてスクリプト一覧ページの背景色が変わります。
CSS（セレクタ）の調べ方は通常のウェブサイトと同様、開発者ツール（F12）から調べられます。スクリプトのフォントサイズや角丸具合など自由に調整できます。
「Tampermonkey」から「Violentmonkey」に移行する方法
どちらもバックアップとしてZIPファイルのインポート・エクスポート機能を備えています。
さらに互換性があったため「Tampermonkey」でZIPファイルを出力（エクスポート）して、「Violentmonkey」に読み込み（インポート）させることができました。スクリプトをそのまま移行できます。
当サイトで紹介しているJavaScript記事
僕はJavaScriptを一切書けないので全て他の方が作成したスクリプトの紹介記事になりますが、以下のカテゴリーにて紹介しています。どれも自分が使ってみて便利だな。すごいな。と感心したスクリプトです。
感想
以上、ウェブサイトにユーザースクリプト（JavaScript）を適用できるChrome拡張機能「Violentmonkey」についてでした。
既に移行して1ヶ月以上経過していますが、今のところ特に問題なく利用できています。これといった不満点もありません。サイトの仕様変更によってスクリプトが発動しなくなることはありますが、拡張機能が悪いのではなくスクリプトが更新されていないのが原因です。