Chrome拡張機能でデバイスピクセル比を取得する

Chrome拡張機能でデバイスピクセル比を取得する

要点
デバイスピクセル比はbackground.jsではなくcontent scriptsで取得する

JSでデバイスピクセル比を取得するためには window.devicePixelRatio を呼べばいい
MacBook ProのRetinaディスプレイでは 2
MacBook Airなどの普通の解像度のディスプレイでは 1
スクリーンショットを撮影した後にdevicePixelRatioの値で割り算することがある
SVG ScreenshotのChrome拡張機能でやっている

デバイスピクセル比が異なる2つの画面を繋いだ作業環境を考える
MacBook Proに外付けディスプレイを繋いでいるときなど
Chromeのアクティブウィンドウが存在する画面のdevicePixelRatioを知りたい

Chrome拡張機能のbackground.jsでdevicePixelRatioを得ないほうが良い
backgroundページは拡張機能がロードされたときに実行される
拡張機能がロードされたときにChromeがどちらの画面にいたかによって,devicePixelRatioの値が決まってしまう.拡張機能がロード時に画面と紐付いてしまうので以降何度評価しても同じ値が返ってくる.
background.js
Copied!
const dpr = () => {
// 敢えて毎回評価する
return window.devicePixelRatio
}
つまり
拡張機能が devicePixelRatio=1 のディスプレイ環境でロードされる
以降のどこかでChromeのアクティブウィンドウが devicePixelRatio=2 の環境に移る
そこからbackgroundの関数dprを呼び出してデバイスピクセル比を評価すると
返ってくる値は 1 となる (2ではない!!)

結論
devicePixelRatioはbackgroundではなく,content scriptsで評価する
うまく動いている様子
ウィンドウが撮影範囲から消えているときは,外付けディスプレイに移動している.そのときはdevicePixelRatio=1が確認できる.

Powered by Helpfeel