実用的なブラウザ拡張機能の作り方

１．はじめに

プログラマ向けのブラウザ拡張機能の記事です。
Blazor.BrowserExtension.Templateは"manifest_version": 3対応です。
下記のGitHubを便利に使う参考記事は"manifest_version": 2対応です。
参考記事：GitHubを少し便利に使えるようなChrome拡張機能を作った
本記事では参考記事を下記の通り修正しました。
・"manifest_version": 2だったので、"manifest_version": 3に変更します。
　"manifest_version": 2と"manifest_version": 3では文法が異なります。
　”manifest_version”の値を変えただけではエラーとなります。
・Blazor.BrowserExtension.Templateで記事の機能を実現する。
・Edgeで動かしてみる。
　題名にChrome拡張機能とありますが、Edgeでも動きました。

元記事からやりたいことを引用します。

２．必要な環境

以下が必要となります。事前に準備をして下さい。
・Visual Studio 2022
・.NET SDK 
・.net 8.0
正しく実行できない場合は準備不足です。不足環境を追加してください。

３．作業手順

３．１．プロジェクトを作成する

Blazor.BrowserExtension.Templateテンプレートを取得する。
MyBlazorExtensionプロジェクトを作成する。

dotnet new install Blazor.BrowserExtension.Template
dotnet new browserext --name BlazorChromeExtension
cd MyBlazorExtension
dotnet build

３．２．Visual Studioを起動して、manifestを編集する

作製したプロジェクトのMyBlazorExtension.csprojを指定してVisual Studioを起動します。
manifest.jsonを開き、contnt_scriptsパラメタを追加（赤枠部分）します。

"content_scripts": [
    {
      "matches": ["https://github.com/*"],
      "js": ["contentScript.js"]
    }
  ]

2024.4.3 追記
注意１：contnt_scriptsパラメタはVer2とver3のどちらでも使えます。
注意２：修正する場合は"version"の値の修正を忘れないようにします。
　　　　忘れると、contentScript.jsを変更しても効きません。
　　　　このような間違いをしたので、注意事項として追記しています。

３．３．JavaScriptを取得する

参考記事：GitHubを少し便利に使えるようなChrome拡張機能を作ったのからcontentScript.js のスクリプトをコピー（Visual Studio画面のwwwrootパス：赤枠部分）します。

window.addEventListener(
  'load',
  () => {
    const links = document.getElementsByTagName('a')
    Array.prototype.forEach.call(links, link => {
      const isExternalLink =
        link.href.match(/^https?:\/\/.+/) && !link.href.includes('github.com')
      if (isExternalLink) {
        link.target = '_blank'
        link.rel = [link.rel, 'noopener', 'noreferrer'].join(' ')
      }
    })
  },
  false,
)

３．４．Visual Studioを起動してビルドして拡張機能を作る

前項で修正したプロジェクトをVisual Studioで起動し、ビルドします。
赤枠部分のファイルが生成されます。これが拡張機能プログラムです。

４．拡張機能をブラウザに組み込む

①Edgeの拡張機能画面を開きます。

edge://extensions/

②開発者モードにする
③拡張機能のパックをクックして、生成されたプロジェクトのフォルダを選択します。

④作成した拡張機能（赤枠部分）が読み込まれます。

⑤メニュー項目も追加されています。

５．まとめ

前回記事Blazor.BrowserExtension.Templateでブラウザ拡張機能を作るでは、用途は紹介したものの、実用的な具体例がありませんでした。
今回はバージョンアップで古くなったブラウザ拡張機能を最新バージョンで使えるようにしてみました。
なお、拡張機能は便利なツールですが、セキュリティリスクもありますので、潜在的なリスクに注意してお使い下さい。
決して（どのように動作するのか）理解が不十分なまま、サンプルコードをあなたのブラウザに組み込むことがないようにしてください。

おまけ

下記でBlazor.BrowserExtensionについて、更に深く学べます。

Youtubeで学ぶには以下でしょう。
chrome拡張の作り方
シリーズとなっており、深く学ぶことができます。

【マガジン】BITCOIN
【マガジン】ＩＴ技術
ＡＩは年寄りに若者の気持ちを教えるツールになれる？
去年前半の生成AIは嘘つきだった、去年後半の生成AIはバカだった、今年の生成AIにあなたは何を期待しますか？
トップの座を脅かすとこのような試練が訪れる（前編）
PhotoSwiper V5を使っておしゃれな写真集ウェブページを簡単に作成する
Blazor.BrowserExtension.Templateでブラウザ拡張機能を作る
実用的なブラウザ拡張機能を作る（本記事）