Tampermonkeyで手軽に拡張機能を作ろう！

ブラウザの拡張機能を簡単に作れるようになる、Tampermonkeyという拡張機能をご存知でしょうか？

なんと、Tampermonkeyを使えば、面倒な環境構築をすることなく、手軽にオリジナルの拡張機能を開発できるのです。

本記事では、そんなTampermonkeyの機能解説や拡張機能の実装例の紹介をします。

「拡張機能を作る拡張機能なんて知らなかった」という方は、ぜひ最後まで読んでみてくださいね。

Tampermonkeyで可能なこと

ウェブブラウザには「拡張機能」という、後付けで機能を追加できるシステムがあるのはご存じだと思います。

短文をブラウザに保存するような単純なものから、Cookieの中身を編集できる高度なものまで様々なものがあります。

ただ、「うーん、自分の欲しい機能とはちょっと違うんだよなぁ…」と思った経験は、1度はあるのではないでしょうか？

拡張機能が作れる拡張機能「Tampermonkey」

そういった困った状況を打破してくれる拡張機能が今回紹介する「Tampermonkey」です。

この拡張機能は、一言でいえば、「拡張機能がつくれる拡張機能」です。

具体的にどういったものなのかというと、「任意のサイトに対して、自分で組んだJavaScriptのコードを実行させることができる拡張機能」となっています。

こういった機能を持っているため、拡張機能の開発環境を整えずとも、自分の手で開発ができるというわけです。

他人がつくったコードをインストールすることも可能

ちなみに、Tampermonkeyが自分で作ったコードを実行するだけのものなのかというと、そうではありません。

なんと、他人がつくったコードをインストールすることも可能となっています。

つまり、自己開発用に使うだけでなく、Tampermonkey上でつくられた拡張機能を運用するためのものとしても使えるわけです。

Tampermonkeyのインストール方法

それでは、Tampermonkeyのインストール方法の解説をします。

今回は、「GoogleChrome」でインストールしていきたいと思います。

それでは、以下のchrome ウェブストアのTampermonkeyのページから拡張機能をインストールしていきましょう。

【インストール先】
Tampermonkeyはこちら

Tampermonkeyの使い方

インストールすると、白黒のTampermonkeyのアイコンがアドレスバーの横に追加されます。
アイコンをクリックするとメニューが表示されますので、その中の「新規スクリプトを追加」をクリック。

そうすることで、以下のようなコード入力画面を表示されます。

初期コード解説

新規スクリプトと書いてあるものの、すでに15行分のコードが書かれていることに気づきますよね。

今回は、自分用の拡張機能を作る上で知っておかないといけない部分のみを解説したいと思います。

1行目から9行目は、自作した拡張機能の名前や実行するページのURLなどを入力する箇所

まず、1行目から9行目は、自作した拡張機能の名前や実行するページのURLなどを入力する箇所です。

ウェブ公開するのでなければ、「@match」の部分に実行したいページのURLを書き込むだけで問題ありません。

11行目からは、そのコードが任意のページで実行

次に、11行目から15行目ですが、「Your code here...」と書いてある通り、11行目にある関数の中へコードを書き込めば、そのコードが任意のページで実行されます。

12行目から14行目までは削除

12行目から14行目までの内容を削除して、コーディングをしましょう！

Tampermonkeyを使って簡単な拡張機能を開発！

次は、実際に作ったコードをサイト上で動かしてみましょう！

今回は例として、アメーバブログについての拡張機能を作ってみたいと思います。

どういった拡張機能にするのかというと、「個人ブログ上で矢印キーの右を押すと、次ページをクリックしたときと同様の動作をする」という簡単なものです。

実装したコード

1// ==UserScript==
2// @name arrow keys test
3// @namespace http://tampermonkey.net/
4// @version 0.1
5// @description try to take over the world!
6// @author You
7// @match https://ameblo.jp/*/*
8// @grant none
9// ==/UserScript==
10
11(function() {
12
13document.onkeydown = function (e){
14　　if(e.keyCode == 39){//方向キーの右が押されたときに実行
15　　　　var current_url = location.href;//現在のページのURLを取得
16　　　　var top_url = current_url.slice(0, current_url.lastIndexOf("/")+1);//閲覧しているブログのトップページURLを取得
17　　　　if(current_url == top_url){//トップページを見ていた場合
18　　　　　　location.href = top_url + "page-2.html";//トップページのURLに2ページ目を示す文字列を連結してジャンプ
19　　　　}
20　　　　else{//2ページ目以降を見ていた場合
21　　　　　　var page_num =Number(current_url.slice(current_url.lastIndexOf("-")+1).replace(".html", ""));//何ページ目を見ているか取得
22　　　　　　location.href = top_url + "page-" + (page_num+1) +".html";//ページ数をプラス1してジャンプ
23　　　　}
24　　}
25};
26
27})();

実際のTampermonkeyのコーディング画面は、以下の図のように分かりやすく色付けされています。

実行

どうでしょうか？

このように、10行ほどのコードを書くだけで、アメーバブログで「次ページ」へクリックする必要がなく、「矢印キーの右を押す」だけで次のページに移動できるようになりました。

今回は紹介程度ですので、便利かどうかは一旦置いといて…拡張機能がこんなに簡単に作成できてしまいました！

7行目の@matchについての補足

今回、実装したコードそのものの解説についてはコード上のコメントを見てもらうとして、「7行目の@match」について補足します。

@matchには、実行したいページのURLを入力しておくのですが、嬉しいことにワイルドカードが使用できます。

アメーバブログ上の様々な個人ブログで動作させるには、今回の例のようにワイルドカードを使う必要があるのです。

さいごに

今回は、単純な機能を実装しましたが、もちろん作り込むことで、リッチな拡張機能を開発することも可能となっています。

パッと自分専用の拡張機能を作るもよし、ウェブ公開用にきちんとしたものを作るもよし、というわけです。

「拡張機能の開発に興味がある」「手軽に開発できるツールが欲しかった」という人は、このTampermonkeyを使ってみることでWEBの世界はますます広がるかもしれません。

こちらの記事もオススメ！

2020.08.07JavaScript 特集知識編JavaScriptを使ってできることをわかりやすく解説！JavaScriptの歴史【紆余曲折を経たプログラミン...

2020.07.17ライトコード的「やってみた！」シリーズ「やってみた！」を集めました！（株）ライトコードが今まで作ってきた「やってみた！」記事を集めてみました！※作成日が新し...