Discordに開いているwebページのURLを保存するChrome拡張機能を作った
作ったもの
Discordに、Webhookを使用して開いているwebページのURL・タイトル・コメントを保存するChrome拡張機能です。
こちらでプレビュー用動画を公開していますのでご覧ください。
経緯
プログラミングをしていると様々なwebページやドキュメント、仕様書を参照することがあります。これらは後々になって読み返したり、繰り返し参照したりすることがありますが、多量のwebサイトを覚えるというのは難しく、効率的ではありません。
ところで私はアプリさえインストールすればアクセスでき、無料で、投稿の保存期間制限がなく使用できるという理由からDiscordに個人サーバーを立ててメモ帳のように使用しています。例えば、高校での課題や日々思いついたこと、ライフログやプログラミング関連の学習ログ等を投稿しています。[1]
そこで、閲覧したwebページのURLやタイトルがDiscordに簡単に記録できれば良いのではないかと思い、以前にも実装したことがあるDiscordのWebhookを使用した拡張機能を作成しました。
仕組み
主要な箇所のみ解説をしていきます。
以下のようにchrome.tabsAPIを使用することで、現在開いているタブのURLとタイトルを取得することができます。取得することができたら、取得した内容を元に投稿するコンテンツの本文を作成します。今回は タブ・URL・コメント の3つを元に本文を作成しました。なお、改行をしたい場合には\rを挿入する必要があります。
const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
const message = "----------\r" + "【Title】\r" + tab.title + "\r" + memo + "【URL】\r" + tab.url;
続いてwebhookを使用して投稿するための準備をしていきます。今回はfetchAPIを使用するため、これに向けたパラメータを作成していきます。以下にも記述している通り、Content-Typeがapplication/jsonである必要があるため注意してください。
const param = {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
content: message,
}),
};
最後に、fetchAPIを使用して先ほど作成したparamとDiscord上で取得したWebhook用のURLを使用して投稿を行います。[2]
const url = "https://discord.com/api/webhooks/hoge/fuga"; // Webhook URL
fetch(url, param).then((response) => {
if (response.ok) {
console.log("ok");
} else {
console.log("error", response);
}
});
正常に処理が実行されれば、以下のようにDiscordに投稿がなされます。OGPを読んで、いい感じに表示してくれます。
マニュフェスト
Chrome拡張機能を作成する際にはmanifest.jsonと呼ばれるものを作成しなくてはならないので、こちらも紹介します。
manifest.jsonにはアプリの名称や説明、バージョンやアイコンなどを設定しなくてはなりませんが、このほかに今回はchrome.tabsAPIを使用するためにpermissionsにactiveTabとtabsを設定します。
{
"manifest_version": 3,
"name": "discord link keeper",
"description": "An extension that saves the URL and title of the open tabs in Discord.",
"version": "1.1",
"icons": {
"128": "icon-128.png"
},
"action": {
"default_popup": "index.html"
},
"permissions": ["activeTab", "tabs"]
}
ソースコード
ソースコードは以下のリポジトリで公開しています。
ディレクトリ構成は次のようになっています。
.
├── icon-128.png
├── index.html
├── index.js
├── manifest.json
└── style.css
インストール方法
Chrome Web Storeへの公開には料金がかかるため、公開していませんので以下の手順を踏んでインストールしてください。
- GitHubからソースコードをダウンロードする
git cloneやDownload ZIPなどの方法でソースコードをダウンロードしてください。 - Discord上でWebhook URLを取得する
以下の公式ドキュメントを参考に、Webhook URLを取得してください。（Discordサーバ内で権限が必要である場合がありますので、確認してください。）
https://support.discord.com/hc/ja/articles/228383668 - 取得したWebhook URLを
index.js内の変数urlにセットする。 - 拡張機能の管理ページ(chrome://extensions/)を開いて、「デベロッパーモード」を ON にする。
- 「パッケージ化されていない拡張機能を読み込む」というボタンを押しソースコードのフォルダを選択する。
参考文献
Discussion