Visual StudioでBlazor版ブラウザ拡張機能を作る②

Blazorブラウザ拡張テンプレートで作る方法を記事①で書きました。
本記事は同じ目的を別の方法で達成するものです。

はじめに

本記事はBlazor版のブラウザ拡張機能を開発したいプログラマ向けです。

ブラウザ拡張機能とは：

EdgeやChromeなどのブラウザの広告を消したり、単語の意味を調べるなど機能を拡張する補助アプリのことです。
詳しくは、Blazor版ブラウザ拡張機能を作る①を参照願います。

Blazor版とは：

C#言語のBlazor環境で開発するという意味です。
ブラウザ拡張機能は一般にはJavascriptで開発しますが、Blazor版はC＃言語で開発します。

C#で書くのは：

Balzor+C#がJavascriptに比べて、値の入力やボタン押下などのユーザーとのコンタクトを書くのが便利だからです。
ブラウザ拡張機能をできる限りC#で書き、必要な部分だけをJava Scriptで書くことを想定しています。
必要な部分とは、ブラウザ拡張APIです。

記事①との違いは：

記事①ではブラウザ拡張機能用のテンプレートを使います。
以下のコードは、記事①のテンプレートから自動的に作られます。
・Popup
・Option
テンプレートから必要なものが全て作られます。

記事②ではVisual StudioのBlazor用テンプレートを使います。
以下のコードは、記事②のテンプレートから自動的に作られます。
・タブメニュー
・カウンタ
・天気予報
ブラウザ拡張機能に必要な機能の一部が自動作成されません。
ブラウザ拡張機能では必ずしも必要としないコードが作られます。
アプリ作成、ブラウザ拡張機能への変身と2段階なので、手順が複雑です。

どんなコードをベースに開発するかで、①か②を選びます。

作成方法概要

ブラウザ拡張機能は、以下の手順で開発します。

１．最初にVisual StudioでBlazor版Webアプリを作ります。
２．Blazor版WebアプリをBrowserExtensionに変更します。
３．Option画面とPopup画面を追加します。
４．ブラウザ拡張の機能を追加します。

本作業方法の原文は下記です。

Blazor.BrowserExtension | Build Browser Extension with Blazor

原文通りに作業したところ、多くのエラーが発生しました（2024.6時点）。
重要事項の記載漏れがあるためです。
この記事では、エラーが発生しないことを確認しています。

Blazor版Webアプリを作成する

１．新しいプロジェクト作成する。
　　Blazor WebAssemblyアプリテンプレートを選択し、「次へ」。

２．プロジェクト名を入力し、「次へ」。

３．詳細を設定し、「次へ」。

• フレームワークに [.NET 8.0] を選択

• [プログレッシブ Web アプリケーション] にチェック

• [include sample pages] にチェック

４．プロジェクトが作成されます。

５．ブラウザはEdgeに設定して「実行」します。
　注意１：ブラウザは「▶https▾」の部分をクリックして選びます。
　注意２：2004.6時点、Chromeに設定するとエラーが発生しました。
　　　　エラーが発生した場合、画面下部にエラー行が表示されます。

以上で、Blazor版Webアプリができました。

Webアプリをブラウザ拡張機能に変身させる

１．NuGetでBlazor.BrowserExtensionライブラリをインストールします。

Ver1.4.3がインストールされました。

２． プロジェクトの<PropertyGroup>に以下を追加します。
　<BrowserExtensionBootstrap>true</BrowserExtensionBootstrap>

３．Pages/Home.razorからPages/Index.razorにファイル名を変更します。
　　コードを開き、先頭の１行を以下に変更します。

@page "/index.html"
@inherits IndexPage

４．_Imports.razorに以下を追加します。
　　@using Blazor.BrowserExtension.Pages

５．wwwrootの下にBackgroundWorker.jsを作成します。

// Import for the side effect of defining a global 'browser' variable
import * as _ from "/content/Blazor.BrowserExtension/lib/browser-polyfill.min.js";

browser.runtime.onInstalled.addListener(() => {
  const indexPageUrl = browser.runtime.getURL("index.html");
  browser.tabs.create({
    url: indexPageUrl
  });
});

６．Program.csにbuilder・・・以下を追加します。

public static async Task Main(string[] args)
{
    ...
    builder.UseBrowserExtension(browserExtension =>
    {
        builder.RootComponents.Add<App>("#app");
        builder.RootComponents.Add<HeadOutlet>("head::after");
    });
    ...
}

７．ビルドします。
　ビルドするとBrowser Extension対応のプロジェクトに変わります。
　下記manifestが作成されます。

{
  "manifest_version": 3,
  "name": "My Blazor Extension",
  "description": "My browser extension built with Blazor WebAssembly",
  "version": "0.1",
  "background": {
    "service_worker": "BackgroundWorker.js",
    "type": "module"
  },
  "content_security_policy": {
    "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self'"
  },
  "web_accessible_resources": [
    {
      "resources": [
        "framework/*",
        "content/*"
      ],
      "matches": [ "<all_urls>" ]
    }
  ]
}

生成された下記のファイルが拡張機能プログラムです。
赤枠部分をEdgeに組み込みます。

生成されたファイル

拡張機能をEdgeに組み込む

１．下記URLを入力します。
　　または拡張機能アイコンをクリックします。

edge://extensions/

２．Edgeの拡張機能画面が表示されます。
　　開発者モードにします。

拡張機能のパック（赤枠）をクリックします。
生成されたプロジェクトのフォルダ（以下）を選択します。
　bin/Debug/net8.0/browserextension

　このような画面（Index.razor）が起動されます。

まとめ

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

原文の手順の説明に重要な誤りがあり、多くのエラーに遭遇しました。
本記事では原因を対策し、エラーが発生しないことを確認しました。
意味不明のエラーに遭遇することなく開発できると思います。

良いブラウザ拡張アプリの開発に役立ちましたら幸いです。　

---

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