拡張機能のポップアップが拡大されてしまう
-
概要
自作の拡張機能で、ポップアップ内部が拡大されてしまう問題に悩んでいます。
Vivaldiで次の設定を行うと問題が発生します。
- 設定>ウェブページ>ウェブページの既定の拡大率 を100%でない値、例えば125%などにする。
- 「タブ単位でズーム率を維持する」のチェックを外す。
この状態で自作の拡張機能をインストールして拡張機能のポップアップを開くと、ポップアップ枠内のコンテンツが125%ほど拡大されてしまいます。
枠自体は拡大されず、スクロールバーも出ず、枠の内部だけが変に拡大されて全体が見えない状態になります。
詳細
詳しく調べたところ、ポップアップ内部(<webview>内部)のコンテンツでは window.devicePixelRatio が 1.25 という拡大率と一致する値になっていました。
不思議なことに、この拡大が発生する拡張機能と発生しない拡張機能があります。
例えば「Google翻訳」「Wappalyzer」といった拡張機能では拡大されません。
その時、window.devicePixelRatio は 1 です。
自作の拡張機能では 1.25 になります。何が違うのか?調べた範囲では、manifest.json の key に依存して発生する・しないが変わってしまうように見えます。
次の2つの key のいずれかをあらかじめ manifest.json に書いておくと拡大されません。
▼Google翻訳のkey
"key": "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCfHy1M+jghaHyaVAILzx/c/Dy+RXtcaP9/5pC7EY8JlNEI/G4DIIng9IzlrH8UWStpMWMyGUsdyusn2PkYFrqfVzhc2azVF3PX9D0KHG3FLN3mNoz1YTBHvO5QSXJf292qW0tTYuoGqeTfXtF9odLdg20Xd0YrLmtS4TQkpSYGDwIDAQAB",
▼Wappalyzerのkey
"key": "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDTx6NfXtZyfrF1kTv+h0o1P0yovMsOKjocLmo+8eCQmrGS4FayUspVq/UtL0zbKnK3xXW1kfGVkOAy5TfZ6fUMoHWF7NyXEsvD+jQ6HLDOkHq/VDcN6i5hJhmYORwdFNhBAmYZY0ORd65AR2wHlxJoCRuyz25Ys/rxMaQad/zHHwIDAQAB",
一方、keyを書かない、または自作の拡張機能のkeyを書いた場合は拡大されてしまいます。
"key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAqzyYWBLJRKUB68QJP7s6/qakVMtN8XFtwzeYW2BCTqESH5VbKtEmxSItazxMJ+/zzHB6HO0xiqcXe/zYNXmPYZ87JBChC/SaykeWwFFBibO7w5j4k24Nl37idI/gni9ZSGjciUP+R656DcqV93oczRtDnDaULZLCm6eKU8gZn8m+a+nHjr+BWamzesH8azh2snouiRU9IH95bo4HGwafsSkeKekAgalHpc3rEG7le6npTx9mdAKncItHVE5QQ7AKoKofaMNb7pVqfOcgR9IaItLtqlaPynamh2B8ZMyzK2zXsBfZtWDWCFD03ZofKbeUns/hIaKAhc8K155ksizIywIDAQAB",
最小限のコード
この問題が発生する最小限の拡張機能のソースコードを次に掲載します。
(1) manifest.json
{ "action": { "default_popup": "popup.html" }, "key": "{{上記いずれかのkey文字列、またはkeyを書かない}}", "manifest_version": 3, "name": "test", "version": "0.0.1" }
(2) popup.html
window.devicePixelRatio = <script src="popup.js"></script>
(3) popup.js
document.write(window.devicePixelRatio)
上記3ファイルを適当な一時フォルダに置き、「パッケージ化されていない拡張機能を読み込む」からインストールすることで、問題(devicePixelRatioが変わってしまう現象)を確認できます。
まとめ・質問
なぜ manifest.json の key によってVivaldiの挙動が変わってしまうのでしょうか?
特定の拡張機能の key が特別扱いされていたりするのでしょうか?manifest.json の key は自分で制御できるものではなく、Chromeウェブストアに公開した時に自動的に生成される識別情報(公開鍵?)なのかなと思っていますが、ブラウザの挙動を変えるような制御ができたりするのでしょうか?
なにかご存知の方がいらっしゃいましたら情報いただけると助かります。
よろしくお願いいたします。
-
@ztms
こんにちは!解決策ではありませんが…
「タブ単位でズーム率を維持する」 = offの状態はChromeやEdgeなど他のChromiumブラウザと同じ状態です。
Chrome, Edgeの設定からデフォルト拡大率を変更すると@ztms さんが仰る現象が再現します。ですのでVivaldiではなくChromium側の仕様に依存しているように思います。
-
こんにちは~明らかに vivaldi の仕様によるものと思います。
ztmsさんの拡張機能が vivaldi に於いてのみ「タブ単位でズーム率を維持する」 = offの状態で上記の現象が現れます。Chrome・Edge・Centbrowser・sleipnir等、他のChromium系ブラウザでは、既定の倍率を大きくすると拡張機能のポップアップもある程度まで大きくなりますが、ポップアップウィンドごと大きくなるので利用はできますが、vivaldi ではポップアップウィンドウのサイズはそのままで、内容だけが拡大するので既定の倍率を上げると、内容の一部しか表示されなくなり、利用できなくなります。
別に「zoom」などの拡張機能を入れて vivaldi のズームを切り離せば解消されますが、重たくなるので、できるだけ拡張機能を使わずに済ませたいものですね。 -
chromium系ブラウザはどれも、拡張機能のポップアップがページの倍率の影響を受けて、拡大縮小される拡張機能がいくつかあります。機能は使えますが、ブラウジングしてて何となく気になります。
-
@taiyou1638 @ztms
こんにちは!
あ、ほんとですね…そしてこれ既に類似のバグレポート上がっていましたのでプッシュしてみますね。
-
@ppgm @taiyou1638
こんにちは!
コメントありがとうございました!なるほどChromeなどの「既定の拡大率」をちゃんと確認していませんでした。
既定の拡大率を設定するとたしかにポップアップが拡大されました。ただポップアップ枠もちゃんと拡大されるのでこれならまあ問題はなさそうで・・
Vivaldiはなぜか「ポップアップ枠は拡大されないのに内部は拡大されてしまう」のですね。整理すると、次の2点はVivaldiの挙動に問題があるのでは?というところでしょうか。
①ポップアップ枠は拡大されず内部だけ拡大されてしまう
②manifest.jsonのkeyで拡大される/されないが変わってしまう①だけでも解消すれば、違和感はかなり緩和されそうではあります。
また類似のバグレポートもあるとのことで、探してみたいと思います。
ありがとうございました!
-
-
@ztms
原因はわかりませんが一応解決したので報告します。manifest.json
にbackgroundスクリプトを読み込ませることでChromeなどと同様にポップアップの枠はサイズが変わらず中身だけ小さくなるようになりました。manifest.json
{ // backgroundスクリプトを追加 "background": { "service_worker": "background_scripts/background.js", "type": "module" }, "action": { "default_popup": "pages/popup.html" }, "manifest_version": 3, "name": "test", "version": "0.0.1" }
background.js
の中身は空で良いのでファイルを配置してください。読み込みのタイミングのせいなのか、設定を変えた直後はバグが再現したりするので何度かポップアップ出してみてください。
もしくは一度当該拡張機能を削除してもう一度入れてみると確実です。 -
@ppgm
ありがとうございます!
教えていただいたリンク、私は見つけられませんでしたが確かに、①のことを言っているように見えます。
社内に報告してもらったようですが、その後はまだ進展はないという感じでしょうか。また、回避方法についてもありがとうございます!
たしかに、backgroundスクリプトを追加して3回くらいポップアップを出し消ししてみたところ、
ポップアップは変に拡大されず、正常に(拡大してない時と同等に)表示されました!なぜbackgroundスクリプトが拡大率に影響するのか・・謎すぎますがこんなこともあるんですね。。
そして一度この状態になったら、元に(問題のあった状態に)戻そうとしてもなかなか戻らないこともわかりました。
Vivaldi>設定>外観>ユーザーインターフェイスの拡大率 を変えたところ元に戻すことができたようです。
うーむ・・なにがなんだかわからない感じではありますが、
ひとまず回避策が見つかって助かりました!空のbackground.jsを入れるだけならChromeなど他のブラウザにもきっと影響はないだろうし、、
Vivaldi用の暫定回避としてこの対応を入れて自作の拡張機能をアップデートすることを検討したいと思います。
ありがとうございました! -
社内に報告してもらったようですが、その後はまだ進展はないという感じでしょうか。
そうですね。現在バグ再現確認済みとのことでまだ着手には至っていません…!
-
なるほど、ありがとうございました。
そのうち治ることを期待しつつ、ひとまず回避策を使っておきたいと思います! -
回避策の「manifest.jsonに"background"を追記する」を開発モードで動作確認していたのですが、
Vivaldiの設定によって別の問題が発生することがわかりました。具体的には「ユーザーインターフェイスの拡大率」と「ウェブページの既定の拡大率」をおなじ値にした時、
以下は自作の拡張機能ポップアップのキャプチャですが「④枠のみ拡大」の状態になってしまいました。
当初、回避策なしの状態で発生していた症状は、- ユーザーインターフェイスの拡大率=100%
- ウェブページの既定の拡大率=125%
の時に「③内部のみ拡大」の状態になっていました。
回避策を入れることで①の状態になり回避できたように見えましたが、
拡大率の設定2つをどちらも125%にすると④になってしまう、という状況です。むしろ回避策を入れていない元々の拡張機能なら「②125%正常」になりました。
ということで、ひとまず「manifest.jsonに"background"を追記する」対応(拡張機能のアップデートで対応する)は保留とし、
回避策としては次の対応を推奨することにしたいと思います。- Vivaldiの設定で「ユーザーインターフェイスの拡大率」と「ウェブページの既定の拡大率」を同じ値に設定してください。
-
-
@ppgm
なるほど、ありがとうございます。
たしかに"background"とおなじく関係なさそうなところが拡大率に影響しているかもしれず、
もう少し確実にVivaldiの挙動を決められる何かがないか試行錯誤してみたいと思います。。
といってるうちにVivaldiのアップデートで治ってくれたらいいなーと思いつつ・・