1년 전 2022년 5월, Google은 Chrome에 측면 패널을 추가했습니다. 이는 사용자가 탐색 중인 콘텐츠와 함께 도구를 사용할 수 있는 새로운 컴패니언 표시 경로입니다. 오늘 Chrome 114부터 확장 프로그램의 측면 패널에 콘텐츠를 표시할 수 있게 되었다는 소식을 전해드립니다.
사용자에게는 더 나은, 개발자는 더 쉽게
이미 많은 개발자가 확장 프로그램에 사이드바와 유사한 환경을 구현하는 것을 확인했으며, 이것이 플랫폼 표준으로 만들게 된 이유이기도 합니다. 새로운 Side Panel API를 사용하면 사용자가 방문하는 페이지와 함께 열리는 영구 UI를 제공할 수 있습니다. 사용자는 확장 프로그램 간의 일관된 배치와 레이아웃을 활용할 수 있습니다. 또한 호스트 권한을 요청하지 않고 UI를 표시할 수 있으면 사용자의 개인 정보 보호 측면에서도 큰 도움이 되며, 설치 시 확장 프로그램에 표시되는 경고 수가 줄어드는 추가 이점도 있습니다.
Side Panel API는 신뢰할 수 없는 페이지에 콘텐츠를 삽입할 때 발생하는 골칫거리를 없애줍니다. 또한 여러 사이트에서 호환성을 유지하고 확장 프로그램으로 인한 우발적인 중단에 관한 버그 신고를 살펴봐야 하는 요구사항을 크게 줄여줍니다.
웹 전반의 사용자를 위한 컴패니언
확장 프로그램의 일부로 새로운 측면 패널 환경을 빌드할 때는 한 가지 유의해야 할 사항이 있습니다. 웹에서 사용자가 작업을 완료하도록 어떻게 지원하고 있나요? 다음은 고려해야 할 몇 가지 질문입니다.
- 측면 패널은 사용자에게 어떻게 도움이 되나요?
- 단일 목적 정책은 측면 패널에도 적용됩니다. 측면 패널에서 나머지 확장 프로그램 및 사용자가 달성하고자 하는 것과 직접적으로 관련된 기능을 제공해야 합니다.
- 관련이 있을 때만 측면 패널이 표시되나요?
- Side Panel API를 사용하면 사용자에게 측면 패널이 표시되는 사이트를 선택할 수 있습니다. 이렇게 하면 콘텐츠가 사용자와 관련이 없거나 사용자가 탐색 중인 콘텐츠와 관련이 없을 때 광고가 표시되지 않도록 할 수 있습니다.
- 디자인이 확장 프로그램의 나머지 부분과 일관적인가?
- 측면 패널에는 확장 프로그램 및 스토어 등록정보의 로고, 색상, 아이콘, 글꼴과 일치하며 시각적으로 매력적인 디자인이 있어야 합니다. 이렇게 하면 사용자가 확장 프로그램을 사용하는 곳이라면 어디에나 일관되고 인식 가능한 환경이 제공됩니다.
- 사용자가 내 측면 패널을 어떻게 찾을 수 있나요?
- 확장 프로그램 내에서 충분한 문서나 교육을 제공하여 신규 사용자에게 측면 패널을 사용하는 방법을 알려주세요. 이렇게 하면 사용자를 유지하고 스토어 등록정보에서 부정적인 리뷰를 피하는 데 도움이 됩니다. 스토어 등록정보에서 확장 프로그램이 작동하는 방식을 보여주는 YouTube 동영상을 포함함으로써 사용자가 확장 프로그램을 설치하기 전에 정보를 제공할 수 있습니다.
또한 이러한 고려사항을 반영하기 위해 프로그램 정책과 권장사항 및 품질 가이드라인 섹션이 업데이트되었습니다. 이번 변경사항은 측면 패널이 보완 기능을 제공하여 사용자의 탐색 환경과 관련된 유용한 보조 역할을 해야 한다는 점을 강조합니다. 또한 측면 패널에 불필요한 방해 요소가 있어서는 안 된다는 것을 명확히 보여줍니다.
API 개요
확장 프로그램을 측면 패널에 표시하려면 매니페스트에서 "sidePanel" 권한을 요청하고 확장 프로그램 내의 페이지를 가리키는 "default_path"가 포함된 "side_panel" 키를 추가합니다.
manifest.json:
{
...
"side_panel": {
"default_path": "sidepanel.html"
},
"permissions": [
"sidePanel"
]
...
}
다른 확장 프로그램 페이지에서와 마찬가지로 측면 패널 페이지에서 스크립트와 호출 확장 프로그램 API를 로드할 수 있습니다. 측면 패널 아이콘은 확장 프로그램 아이콘에서 가져옵니다. 세련되게 설정할 수도 있습니다.
추가 기능
측면 패널을 작업 아이콘에 연결하면 언제든지 쉽게 열 수 있습니다.
service-worker.js:
await chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true });
측면 패널이 특정 페이지에만 표시되도록 하려면 다음과 같이 제어하여 사용자와 관련이 없는 다른 위치에 표시되지 않도록 할 수 있습니다.
service-worker.js:
chrome.tabs.onUpdated.addListener((tabId, info, tab) => {
if (!tab.url) return;
const url = new URL(tab.url);
if (url.origin === 'https://example.com') {
chrome.sidePanel.setOptions({ tabId, path: 'sidepanel.html', enabled: true });
} else {
chrome.sidePanel.setOptions({ tabId, enabled: false });
}
});
자세히 알아보기
Side Panel API 문서가 게시되어 지금 바로 읽어 볼 수 있습니다. 또한 chrome-extensions-samples 저장소에 샘플이 추가되었으며 이곳에서 API를 실제로 사용하는 방법을 확인할 수 있습니다.
앞서 말씀드린 바와 같이 Google 정책 페이지 및 권장사항도 수정하여 사용자에게 최상의 환경을 제공하는 측면 패널을 만드는 방법을 자세히 설명합니다.
새로운 기능 페이지를 방문하여 Chrome 확장 프로그램 소식을 확인할 수 있으며, Side Panel API와 관련하여 궁금한 점이 있거나 도움이 필요한 경우 Chromium 확장 프로그램 Google 그룹을 방문하세요.
사진: 바르단 Papikyan(Unsplash 제공)