1년 전, 2022년 5월 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 });
}
});
자세히 알아보기
Google에서는 Side Panel API 문서를 게시했으며, 지금 바로 읽어보실 수 있습니다. 또한 chrome-extensions-samples 저장소에 샘플도 추가했습니다. 이 저장소에서 API를 실제로 사용하는 방법을 확인할 수 있습니다.
앞서 언급한 바와 같이, 사용자에게 최상의 환경을 제공하는 측면 패널을 만드는 방법에 대한 자세한 내용을 공유하도록 정책 페이지와 권장사항도 수정되었습니다.
새로운 기능 페이지를 방문하여 Chrome 확장 프로그램의 최신 소식을 확인할 수 있으며, Side Panel API와 관련하여 궁금한 점이 있거나 도움이 필요한 경우 Chromium 확장 프로그램 Google 그룹스를 방문하시기 바랍니다.
사진: Vardan Papikyan(Unsplash 제공)