【Manifest V3】Chrome拡張機能を作って公開した

Chrome拡張機能を作って公開してみました。

手数料は1度きり5ドルの支払いのみでChromeウェブストアに公開されます。

作ったChrome拡張機能

Yahooファイナンスのランキングページに「IR BANK」へのリンクと「銘柄名＋IR」でGoogle検索するリンクを追加する単純なものです。

＞＞Yahooファイナンス拡張

ネーミングセンスの無さ…

作ろうと思ったきっかけ

こちらの動画で公開されている内容で、日本の高配当銘柄を探し出そうと思いました。

ブログ記事はこちら＞＞【初心者向け】「分析ツール」を使った日本の高配当株の見つけ方をカンタン解説！

高配当銘柄を探す手順に

Yahooファイナンスの配当利回りランキングから証券コードをコピーして
IR BANK（銘柄分析のサイト）で検索する

という作業が必要ですが、これがめんどい。

「いちいちコピペしてGoogle検索なんかしてられん」と思い、YahooファイナンスのページにIR BANK のリンクを追加することにしました。

Chrome拡張機能に必要なファイル

ポップアップ画面が不要でバックグラウンドで処理するタイプのChrome拡張機能に必要なファイルは2つだけで、ファイル構成は以下です。

フォルダ
├manifest.json
└background.js

manifest.json

「manifest.json」ファイルはChrome拡張機能の設定ファイルです。JSON形式で設定を追加します。

{
  "name": "Yahooファイナンス拡張",
  "description": "Yahooファイナンスのランキングページに「IR BANK」へのリンクを追加します。",
  "version": "0.1.0",
  "manifest_version": 3,
  "permissions": [
    "scripting",
    "tabs"
  ],
  "host_permissions": [
    "https://finance.yahoo.co.jp/"
  ],
  "background": {
    "service_worker": "background.js"
  }
}

最低限これだけ設定すれば動きました。

name
- 拡張機能の名前
description
- 拡張機能の説明
version
- 拡張機能のバージョン
- バージョンが上のもので上書きされる
manifest_version
- 3固定
permissions
- ChromeのAPIを使う時に必要みたい
- ウェブストアに公開するときに権限使用の理由が必要
- とりあえずいろいろ使っておこうはダメそう
- "tabs"はURLの変更時に発火するイベントchrome.tabs.onUpdated.addListenerのために設定
- 一覧：https://developer.chrome.com/docs/extensions/mv3/declare_permissions/
host_permissions
- ホスト権限
- Yahooファイナンスのページで動かしたいので"https://finance.yahoo.co.jp/"を設定
background
- "service_worker"にバックグラウンドスクリプトの名前を設定

より詳しくはこちら＞＞Manifest file format

background.js

メインの処理をここに書きました。

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (
    changeInfo.status === "complete" &&
    tab.url.startsWith("https://finance.yahoo.co.jp/stocks/ranking/") &&
    tab.url.indexOf('?') != -1
  ) {
    chrome.scripting.executeScript({
      target: { tabId: tabId },
      function: addIrLinks,
    });
  }
});

URLの変更時に関数を実行させたかったので、chrome.tabs.onUpdated.addListenerを使いました。

changeInfo.status === “complete”
- 読み込みが終わったか
tab.url.startsWith
- 対象のURLを指定
chrome.scripting.executeScript
- function: addIrLinks
- functionで実行する関数を指定
- addIrLinksという名前の関数を実行するようにしました