テンプレートでBlazor版ブラウザ拡張機能を作る①

Visual Studioで作る方法を別記事②で書くことにしました。
本記事のタイトルとトップ画像を変えて再発行します。

はじめに

申し訳ありませんが、プログラマ向けの記事です。
ブラウザ拡張機能とは、EdgeやChromeなどのブラウザの機能を拡張するための補助アプリのことです。
例えば以下の拡張機能がウェブストアで提供されています。
　・ブラウザに広告を表示しない。　広告ブロッカー
　・外国語を日本語で表示する。　　Google翻訳
　・パソコンでLineを使う。　　　　Line
ブラウザにこんな拡張機能があったらいいなと思った、あるいは会社からブラウザからデータを取得するツールを作れと命令された。
このような場合は、Blazor.BrowserExtension.Templateというテンプレートが使えますという紹介です。
テンプレートを使ってテンプレートに組み込まれている標準メッセージが表示されるまでを解説します。
Balzor版、記事②との違いなどは、記事②を参照願います。

１．一般的な用途

• ツールバー：これらはブラウザ固有のツールバーで、グラフィカルユーザーインターフェース（GUI）と機能を拡張します。

• プラグイン：APIを使用してブラウザに特定の機能を追加します。　　Google ChromeではPPAPI(Pepper Plugin API)と言います。

• プライバシー：オンラインプライバシーを保護し、ユーザーのブラウジングプライバシーを制御し、広告やスクリプトをブロックできます。

• 開発：ブラウザ拡張機能の作成には、各ブラウザごとの特定のアーキテクチャとAPIが必要です。ただし、Add-ons FrameworkやCrossriderなどのクロスブラウザのフレームワークもあります。

２．作成準備

　以下を事前に準備をして下さい。

• 開発ツールとしてVisual Studio 2022が必要です。

• テンプレートBlazor.BrowserExtension.Templateを使います（準備不要）。

• .NET SDK が必要です。

• .net 8.0が必要です。

３．テンプレートを取得してプロジェクトを作成する

　Blazor.BrowserExtension.Templateテンプレートを取得するには以下のコマンドを入力します。

dotnet new --install Blazor.BrowserExtension.Template

　プロジェクトを作成するには以下のコマンドを入力します。

dotnet new browserext --name BlazorChromeExtension

　正しく実行できない場合は準備不足ですので、足りないものを追加してください。

　　実行結果：

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

　前項で作成したプロジェクトをVisual Studioで起動し、ビルドします。①BlazorChromeExtension.csprojをVisual Studioで起動する。

②Manifestに下図の赤線のように手を加え、ビルドする。

③下記のファイルが生成される。これが拡張機能プログラムです。

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

chrome://extensions/

　Chromeの拡張機能の  [パッケージ化されていない拡張機能を読み込む]  をクリックするとフォルダの選択が求められる。
   上図のフォルダ（赤枠のbrowserextension）を指定すると、拡張機能が組み込まれる。

⑤メニューバーから拡張機能を選ぶ。

⑥拡張機能を実行する。

⑧Edgeの拡張機能にも組み込むことができます。
拡張機能画面を開き、

edge://extensions/

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

５．注意すべき点

　拡張機能は便利なツールですが、セキュリティリスクをもたらすこともあります。

• 開発者の意図がユーザーの意図に反する動作である場合、ユーザーのプライバシーを危険にさらすことがあります。　　　　　　　　　　　　　　　例：二要素認証のセキュリティ機能を回避する拡張機能がある。

• 悪意のある拡張機能の場合、アンインストールが難しい場合があります。　　

• 不要なポップアップ広告を追加する拡張機能などがあります。　　　　　Googleはポリシーに違反する拡張機能を削除してくれるはずです。

　拡張機能は強力なツールですが、潜在的なリスクを理解して下さい。

６．最後に

　最新のBlazor.BrowserExtension.Templateを使ってブラウザ拡張機能を作る方法は日本語サイトには見つかりませんでした。
　誰かが苦労して得た成果を早い時期に紹介すれば、次からは多くの人がその労力を減らせます。
　いつもは成果を利用させていただく側でしたが、今回は提供させていただくことができました。これが誰かの助けになりましたら幸いです。　

7．もっと有益なサンプル

　下記で更に深く学べます。

　ビルドしてChromeに組み込みます。

　拡張機能を起動してみます。
　Blazorを学んでいれば馴染の画面が表示され、どのように作ればよいか頭に浮かぶと思います。

【マガジン】BITCOIN
【マガジン】ＩＴ技術
生成AIは年寄りに若者の気持ちを教えるツール
AI 23前半嘘つき,23後半バカ,2024は何を期待？
トップの座を脅かすとこのような試練が訪れる（前編）
（後編）準備中　　　　　　　　　　　　　
Blazor版ブラウザ拡張機能をテンプレートで作る①（本記事）
Blazor版ブラウザ拡張機能をVisual Studioで作る②（予定）
PhotoSwiper V5で写真集Web表示
大量の大容量画像の圧縮をpowershellで
大量の大容量画像の圧縮をpythonで
６年前に新品10万円台だったパソコンを1万円台中古パソコンに買い替える
高齢者、Excelでシートの目次を作って情報をすっきり管理