アイコンクリックでDiscordへリンクをシェアするChrome拡張を作る
DiscordへリンクをシェアできるChrome拡張を作ってみる (1件)
前の投稿
最初の投稿です
次の投稿
最新の投稿です
経緯
興味のあるサイトを見つけた際にメモとしてプライベートサーバーのチャンネルにリンクを投下していたが,環境が状況によって変わるためDiscordを立ち上げなくても同じことができるようにしたかった.
準備
manifest.json
の作成
/src
内にmanifest.json
を作成します.
manifest.json
{
"name": "Share Link To Discord",
"manifest_version": 3,
"version": "0.1",
"permissions": ["activeTab", "scripting"],
"action": {
"default_icon": "img/icon_16.png"
},
"icons": {
"16": "img/icon_16.png",
"48": "img/icon_48.png",
"128": "img/icon_128.png"
},
"background": {
"service_worker": "background.js"
}
}
必須項目は,
- name
- version
- manifest_version
書くべき内容はそのままです.manifest_version
は3が現在の基本らしく,公式ドキュメントでもV2の拡張はサポートが25年6月には終了(企業向け)とのことです.既に廃止が一部開始しているとか.
Chrome標準の拡張ページへ行くとV2の拡張には,これらの拡張機能はまもなくサポートされなくなる可能性があります
と表示されていました.
メインスクリプト
service_worker
としてbackground.js
を動作させ,拡張が押された際のイベントハンドラを設定します.
background.js
chrome.action.onClicked.addListener((tab) => {
chrome.scripting.executeScript({
target: { tabId: tab.id },
files: ['send.js']
});
});
動作する内容はsend.js
に記述します.
send.js
(function () {
const url = location.href
const request = new XMLHttpRequest();
const params = {
content: url
};
request.open("POST", "YOUR WEBHOOK HERE", true);
request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
request.send(JSON.stringify(params));
request.onreadystatechange = function () {
if (request.readyState === 4 && request.status === 204) {
console.log("URL successfully sent to Discord:", url);
} else if (request.readyState === 4) {
console.error("Failed to send URL to Discord:", request.status, request.statusText);
}
};
})();
ここで,function
を使って定義し即実行させているのは,複数回アイコンを押された際のスクリプト実行での多重定義を防ぐためです.
実行結果はコンソールへ出力しておきます.
あとは拡張機能をローカルで導入すれば動作します.また今回はウェブフックURLを直接指定にしていますが,今後オプションページを作成して編集できるようにしたいです.
動作
上にピン止めしておいて,アイコンをクリックすると下のとおり動作しました.
複数回クリックも問題なく動作しました.これでベース部分が完成したので以降アップデートを重ねようと思います.
リポジトリ
コメント
自動更新
コメントはまだありません
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.