実用的なブラウザ拡張機能の作り方
１．はじめに
プログラマ向けのブラウザ拡張機能の記事です。
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でも動きました。
元記事からやりたいことを引用します。
GitHubのWebページで外部リンクを新規タブで開けるようにする、シンプルですがこれがやりたいことです。
どうやって実現しようか考えて、この悩みを解決するChrome拡張機能を作ってみようという結論に至りました。
また、この機能に必要な処理は以下のようになると考えました。
１．GitHubのWebページを開く
２．Webページ中からaタグを探す
３．aタグの中から github.com 以外のドメイン（外部リンクとします）のURL をもつ要素を探す
４．外部リンクを持つ要素に target="_blank" を付与する
２．必要な環境
以下が必要となります。事前に準備をして下さい。
・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でブラウザ拡張機能を作る
実用的なブラウザ拡張機能を作る（本記事）
いいなと思ったら応援しよう！
