はじめに
どうも、たにあんです。Advent Calendar 17日目です。
Cloudnative IRS Advent Calendar 2025
情シス業務の中でヘルプデスク、問い合わせ対応って対応する側は当然大変なんですが、問い合わせする側も大変ですよね。
問い合わせ先がわからん、Slackチャンネル多すぎてどこに投げたらええねんとか。
問い合わせ投げてみたら「別のチャンネルあるのでそっちに投稿してね^^」と言われてしまったり…. 正直、面倒だと感じてしまうこともしばしば。
そこで「Chromeの拡張機能とか作ったことないな」という思いとともに、ブラウザから直接問い合わせをSlackチャンネルへ投稿できるChrome拡張機能を作ってみました。
開発の背景
課題
- 問い合わせ内容を整理して共有するのに時間がかかる
- 複数のツールを切り替える必要があり、作業が煩雑
解決したいこと
- スピーディかつ簡単な問い合わせ:
- ブラウザから直接、問い合わせをSlackへ送信
- 発生日時、件名、事象、解決したいこと、緊急度を整理して送信
- 複雑な設定不要で、誰でも簡単に使える
主な機能
問い合わせフォーム
拡張機能のアイコンをクリックすると、シンプルなフォームが表示されます。以下の情報を入力できます：
- 発生日時: 自動的に現在の日時が設定されます（手動で変更可能）
- 件名: 問い合わせの概要（最大100文字）
- 発生している事象: 現在起きている問題の詳細
- 解決したいこと: 期待する結果や解決方法
- 緊急度: High / Middle / Low から選択
Slackへの自動投稿 & Asanaへの起票
送信ボタンをクリックすると、入力内容が整形されてSlackチャンネルへ自動投稿されます。メッセージは以下のような形式で表示されます：
ついでに、Asanaチケットも発行するようにしています。
構成
ざっくりこんな感じです。
① 送信
Chrome拡張機能から送信されたら、Cloudflare Workersの方で拡張機能のIDを見て正しいリクエストかどうか判定しています。
拡張機能自体、全世界に公開するような想定のものでもないので一旦これでよしとしてます。
Cloudflare Workersがリクエストを受け取ったら、各サービスへのリクエストを送信します。
② Asana API Request
Asanaのプロジェクトにチケットを起票するような処理を走らせます。
③ Slack API Request
Asanaのチケットへのリンクとともに問い合わせ内容をSlackの特定チャンネルにメッセージを投下します。
作り方
準備しておくもの
| カテゴリ | 必要なもの | 備考 |
|---|---|---|
| Cloudflare | アカウント Wrangler CLI | 無料でOK |
| Asana | PAT（Personal Access Token） Project ID | お試しなら無料でOK |
| Slack | Bot Token 投稿先のチャンネルID | 特になし |
コードの作成
まずは拡張機能とCloudflare Workersで使用するコードを用意してください。
※コードの詳細は割愛します。気になる方はGitHubをご覧ください。
moritaniantech/chrome-extension-inquiry-form
Cloudflare Workers の設定
先にCloudflare Workersを設定しておきます。
- ターミナルでWorkersのコードがあるディレクトリまで移動し、以下のコマンドを実行
wrangler login
- 各種変数を設定
wrangler secret put SLACK_BOT_TOKEN wrangler secret put ASANA_PERSONAL_ACCESS_TOKEN wrangler secret put ASANA_PROJECT_ID wrangler secret put SLACK_DEFAULT_CHANNEL_ID
拡張機能のインストール
※ お試しのため、ここではDeveloper モードで使用します。
- Chrome を起動
- 「拡張機能の管理」を開きデベロッパーモードON
- 「パッケージ化されていない拡張機能を読み込む」からコードが置かれているディレクトリを指定
- インストールされるとIDが表示されるのでコピー
WorkersのDeploy
- ターミナルでWorkersのコードがあるディレクトリまで移動
- 以下のコマンドで拡張機能IDを
chrome-extension://${extensionId}のフォーマットで変数として設定
wrangler secret put ALLOWED_EXTENSION_ID
- 以下のコマンドを実行してDeploy
wrangler deploy
- ターミナルに表示されたURLをコピー
拡張機能側の再設定
- ターミナルで拡張機能のコードがあるディレクトリまで移動
- 以下のコマンドを実行（
${url}はWorkersのDeployでコピーしたもの）
CLOUDFLARE_WORKERS_URL=${url} npm run build
- 再度、「拡張機能のインストール」を実施
ここまで完了したらChrome拡張機能から送信してもらえるとSlackとAsanaに送信されると思います。
おわりに
今回はコードを一切見ずにCursorだけで作成しました。
拡張機能を配布するには、特定の組織限定でChrome Web Storeで公開する方法があるので、そちらを使っていただけると良いかと思います。
参考：カスタムの Chrome アプリと拡張機能を作成して公開する
