for Startups Tech blog

このブログのデザインを刷新しました。（2023/12/26）

業務の困りごとを自作のChrome拡張機能で解決しました！

目次

はじめに

こんにちは！フォースタートアップス株式会社のエンジニアの山﨑（@flashlight999）です。 皆さん、日々の業務で「この作業、なんとかならないの？」と感じることはありませんか？ 私もそんな悩みを抱えながら、ある日ふと思いつきました。

「それなら、自分でツールを作ればいいんじゃない？」

そこで挑戦したのが、Chrome拡張機能の開発です。 この記事では、私が開発した拡張機能を使ってどのように課題を解決したのか、そしてその成果についてご紹介します。 興味のある方はぜひ以下のリンクから使ってみてください👇

chromewebstore.google.com

解決したい課題

私の所属するチームでは、PRレビューの際にSlackのチャンネルでPRのURLとPR元のチケットURLを開発者に共有する運用をしています。具体的なフローは以下の通りです。

  1. GitHubでメンションをつけてレビュー依頼を出す。
  2. SlackのチャンネルでPRのURLとPR元のチケットURLを共有する。

このプロセス自体は明確なのですが、SlackでPRレビューを依頼する際にリンクを作成する手間が悩みの種でした。

具体的には、次のような問題がありました。

  • 画面切り替えの多さ

    チケット情報を確認しながら、Slackのリンク作成画面に「タイトル」と「URL」を手動で入力する必要があり、その際にブラウザとSlackを何度も行き来しなければなりませんでした。

  • 手動入力の煩雑さ

    チームでは、リンク先をわかりやすく表現するために、テキストリンクを作る文化があります。そのため、リンク作成ボタンを使って1つ1つ手動で設定するのが非常に面倒でした。

「この手間を何とか削減できないだろうか？」 そう考え、課題を解決するための方法を模索し始めました。

解決策の検討と具体化

課題を解決するために選んだのが、Chrome拡張機能の開発です。

Chrome拡張機能を選んだ理由

  • 技術的に簡単

HTML、CSS、JavaScriptだけで作れるので、特別なスキルは不要。

  • ブラウザ内で完結

作業がすべてブラウザ上で行えるため、相性が良い。

目指したのは、チケット情報（タイトルとURL）の自動取得と、Slack用のハイパーリンク生成を組み合わせたシンプルで便利なツールです。

開発プロセス

準備と学習

Chrome拡張機能の開発は初めてだったため、以下のように準備を進めました。

　参考にした記事はこちら👇

　Chrome拡張機能の実装（入門から公開まで） #JavaScript - Qiita

　実際に手を動かして、基本的な動作を理解しました。

実装の概要

実装の詳細はこちらのリポジトリから確認できます。

以下の機能を実装しました。

開発のフォルダ構成はシンプルです。

├── README.md
├── content-script.js
├── icons
│   ├── icon-128.png
│   ├── icon-16.png
│   └── icon-48.png
├── manifest.json
├── popup.css
├── popup.html
└── service-worker.js

主なファイルの役割は以下の通りです。

  • manifest.json

拡張機能の権限や機能の定義を行う設定ファイル。

  • content-script.js

ハイパーリンクをクリップボードにコピーする。

  • service-worker.js

コンテキストメニューを作成し、選択テキストを元にハイパーリンクを生成。

作った拡張機能の使い方を紹介

  1. Chromeウェブストアから拡張機能をダウンロードする。

  2. テキストを選択してリンクを生成。以下のいずれかの方法を選べます。

    • 方法1: コンテキストメニューを使用
      テキストを選択した状態で右クリックし、コンテキストメニューから「Create Hyperlink」を選択。

    • 方法2: ショートカットキーを使用
      デフォルトのショートカットキーを使ってリンクを生成

      • Windows/Linux: Ctrl+Shift+K
      • Mac: Command+Shift+K
        ショートカットキーはchrome://extensions/shortcutsから自由にカスタマイズできます。

  3. 生成されたリンクをSlackにペーストするだけで完了！

開発の成果

このChrome拡張機能によって、次の成果が得られました。

  1. 画面切り替えの削減

    ブラウザとSlackを行き来する必要がなくなりました。

  2. 操作手順の簡素化

    リンク作成が「選択→クリック→ペースト」の3ステップで完了。

  3. ストレス軽減

    「また手動で入力するのか…」という憂鬱が完全に消えました！

公開の手順

Chromeウェブストアに公開する際は、次の3ステップを踏みました。

  1. アカウント登録

    デベロッパーアカウントを作成（$5の登録料が必要）。

  2. 情報入力

    公開予定の拡張機能の紹介文やスクリーンショット、アイコンを登録。

  3. 審査プロセス

    審査は約1週間。もし不合格でも、修正ポイントが明確に伝えられるので安心です。

おわりに

今回のChrome拡張機能の開発は、技術を使って業務を効率化する楽しさを改めて実感する機会となりました。 みなさんも、日々の小さな困りごとに目を向けて、改善のきっかけを作ってみてはいかがでしょうか？この記事が、その一助になれば幸いです。

もしこの記事が参考になったり、試してみたいと思った方は、ぜひダウンロードして使ってみてください👇

chromewebstore.google.com