テンプレートで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正しく実行できない場合は準備不足ですので、足りないものを追加してください。
実行結果：
F:\git>dotnet new --install Blazor.BrowserExtension.Template
.NET 8.0 へようこそ!
---------------------
SDK バージョン: 8.0.200
テレメトリ
---------
.NET ツールは、エクスペリエンスの向上のために利用状況データを収集します。データは Microsoft によって収集され、コミュニティと共有されます。テレメトリをオプトアウトするには、好みのシェルを使用して、DOTNET_CLI_TELEMETRY_OPTOUT 環境変数を '1' または 'true' に設定できます。
.NET CLI ツールのテレメトリの詳細をご覧ください: https://aka.ms/dotnet-cli-telemetry
----------------
ASP.NET Core HTTPS 開発証明書をインストールしました。
証明書を信頼するには、'dotnet dev-certs https --trust' を実行します
HTTPS の詳細情報: https://aka.ms/dotnet-https
----------------
最初のアプリを作成するには、https://aka.ms/dotnet-hello-world を参照してください
最新情報については、https://aka.ms/dotnet-whats-new を参照してください
ドキュメントを探すには、https://aka.ms/dotnet-docs を参照してください
GitHub で問題の報告とソースの検索を行うには、https://github.com/dotnet/core を参照してください
'dotnet --help' を使用して使用可能なコマンドを確認するか、https://aka.ms/dotnet-cli にアクセスしてください
-------------------------------------------------------------------------------------
警告: 'dotnet new --install' の使用は非推奨です。代わりに 'dotnet new install' を使用してください。
詳しい情報を見るには、以下を実行してください。
dotnet new install -h
次のパッケージがインストールされます:
Blazor.BrowserExtension.Template
成功: Blazor.BrowserExtension.Template::1.2.2により次のテンプレートがインストールされました。
テンプレート名 短い名前 言語 タグ
----------------------------------------- ---------- ---- ----------------------------
Browser extension with Blazor WebAssembly browserext [C#] Web/Blazor/WebAssembly/BrowserExtension
F:\git>dotnet new browserext --name BlazorChromeExtension
テンプレート "Browser extension with Blazor WebAssembly" が正常に作成されました。
４．Visual Studioを起動してビルドして拡張機能を作る
前項で作成したプロジェクトをVisual Studioで起動し、ビルドします。①BlazorChromeExtension.csprojをVisual Studioで起動する。
②Manifestに下図の赤線のように手を加え、ビルドする。
③下記のファイルが生成される。これが拡張機能プログラムです。
拡張機能をブラウザに組み込む
chrome://extensions/ Chromeの拡張機能の [パッケージ化されていない拡張機能を読み込む] をクリックするとフォルダの選択が求められる。
上図のフォルダ（赤枠のbrowserextension）を指定すると、拡張機能が組み込まれる。
⑤メニューバーから拡張機能を選ぶ。
⑥拡張機能を実行する。
⑧Edgeの拡張機能にも組み込むことができます。
拡張機能画面を開き、
edge://extensions/開発者モードを有効にし
拡張機能のパックをクックして、生成されたプロジェクトのフォルダを選択します。
Edgeに組み込む
５．注意すべき点
拡張機能は便利なツールですが、セキュリティリスクをもたらすこともあります。
開発者の意図がユーザーの意図に反する動作である場合、ユーザーのプライバシーを危険にさらすことがあります。 例：二要素認証のセキュリティ機能を回避する拡張機能がある。
悪意のある拡張機能の場合、アンインストールが難しい場合があります。
不要なポップアップ広告を追加する拡張機能などがあります。 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でシートの目次を作って情報をすっきり管理
いいなと思ったら応援しよう！
