새로운 Side Panel API를 사용하여 우수한 사용자 환경 설계

1년 전, 2022년 5월 Chrome에 측면 패널을 추가했습니다. 이는 사용자가 탐색 중인 콘텐츠와 함께 도구를 사용할 수 있도록 하는 새로운 컴패니언 노출 영역입니다. 오늘 Chrome 114부터 확장 프로그램에서 측면 패널에 콘텐츠를 표시할 수 있음을 알려드립니다.

<ph type="x-smartling-placeholder">
</ph> 선택한 단어의 정의를 보여주는 사전 확장 프로그램입니다. <ph type="x-smartling-placeholder">
</ph> 선택한 단어의 정의를 보여주는 사전 확장 프로그램입니다. chrome-extensions-samples 저장소에서 코드를 확인하세요.

사용자에게는 더 편리하고, 개발자에게는 더 편리한 방법

이미 많은 개발자가 확장 프로그램에 사이드바와 같은 환경을 구현하는 것을 보았습니다. Google이 플랫폼의 표준이 된 것을 기쁘게 생각합니다. 새로운 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 제공)