isirmtブログ
タグシリーズ投稿
お気に入りのタグ

ブログを書いている人

isirmt

ホームページ

GitHub
github_user_icon
isirmt
Software & Web
@isirmt

(管理者用)ダッシュボード

© isirmtBuild with NextjsBlogWithGitPAT  (bbf84c2)
  1. アイコンクリックでDiscordへリンクをシェアするChrome拡張を作る
  2. 経緯
  3. 準備
  4. の作成
  5. メインスクリプト
  6. 動作
  7. リポジトリ
共有
2024
10
10

アイコンクリックでDiscordへリンクをシェアするChrome拡張を作る

コメント: 0件
Chrome拡張
JavaScript
Webhook
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.
Manifest V2 のサポート タイ...Manifest V2 の段階...https://developer.chrome.com/docs/ex...
GitHub - isirmt/Shar...Extension to si...https://github.com/isirmt/Share-Link...thumb
サポート終了予告画像
初期バージョンの動作結果