"Bounds must be at least 50% within visible screen space"해결 방법
32282 단어 ChromeJavaScriptChromiumtech
무슨 잘못이요?
Chrome 102에 추가된 창 구성과 관련된 유효성 검사 오류입니다.
이 예외는 Chrome 확장을 사용하여 창을 만들 때 화면 크기가 너무 크거나 모니터 표시 영역에서 너무 멀리 떨어져 있을 때 발생합니다.
[Extensions] Display window only when its bounds intersect the displays
Windows should only be displayed when they intersect the displays in a
meaningful manner (in this case, window should be visible at least 50%).
Otherwise, the window will be displayed in the current default.
This prevents for windows to be created or moved outside the displays,
and potentially been exploited.
다음 코드로 재현할 수 있습니다.
여기에는 ManifestV3로 기술되어 있지만, ManifestV2도 마찬가지다.
manifest.json
{
"name": "Open Google",
"version": "1.0",
"manifest_version": 3,
"permissions": [
"system.display"
],
"background": {
"service_worker": "background.js"
},
"action": {}
}
다음은 화면에 크롬을 표시하는 데 사용되는 코드입니다.모든 모니터가 대응할 수 있도록 width와 Height에 큰 값을 설정합니다.
background.js
chrome.action.onClicked.addListener(() => {
chrome.windows.create(
{
url: 'https://google.com',
type: 'popup',
width: 10000,
height: 10000,
},
)
})
이 Chrome 확장을 시작하면 이런 오류가 발생합니다.Uncaught (in promise) Error: Invalid value for bounds. Bounds must be at least 50% within visible screen space.
결론&해결책
디스플레이가 보이지 않는 위치에 놓이지 않도록 추가로 처리한 부산물이다.
다음과 같이 모니터 크기에 따라 창을 만들 수 있습니다.
background.js
chrome.action.onClicked.addListener(() => {
chrome.system.display.getInfo((display) => {
// NOTE: 現在表示しているディスプレイサイズを取得
const { width, height } = display[0].bounds
chrome.windows.create(
{
url: 'https://google.com',
type: 'popup',
width,
height,
},
)
})
})
왜 상술한 방법이 좋을까
잘못된 문장에서 어떻게 위의 방법을 써야 할지 모르기 때문에 잘못된 발생 조건을 읽어 보세요.
잘못된 문장
우선, 잘못된 문장은 여기서 정의한다.
const char kInvalidWindowBoundsError[] =
"Invalid value for bounds. Bounds must be at least 50% within visible "
"screen space.";
오류 발생 조건
상술한
kInvalidWindowBoundsError
호칭의 조건은 여기다.set_window_bounds는 진짜라고 불리며 W i d ow Bounds Intersect Displays(window bounds)는 가짜다.
if (set_window_bounds && !WindowBoundsIntersectDisplays(window_bounds))
return RespondNow(Error(tabs_constants::kInvalidWindowBoundsError));
set_window_이른바 bounds
코드를 읽고 창을 만들 때left,top,width,height를 설정하면 진짜가 됩니다.
bool set_window_bounds = false;
if (params->update_info.left) {
window_bounds.set_x(*params->update_info.left);
set_window_bounds = true;
}
if (params->update_info.top) {
window_bounds.set_y(*params->update_info.top);
set_window_bounds = true;
}
if (params->update_info.width) {
window_bounds.set_width(*params->update_info.width);
set_window_bounds = true;
}
if (params->update_info.height) {
window_bounds.set_height(*params->update_info.height);
set_window_bounds = true;
}
window_이른바 bounds
Wi n d owBounds IntersectDisplays의 매개변수로 전달되는 창바운스 보러 갈게요.
이것은 창(이후 창으로 약칭)을 만들거나 다시 설정하는 Bounds로 이해할 수 있습니다.
Bounds가 정확한 정의를 찾지 못해서 뭔지 모르겠어요.
코드를 보면 Height,width,left,top 같은 값이 있고, Bounds가 결정하면 창의 면적이 이런 느낌을 받게 됩니다(창의 경계선으로 미리 이해하면 됩니까?).
gfx::Rect window_bounds = browser->window()->IsMinimized()
? browser->window()->GetRestoredBounds()
: browser->window()->GetBounds();
이른바 W i n d ow Bounds Intersect Displays
이렇게 정의했습니다.
intersect_area를 합친 후 창 면적과 비교하고 진짜와 가짜를 되돌려줍니다.
bool WindowBoundsIntersectDisplays(const gfx::Rect& bounds) {
int intersect_area = 0;
for (const auto& display : display::Screen::GetScreen()->GetAllDisplays()) {
gfx::Rect display_bounds = display.bounds();
display_bounds.Intersect(bounds);
intersect_area += display_bounds.size().GetArea();
}
return intersect_area >= (bounds.size().GetArea() / 2);
}
다시 자세히 볼게요.우선 여기에서 모든 모니터에 대해 bounds를 얻었습니다.
for (const auto& display : display::Screen::GetScreen()->GetAllDisplays()) {
gfx::Rect display_bounds = display.bounds();
...
이후 창의 Intersect를 가져와 치수를 합산합니다. ...
display_bounds.Intersect(bounds);
intersect_area += display_bounds.size().GetArea();
}
Intersect 방법은 여기서 정의됩니다.코드를 보니 모니터와 창이 겹치는 곳을 얻은 것 같다.
분위기지만 그런 인상입니다.
창 크기 > 창 크기, 창 크기,intersect -area 일치
<창 크기를 표시할 때 치수 및 intersect>area 일치
그리고 디스플레이와 창이 겹치지 않을 때intersectarea가 0이 됩니다.
void Rect::Intersect(const Rect& rect) {
if (IsEmpty() || rect.IsEmpty()) {
SetRect(0, 0, 0, 0); // Throws away empty position.
return;
}
int left = std::max(x(), rect.x());
int top = std::max(y(), rect.y());
int new_right = std::min(right(), rect.right());
int new_bottom = std::min(bottom(), rect.bottom());
if (left >= new_right || top >= new_bottom) {
SetRect(0, 0, 0, 0); // Throws away empty position.
return;
}
SetByBounds(left, top, new_right, new_bottom);
}
intersect_area >= (bounds.size().GetArea() / 2)
이것은 모니터와 창이 겹치는 영역의 병합과 창 크기를 비교하는 곳이다.
여기, 2를 나눈 곳은
Bounds must be at least 50% within visible screen space
의 50%에 해당한다.좀 복잡해서 코드를 읽을 수 없지만 창의 크기는 정확하게 사용할 수 있는 창의 크기를 가리키는 것 같습니다.
Mac의 경우 "Mac 정보"모니터를 통해 디스플레이 크기를 얻을 수 있습니다.
아래의 위치는width=>1920px,height=>1080px입니다.
이 가격과 바운드.size().GetArea()의 치수가 올바르면 아래도 이동해야 합니다.
그러나 발생했다
Bounds must be at least 50%...
.background.js
...
const { width, height } = display[0].bounds
chrome.windows.create(
{
url: 'https://google.com',
type: 'popup',
width,
height: height * 2,
},
)
...
정확히 창문입니다.screen이 얻을 수 있는 avil Width, avil Height의 값입니다.(참고로 Chrome Extension ManifestV3은 서비스 워커에서 실행되며 window 함수에 접근할 수 없고 시작할 때 이 값을 설정할 수 없습니다.)
내 환경에서
height: 1055 * 2
는 일하는 것이고height: 1055 * 2 + 1
는 잘못된 것이다.background.js
chrome.windows.create(
{
url: 'https://google.com',
type: 'popup',
width,
height: 1055 * 2,
},
)
총결산
Chrome 102에서 창 구성에 대한 프롬프트가 추가되어 모니터와 창의 간격이 크거나 창이 너무 크면 오류가 표시됩니다.
크롬 코드를 보면 어떤 조건에서 발생했는지, 왜 추가됐는지 알 수 있고, 어려우면 크롬 코드를 읽어보세요!
참고 자료
이상
Reference
이 문제에 관하여("Bounds must be at least 50% within visible screen space"해결 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/pilefort/articles/c5bd0c474c66e4텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)