Chromeで使える便利なブラウザ拡張機能「Tampermonkey」とその活用法

バックエンドエンジニアの大石です。

今回は「Tampermonkey」というブラウザ拡張機能を最近発見して使ってみたところ便利だと感じたので紹介していきたいと思います。

GoogleChromeやFirefoxで導入できる拡張機能の一つで、ユーザースクリプトマネージャーとして機能し、以下の主な機能を提供しています。

 

・ユーザースクリプトの管理と実行: ここで言うユーザースクリプトとはJavaScriptで書かれたプログラムのことです。ユーザースクリプトを追加したり、不要なスクリプトを削除したりすることが簡単に行えます。

・ウェブページの表示と動作の個別変更: Tampermonkeyを使用することで、特定のウェブページの表示や動作を個別に変更することができます。

 

TampermonkeyはJavaScriptの基礎知識があれば誰でも利用することができます。

簡単なエディタも備わっており、スクリプトの作成や編集が容易です。

また、セキュリティにも配慮しており、実行するスクリプトを厳密に管理することができます。

・自動化スクリプトの実行: ウェブページ上で行う特定の作業やタスクを自動化するスクリプトを実行することができます。

・カスタムスタイルシートの適用: 自分の好きなようにユーザースタイルシート（CSS）を適用し、特定のサイトの見た目や配色をカスタマイズすることができます。

 

見た目の変更やスクリプトの実行は自分のブラウザ上だけで行われるため、元々のウェブサイトへの影響は基本的に全くありません。

ユーザースクリプトの書き方が良く分からない、、、という場合でも、ユーザースクリプトを共有するサイトからダウンロードして利用することが出来ます！

例えば、Greasy Forkは有名な共有サイトの一つです。

そこでは、他のユーザーが作成した便利なスクリプトを簡単にダウンロードして利用することができます。

 

最近だとChatGPT用のユーザースクリプトが色々投稿されています。

私もいくつかダウンロードして使っていますが、ChatGPT Exporterという便利なスクリプトがあるのでTampermonkeyの導入から手順を書いていきます。

 

まず、以下からTampermonkey（GoogleChrome）を導入してください

https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=ja

 

次に、Greasy Forkからスクリプトをダウンロードしてみましょう

https://greasyfork.org/ja/scripts/456055-chatgpt-exporter

 

ChatGPTのページに移動しましょう

https://chat.openai.com/

 

画像のように左下にExportという項目が追加されていればスクリプトが動いている状態です。

ChatGPT Exporterの機能はChatGPTとのやり取りを様々な形式（テキスト、画像、HTML、Json、Markdown）で出力する、というものです。

（標準ではこの項目は存在しないので、ユーザースクリプトによってデザインの変更と機能の追加が行われたということになります。）

※上手くいっていない場合は、拡張機能→Tampermonkeyを開き、ChatGPT Exporterが有効になっているか確認してみましょう。

https://greasyfork.s3.us-east-2.amazonaws.com/7lu1cx23v4xpb6ngmdccj2aat27a

紹介した以外にも様々なウェブサイト用のユーザースクリプトが共有サイトに転がっていたりするので使ってみるのもいいでしょう。

拡張機能を一から作るとなるとそれなりの知識が必要になりそうですが、Tampermonkeyであればjavascriptの知識だけで同じようなことが実現できるので良いですね。