銘柄テキスト選択＋ワンアクションで「株探」表示する Chrome 拡張機能を書いてみた

TL;DR

ネット記事をブラウジングしていたら気になる企業や株式銘柄を見かけたので、それについて「株探」や「Yahoo! ファイナンス」等で調べてみた、というユースケースが日常茶飯事的にあります。その時の、テキストをコピー→「株探」等のサイトを開いてペーストして選択、というような作業が煩わしく、コンテクストメニューから「XXX を『株探』で表示」、みたいな Chrome 拡張無いかな… という欲求を何とかしてみたという話です。

作った

という訳で、Chrome 拡張機能は初めてでしたが、書いてみました。と言っても開発物は非常にシンプルで、以下の短い2ファイルだけです。

Chrome 拡張機能には、パッケージ情報を記したマニフェストファイル manifest.json のバンドルが必要なので、まずそれから。こんな感じです↓。実装する機能に応じて、permissions に必要な権限を明記してやるあたりで理解と知識が必要かと。

{
  "manifest_version": 3,
  "name": "クイック株探",
  "version": "0.1",
  "permissions": [
    "activeTab",
    "contextMenus",
    "scripting"
  ],
  "background": {
    "service_worker": "background.js"
  }
}

あともう1つはプログラム本体の background.js 。選択状態のテキストを取得して、それが銘柄コード(0〜9,A〜F からなる4桁の英数字)っぽかったら「株探」の銘柄チャートページへ、そうでないなら検索結果ページを、新しいウィンドウ(タブ)で開くだけです。

// 拡張機能がインストールされたときにコンテキストメニューを作成
chrome.runtime.onInstalled.addListener(() => {
    chrome.contextMenus.create({
        id: "openKabutanWithSelected",
        title: "選択した銘柄を株探で表示する",
        contexts: ["selection"]
    });
});

// コンテキストメニューがクリックされたときの処理
chrome.contextMenus.onClicked.addListener((info, tab) => {
    if (info.menuItemId === "openKabutanWithSelected") {
        // 選択されたテキストを取得し、内容に応じて株探の適切なページを開く
        const selectedText = info.selectionText;
        chrome.scripting.executeScript({
            target: { tabId: tab.id },
            func: (text) => {
                if (/^[0-9A-F]{4}$/.test(text)) {
                    window.open('https://kabutan.jp/stock/chart?code=' + text);
                }  
                else {
                    window.open('https://kabutan.jp/search/?q=' + encodeURIComponent(text));
                }
            },
            args: [selectedText]
        });
    }
});

使い方

適当なフォルダ(例:quick-kabutan)を作って、上記の2ファイルを保存。
Chrome で chrome://extensions/ を開く。
右上の「デベロッパーモード」を ON にする。
左上メニューから「パッケージ化されていない拡張機能を読み込む」をクリックして、ファイルダイアログにて上記で作ったフォルダを指定して、拡張機能をインストールする。
適当なウェブページで上場企業名や、その銘柄コードを選択して、マウス右クリックでコンテクストメニューをポップアップさせ、「選択した銘柄を株探で表示する」を選択。

所感

冒頭に Chrome 拡張機能開発は未経験だと書きましたが、以前だとそんな時は調べ物と試行錯誤で結構な時間を取られたもんですが、今は AI 先生が全部代行してくれる勢いで助けてくれるので数時間で済んでしまいました。便利さを実感するとともに危機感もヒシヒシと感じてますw

尚、開発物一式を Chrome ウェブストアで配布することも考えたのですが、特定企業のウェブサイトに誘導するアプリがレギュレーション的に問題ないのかの確認をはじめ、諸作業が面倒そうだったので今回は見送りました。この記事への反応次第では、汎用性を持たせる方向でレベルアップさせ、ストア公開を目指しても良いかなーと思ったりしてます。