手軽に拡張機能を作れる「Tampermonkey」を使ってみた
2020.08.13
目次
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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | // ==UserScript== // @name arrow keys test // @namespace http://tampermonkey.net/ // @version 0.1 // @description try to take over the world! // @author You // @match https://ameblo.jp/*/* // @grant none // ==/UserScript== (function() { document.onkeydown = function (e){ if(e.keyCode == 39){//方向キーの右が押されたときに実行 var current_url = location.href;//現在のページのURLを取得 var top_url = current_url.slice(0, current_url.lastIndexOf("/")+1);//閲覧しているブログのトップページURLを取得 if(current_url == top_url){//トップページを見ていた場合 location.href = top_url + "page-2.html";//トップページのURLに2ページ目を示す文字列を連結してジャンプ } else{//2ページ目以降を見ていた場合 var page_num =Number(current_url.slice(current_url.lastIndexOf("-")+1).replace(".html", ""));//何ページ目を見ているか取得 location.href = top_url + "page-" + (page_num+1) +".html";//ページ数をプラス1してジャンプ } } }; })(); |
実際のTampermonkeyのコーディング画面は、以下の図のように分かりやすく色付けされています。
実行
どうでしょうか？
このように、10行ほどのコードを書くだけで、アメーバブログで「次ページ」へクリックする必要がなく、「矢印キーの右を押す」だけで次のページに移動できるようになりました。
今回は紹介程度ですので、便利かどうかは一旦置いといて…拡張機能がこんなに簡単に作成できてしまいました！
7行目の@matchについての補足
今回、実装したコードそのものの解説についてはコード上のコメントを見てもらうとして、「7行目の@match」について補足します。
@matchには、実行したいページのURLを入力しておくのですが、嬉しいことにワイルドカードが使用できます。
アメーバブログ上の様々な個人ブログで動作させるには、今回の例のようにワイルドカードを使う必要があるのです。
さいごに
今回は、単純な機能を実装しましたが、もちろん作り込むことで、リッチな拡張機能を開発することも可能となっています。
パッと自分専用の拡張機能を作るもよし、ウェブ公開用にきちんとしたものを作るもよし、というわけです。
「拡張機能の開発に興味がある」「手軽に開発できるツールが欲しかった」という人は、このTampermonkeyを使ってみることでWEBの世界はますます広がるかもしれません。
(株)ライトコードは、WEB・アプリ・ゲーム開発に強い、「好きを仕事にするエンジニア集団」です。
システム開発依頼・お見積もりはこちらまでお願いします。
また、WEB・アプリ系エンジニアを積極採用中です！詳しくはこちらをご覧ください。
※現在、多数のお問合せを頂いており、返信に、多少お時間を頂く場合がございます。
こちらの記事もオススメ！
ライトコードよりお知らせ
にゃんこ師匠
ミツオカにゃんこ師匠ミツオカにゃんこ師匠ミツオカ一緒に働いてくれる仲間を募集しております！
ライトコードでは、仲間を募集しております！
当社のモットーは「好きなことを仕事にするエンジニア集団」「エンジニアによるエンジニアのための会社」。エンジニアであるあなたの「やってみたいこと」を全力で応援する会社です。
また、ライトコードは現在、急成長中！だからこそ、あなたにお任せしたいやりがいのあるお仕事は沢山あります。「コアメンバー」として活躍してくれる、あなたからのご応募をお待ちしております！
なお、ご応募の前に、「話しだけ聞いてみたい」「社内の雰囲気を知りたい」という方はこちらをご覧ください。
ライトコードでは一緒に働いていただける方を募集しております！
採用情報はこちら書いた人はこんな人
関連記事
採用情報
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界はお前の手の中に・・・ /
モバイルエンジニア
\ サービスの守り神！ /
インフラエンジニア
\ センスで挑め！ /
UI/UXデザイナー
\ 世界を震撼させろ！ /
WEB開発ディレクター
\ 妄想野郎カモン！ /
ゲームプランナー
\ ゲーム好き集合ー！ /
ゲームエンジニア
