Chrome拡張機能でデバイスピクセル比を取得する
要点
JSでデバイスピクセル比を取得するためには window.devicePixelRatio を呼べばいい
例
MacBook Airなどの普通の解像度のディスプレイでは1
スクリーンショットを撮影した後にdevicePixelRatioの値で割り算することがある
デバイスピクセル比が異なる2つの画面を繋いだ作業環境を考える
MacBook Proに外付けディスプレイを繋いでいるときなど
Chromeのアクティブウィンドウが存在する画面のdevicePixelRatioを知りたい
Chrome拡張機能のbackground.jsでdevicePixelRatioを得ないほうが良い
backgroundページは拡張機能がロードされたときに実行される
拡張機能がロードされたときにChromeがどちらの画面にいたかによって,devicePixelRatioの値が決まってしまう.拡張機能がロード時に画面と紐付いてしまうので以降何度評価しても同じ値が返ってくる.
code:background.js
const dpr = () => {
// 敢えて毎回評価する
return window.devicePixelRatio
}
つまり
拡張機能がdevicePixelRatio=1のディスプレイ環境でロードされる
以降のどこかでChromeのアクティブウィンドウがdevicePixelRatio=2の環境に移る
そこからbackgroundの関数dprを呼び出してデバイスピクセル比を評価すると
返ってくる値は 1 となる (2ではない!!)
結論
devicePixelRatioはbackgroundではなく,content scriptsで評価する
うまく動いている様子
ウィンドウが撮影範囲から消えているときは,外付けディスプレイに移動している.そのときはdevicePixelRatio=1が確認できる.
https://gyazo.com/15efc590bad646928b7c84c3156a722f