Manifest v3 移行について

chrome拡張機能を実装しており、manifest　v2　→　v3へ移行中です。
xpl/crx-hotreload の　hot-reload.js を
manifest v2　＝　background へ実装して利用しておりましたが、
manifest v3　＝　service worker になり、
hot-reload.js をそのまま実装すると、
chrome.runtime.getPackageDirectoryEntry is not a function
とエラーが出て動作しない状況です。
色々検索したのですが、v3で、このfunctionを利用できないのと、
代替えのfunctionも見当たらない状態です。
代替え案などありましたら教えていただきたいです。
拡張機能の概要は、.zip化していないフォルダ群をデベロッパーモードで
拡張機能に読み込ませて実装、運用してます。
hot-reload.jsは、その読み込ませたフォルダの中身に修正があった場合
リロードさせております。
v3になっても同じ仕様で利用したいと考えております。
以上よろしくお願いします。

回答1件

ベストアンサー

backgroundからchrome.windows.createを使用して開いた拡張機能ページであればgetPackageDirectoryEntryを利用可能です。
（popupでも利用可能ですが、こちらの方が利用用途に則していると思います。）

必要な処理はこちらのページで行い、結果のみをsendMessageで返す実装に変更するのはいかがでしょうか。

~~※ シリアライズ不可のオブジェクトを共有したい場合はIndexedDBが利用可能です。~~
→ 検証の結果DirectoryEntryは格納不可でした

追記

ポップアップ画面を開いたままにしておくという制約はありますが、動作はしたので実装内容を記載します。
ファイル配置は以下の想定です。

extension-root
   ├─background.js
   ├─hot-reload.js
   └─hot-reload.html

backgrond.js

下記内容を追記
※ ポップアップが複数開くのを防ぐためにはmanifest.jsonのpermissionsにtabsを追加してください
※ ポップアップを自動的に開くためのコードなので、手動で開く場合は不要です

js
1chrome.management.getSelf(self => {
2    if (self.installType === 'development') {
3        chrome.tabs.query({
4            url: chrome.runtime.getURL('hot-reload.html')
5        }, tabs => {
6            tabs.length || chrome.windows.create({
7                url: 'hot-reload.html',
8                type: 'popup',
9                width: 200,
10                height: 200,
11                focused: false
12            });
13        });
14    }
15});

hot-reload.html

新規作成

html
1<!DOCTYPE html>
2<html>
3<head>
4<script src="hot-reload.js"></script>
5</head>
6<body>
7<p>Do not close for hot reload!!</p>
8</body>
9</html>

投稿2022/09/26 03:27

編集2022/10/02 15:43

t-n

総合スコア135

回答へのコメント

kondo-modoru

2022/09/28 00:54

ご回答いただきありがとうございます。 chrome.windows.createで別windowsを開き、それにhot-reload.jsを記述するということでしょうか？自身でpopupにhot-reload.jsを実装してリロードを走らせてみたのですが、リロードできなかった記憶があります。必要な処理＝hot-reload.js　以外のmatchesの外部URLに差し込む処理のことでしょうか？その場合CORSの問題は大丈夫なのでしょうか？

t-n

2022/09/30 15:35

必要な処理: getPackageDirectoryEntryを利用する処理です

kondo-modoru

2022/10/01 02:48

丁寧に処理まで記載いただきありがとうございます。実装してみた所、おっしゃっるっとおりgetPackageDirectoryEntryのエラーは発生しないのですが、リロード対象がポップアップ(hot-reload.html)になっている様子なのですが、間違いなさそうでしょうか？インターバル中。最後に掴んだ、chrome　tabと考えてましたが、何度も検証しましたが、リロード対象がポップアップ(hot-reload.html)になっている様子です。

t-n

2022/10/02 09:45

調査はしますが、私の環境では再現しませんでした…

t-n

2022/10/02 09:52

chrome.windows.createを呼び出す際にfocused: falseを指定しない場合は、hot-reload.htmlにフォーカスが当たってしまい、リロード対象となってしまう可能性はありそうです。

kondo-modoru

2022/10/02 15:26 編集

ご回答ありがとうございます。１点確認があります。 manifestについてですが service_worker→background.js default_popup→hot-reload.html contents_scripts→自作して更新したい.js permission→”tabs” となってますが間違いないでしょうか？ service_worker→background.jsを編集した場合。hot-reload.jsが働いて自動で更新されます default_popup→hot-reload.htmlを編集した場合。hot-reload.jsが働いて自動で更新されます contents_scripts→自作して更新したい.jsを編集した場合→default_popupのhot-reload.htmlが　　　　　　　　　最前面に出てきて、自作して更新したい.jsは再起動も更新もされない状況です。テストのため、console.log(”test”)みたいなjsしか、自作して更新したい.jsには書いていません。問題がfocusにあるとおもい記載しミスリードになったかもしれません。

t-n

2022/10/02 15:28

すみません、書き方が悪かったです。 >default_popup→hot-reload.html これは不要です。 windows.createのtype: popup ≠ default_popupです。

kondo-modoru

2022/10/02 16:05 編集

了解しました。以下修正してます。 manifestについて service_worker→background.js 　　　　　　　　　{indows.create...を記載。} contents_scripts→自作して更新したい.js permission→”tabs” と修正しましたが、事象変わらずです。 contents_scripts→自作して更新したい.jsを編集した場合→バックグラウンドのwindows.createで　　　　　　　　　作成したhot-reload.htmlが　　　　　　　　　最前面に出てきて、自作して更新したい.jsは再起動も更新もされない状況です。

t-n

2022/10/02 16:13

> contents_scripts ここへの転記ミスなら良いのですが正しくはcontent_scriptsかと思います。私の環境ですとcontent_scriptsの内容をconsole.log('aaa')からconsole.log('bbb')にして上書き保存すると、アクティブタブがリロードされ、コンソールにbbbが出力されます。

kondo-modoru

2022/10/08 08:18

ありがとうございました。上記内容で自身の作成したJS、matchesではなく、テスト環境で実施して確かに更新されました。別の原因があると思いますので自身で確認を進めたいと思います。