1년 전인 2022년 5월, Chrome에 측면 패널이 추가되었습니다. 이는 사용자가 탐색 중인 콘텐츠와 함께 도구를 사용할 수 있는 새로운 도우미 표시 경로입니다. 오늘부터 Chrome 114에서 확장 프로그램이 측면 패널에 콘텐츠를 표시할 수 있다는 소식을 전해드립니다.
사용자에게는 더 좋고 개발자에게는 더 쉬움
이미 많은 개발자가 확장 프로그램에 사이드바와 유사한 환경을 구현했습니다. 이러한 이유로 사이드바를 플랫폼 표준으로 만들게 되어 기쁩니다. 이제 새로운 Side Panel API를 사용하면 사용자가 방문하는 페이지와 함께 열리는 지속적인 UI를 제공할 수 있습니다. 사용자는 확장 프로그램 간의 일관된 위치 지정 및 레이아웃을 통해 이점을 얻을 수 있습니다. 또한 호스트 권한을 요청하지 않고 UI를 표시할 수 있으므로 사용자에게 상당한 개인 정보 보호 이점이 있으며 설치 시 확장 프로그램에 표시되는 경고 수도 줄일 수 있습니다.
측면 패널 API를 사용하면 신뢰할 수 없는 페이지에 콘텐츠를 삽입할 때 발생하는 문제가 해결됩니다. 또한 여러 사이트에서 호환성을 유지하고 확장 프로그램으로 인해 발생한 의도치 않은 중단에 관한 버그 신고를 선별해야 하는 요구사항도 크게 줄어듭니다.
웹 전반에서 사용자를 지원하는 도구
확장 프로그램의 일부로 새로운 측면 패널 환경을 빌드할 때는 한 가지 사항을 염두에 두어야 합니다. 웹 전반에서 사용자가 작업을 완료하도록 어떻게 지원할 것인가입니다. 다음은 몇 가지 고려해야 할 질문입니다.
- 내 측면 패널은 사용자에게 어떤 도움을 주나요?
- 단일 용도 정책도 측면 패널에 적용됩니다. 측면 패널은 확장 프로그램의 나머지 부분 및 사용자가 달성하려는 목표와 직접 관련된 기능을 제공해야 합니다.
- 측면 패널은 관련성이 있을 때만 표시되나요?
- 측면 패널 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 });
}
});
자세히 알아보기
오늘부터 읽을 수 있는 측면 패널 API 문서가 게시되었습니다. 또한 API가 실제로 어떻게 사용될 수 있는지 확인할 수 있는 chrome-extensions-samples 저장소에 샘플이 추가되었습니다.
앞서 언급했듯이 사용자에게 최상의 환경을 제공하는 측면 패널을 구축하는 방법에 대한 자세한 내용을 공유하기 위해 정책 페이지와 권장사항도 수정되었습니다.
새로운 기능 페이지를 방문하여 Chrome 확장 프로그램 관련 소식을 확인하고, 질문이 있거나 Side Panel API에 대한 도움이 필요한 경우 Chromium 확장 프로그램 Google 그룹을 방문하세요.