ブラウザ

ブラウザ

Chrome拡張機能のcontent_scriptsで実行されるScriptをデバッグする

やりたいこと以下のページで特定のページでJavascriptを実行する拡張機能を作成しました。"content_scripts"で実行するScriptのデバッグをします。デバッグ方法通常のページのデバッグと同様にF12もしくはCtrl+Shit+IでDevToolを開きます。画面上部のSourcesタブを選択後に”Contens Scripts”タブを選択します。”Contens Scripts”タブが表示されない場合は>>をクリックしてから”Contens Scripts”をクリックします。”Contens Scripts”タブに拡張機能で使用するJavaScriptがリストされます。リスト...
2024.10.03
ブラウザ
ブラウザ

Chromeの拡張機能にオプションページを追加する。

やりたいことChromeの拡張機能にはアイコンをクリックすると以下のように”オプション”がメニューに表示され、オプションページを表示することができるものがあります。この記事では上のように拡張機能にオプションを追加します。Chromeの拡張機能作成の基本は以下のページをご参照ください。実装manifestの修正manifestファイルに以下の設定を追加します。 "permissions": ["storage"], "options_page": "options.html",permissionsのStorageは、設定を保存/読み込みするための権限です。オプションページの作成メニューオプショ...
2024.10.03
ブラウザ
ブラウザ

拡張機能追加時エラー”Invalid value for ‘content_scripts[0].matches[0]’: Missing scheme separator.”(Edge,Chrome)

やりたいことChrome,Edgeに自作の拡張機能を追加時に以下のエラーが表示され追加できないときの対処。Invalid value for 'content_scripts.matches': Missing scheme separator.マニフェストを読み込めませんでした。詳細以下のマニフェストファイルを持つ拡張機能を持つ拡張機能を登録しようとした際に”Invalid value for 'content_scripts.matches': Missing scheme separator.”のエラーが出ました。{ "name": "Sample", "version": "1", "...
2023.07.03
ブラウザ
ブラウザ

拡張機能追加時エラー”UTF-8 でエンコードされていません。”(Edge,Chrome)

やりたいことChrome,Edgeに自作の拡張機能を追加時に以下のエラーが表示され追加できないときの対処。コンテンツ スクリプトのファイル「XXXX.js」を読み込むことができませんでした。UTF-8 でエンコードされていません。マニフェストを読み込めませんでした。XXXX.jsは拡張機能で使用しているファイル名です。原因”UTF-8 でエンコードされていません。”とあるようにスクリプトファイルの文字がUTF-8でない可能性があります。特に日本語を扱う際に注意が必要です。”マニフェストを読み込めませんでした。”とありますが、スクリプトのみに問題があってもこのメッセージは表示されます。まずはスク...
2023.06.18
ブラウザ
ブラウザ

Edgeの拡張機能を自作する

やりたいことEdgeの拡張機能を自作EdgeとChromeの拡張機能Edgeの拡張機能とChromeの拡張機能は基本的に同じです。すべてが使用できるかはわかりませんが、Chrome向けに作成した拡張機能はEdgeでも使用できます。簡単なChromeの拡張機能の作成方法は下のページを参照してください。拡張機能の登録作成した拡張機能を登録する方法は下のページを参照してください。
2023.05.11
ブラウザ
ブラウザ

自作のChrome拡張機能をEdgeで使用する

やりたいこと自作のChromeの拡張機能をEdgeで使用する。Chromeの拡張機能の作成は以下のページ環境Edge：112.0.1722.64拡張機能の登録すべての拡張機能で保証するものではありませんが、Chromeの拡張機能をEdgeに登録するために修正は不要です。以下の手順で作成した拡張機能をEdgeに登録します。Edgeを開き、上記のようにユーザ名横の”…”　→　”拡張機能”を選択します。上のGUIが表示されるので、”拡張機能の管理”をクリックします。画面左の”開発者モード”をオンにします。”開発者モード”のチェックが表示されない場合は画面左の三をクリックして表示させます。画面右側に”...
2023.05.03
ブラウザ
ブラウザ

Chromeの拡張機能(manifest v3)を使用して特定のページを変更する

やりたいことChromeの拡張機能を使用して特定のページを変更する。サーバーのファイルを編集するわけではなく拡張機能をインストールしたPCでのみ有効です。環境Chrome：112.0.5615.138拡張機能のmanifestに関して拡張機能のmanifest：V3現在、検索で出てくる多くのページで説明されているChromeの拡張機能はmanifest Version2 (V2)です。V2は将来的に廃止予定ですので可能な限りV3を使用したほうが賢明です。また2023/1や2023/6にV2が廃止になるような記載があるページがありますが、誤りか情報が古いです。現在（2023/5月現在）、廃止の予...
2023.05.02
ブラウザ