質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

WebSocket

WebSocketとは双方向・全二重コミュニケーションのためのAPIでありプロトコルのことを指します。WebSocketはHTML5に密接に結びついており、多くのウェブブラウザの最新版に導入されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Chrome extension

Chrome拡張機能

Q&A

解決済

1回答

1381閲覧

Manifest v3 移行について

kondo-modoru

総合スコア18

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

WebSocket

WebSocketとは双方向・全二重コミュニケーションのためのAPIでありプロトコルのことを指します。WebSocketはHTML5に密接に結びついており、多くのウェブブラウザの最新版に導入されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Chrome extension

Chrome拡張機能

0グッド

0クリップ

投稿2022/09/24 07:15

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になっても同じ仕様で利用したいと考えております。
以上よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

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

追記

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

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

backgrond.js

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

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

総合スコア136

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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 編集

ご回答ありがとうございます。 1点確認があります。 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ではなく、テスト環境で実施して確かに更新されました。 別の原因があると思いますので自身で確認を進めたいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問