手軽に拡張機能を作れる「Tampermonkey」を使ってみた

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を使って簡単な拡張機能を開発！

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

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

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

実装したコード

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

実行

どうでしょうか？

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

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

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

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

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

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

さいごに

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

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

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

ライトコードよりお知らせ

にゃんこ師匠

システム開発のご相談やご依頼はこちら

ミツオカ

ライトコードの採用募集はこちら

にゃんこ師匠

社長と一杯飲みながらお話してみたい方はこちら

ミツオカ

フリーランスエンジニア様の募集はこちら

にゃんこ師匠

その他、お問い合わせはこちら

ミツオカ

   

お気軽にお問い合わせください！せっかくなので、別の記事もぜひ読んでいって下さいね！

一緒に働いてくれる仲間を募集しております！

ライトコードでは、仲間を募集しております！

当社のモットーは「好きなことを仕事にするエンジニア集団」「エンジニアによるエンジニアのための会社」。エンジニアであるあなたの「やってみたいこと」を全力で応援する会社です。

また、ライトコードは現在、急成長中！だからこそ、あなたにお任せしたいやりがいのあるお仕事は沢山あります。「コアメンバー」として活躍してくれる、あなたからのご応募をお待ちしております！

なお、ご応募の前に、「話しだけ聞いてみたい」「社内の雰囲気を知りたい」という方はこちらをご覧ください。

ライトコードでは一緒に働いていただける方を募集しております！

採用情報はこちら

書いた人はこんな人

ライトコードメディア編集部

「好きなことを仕事にするエンジニア集団」の（株）ライトコードのメディア編集部が書いている記事です。

• ITエンタメ2020.01.20OSの発展～誰でも使えるコンピュータを目指して ～
• IT技術2020.01.20PyTorchの特徴とインストール方法
• ライトコードの日常2020.01.20YOUは何しにライトコードへ？〜久木田さん編〜
• IT技術2020.01.16【後編】トリプルアレイで軽量で高速な辞書をつくる～実装～

• Tweet
• Share
• Hatena
• RSS

• 投稿者: ライトコードメディア編集部
• IT技術

• 人工知能が騙される？Adversa...
• 酷評だらけ!?マイクロソフトのWi...