새로운 확장 프로그램 메뉴 테스트가 시작됨에 따라 확장 프로그램 준비하기

게시일: 2024년 11월 19일

Google I/O 2024에서는 확장 프로그램이 액세스할 수 있는 사이트를 사용자가 더 세부적으로 관리할 수 있도록 확장 프로그램 메뉴에 적용될 예정인 변경사항에 대한 초기 디자인을 공유했습니다. YouTube는 곧 이러한 변경사항을 테스트할 예정이며, 먼저 카나리아의 소수 사용자를 대상으로 테스트한 후 향후 더 많은 사용자에게 확대 적용할 계획입니다.

이전에 개발자와 이 변경사항에 관해 이야기할 때 확장 프로그램이 설치 시 호스트 권한을 요청하는 방식을 변경하는 것이 미치는 영향에 대한 우려가 자주 제기되었습니다. 새 메뉴는 기본 동작에 영향을 미치지 않습니다. 확장 프로그램은 설치 시점에 요청된 모든 호스트에 대한 액세스 권한을 계속 부여받습니다. 이번 변경의 목표는 사용자가 이미 사용 가능한 컨트롤을 더 쉽게 찾을 수 있도록 하는 것입니다.

이 게시물에서는 예상되는 사항과 새로운 API를 사용하여 페이지 액세스가 사용자에 의해 차단된 사례를 처리하는 방법을 간략히 설명합니다.

변경되는 사항

사용자에게 더 많은 제어 기능을 제공하기 위해 새로운 확장 프로그램 메뉴를 도입할 예정입니다. 확장 프로그램은 설치 시 요청된 모든 호스트에 대한 액세스 권한을 계속 부여받지만, 이제 사용자는 확장 프로그램별로 액세스를 더 쉽게 제어할 수 있습니다.

새 확장 프로그램 메뉴의 진행 중인 디자인
새로운 확장 프로그램 메뉴의 진행 중인 디자인

새 메뉴 (변경될 수 있는 현재 디자인으로 표시됨)는 페이지에서 실행할 수 있는 확장 프로그램을 더 명확하게 표시하고, 사용자가 원하는 경우 액세스 권한을 변경할 수 있는 기능을 제공합니다. 사용자는 특정 사이트에서 모든 확장 프로그램이 실행되지 않도록 할 수도 있습니다. 앞서 언급한 대로 사용 가능한 설정이나 기본값은 변경되지 않습니다. Google은 사용자가 이미 있는 기능을 더 쉽게 찾을 수 있도록 하는 데 중점을 두고 있습니다.

사이트 액세스 요청 추가

Google은 WebExtensions 커뮤니티 그룹의 다른 브라우저 및 개발자의 중요한 의견을 바탕으로 이러한 변경사항을 보완하는 새로운 API를 설계했습니다.

사용자가 페이지 액세스를 거부한 경우 이제 확장 프로그램에서 새 permissions.addSiteAccessRequest API를 사용하여 액세스를 요청할 수 있습니다. 확장 프로그램에서 이렇게 하면 사용자에게 툴바의 확장 프로그램 퍼즐 조각 옆에 '허용' 메시지가 표시됩니다. 현재 고려 중인 디자인은 다음과 같습니다.

example.com의 사이트 액세스 요청
example.com의 사이트 액세스 요청

사용자가 확장 프로그램 메뉴에서 '허용'을 클릭하면 확장 프로그램에 호스트에 대한 지속적인 액세스 권한이 부여됩니다. 사용자는 나중에 확장 프로그램 메뉴 또는 chrome://extensions 페이지에 액세스하여 다시 보류할 수 있습니다. 툴바에서 '1회 허용'을 클릭하면 더 빠르게 즉시 액세스 권한을 부여할 수 있습니다.

확장 프로그램은 tabId를 사용하여 permissions.addSiteAccessRequest를 호출하여 해당 탭의 권한 요청을 표시할 수 있습니다. 기능 감지를 사용하여 지금 바로 확장 프로그램에서 안전하게 사용할 수 있습니다. 새 메뉴가 없는 경우 API는 사용자에게 아무런 작업도 하지 않지만, 이를 채택하면 새 메뉴가 점진적으로 출시될 때 사용자에게 도움이 됩니다.

chrome.tabs.onUpdated.addListener(async (tabId, changes) => {
  if (typeof changes.url !== 'string') return;

  const url = new URL(changes.url);

  // If we are on the /checkout page of example.com.
  if (url.origin === 'https://example.com' && url.pathname === '/checkout') {
    const hasPermission = await chrome.permissions.contains({
      origins: ['https://example.com/*']
    });

    // We already have host permissions.
    if (hasPermission) {
      return;
    }

    // Add a site access request if the API is available.
    if (chrome.permissions.addSiteAccessRequest) {
      chrome.permissions.addSiteAccessRequest({ tabId });
    }
  }
});

이 예에서는 사용자가 /checkout 페이지에 있는 경우에만 요청을 추가합니다. chrome-extensions-samples 저장소에서 전체 코드를 확인할 수 있습니다.

확장 프로그램은 사용자에게 액세스 권한을 요청할 때를 주의해야 합니다. 사용자는 노이즈가 많은 요청을 무시할 가능성이 높으며 Chrome에서 과도한 요청을 제한할 수 있습니다. 사용자는 확장 프로그램에서 요청을 표시하는 기능을 사용 중지할 수도 있습니다. 따라서 사용자가 확장 프로그램에 참여할 가능성이 높다고 확신할 수 있는 특정 상황에서만 액세스를 요청해야 합니다.

요청은 특정 탭에 바인딩되며 사용자가 다른 출처로 이동하면 자동으로 삭제됩니다. 요청이 특정 경로에 바인딩된 경우와 같이 요청을 명시적으로 삭제하려면 상응하는 removeSiteAccessRequest 메서드를 사용하면 됩니다.

이 API는 새 확장 프로그램 메뉴와 연결되어 있으므로 새 메뉴가 사용 설정되지 않은 경우 호출이 무시됩니다. 하지만 지금 바로 API를 사용해 보고 확장 프로그램에 도입해 보시기 바랍니다. 점점 더 많은 사용자에게 새 메뉴 변경사항이 표시되면서 우수한 사용자 환경을 제공할 수 있습니다.

선택적 권한 작업에 관한 자세한 내용은 권한 문서를 참고하세요.

사용해 보기

이 API는 Chrome 133.0.6838.0 이상 (현재 Chrome Canary)에서 기본적으로 사용 설정됩니다. 새 메뉴를 사용 설정하려면 chrome://flags에서 'Extensions Menu Access Control'(확장 프로그램 메뉴 액세스 제어) 플래그를 사용 설정하세요.

이 기능은 아직 개발 중이며 계속해서 발전하고 변경될 수 있습니다. 최신 환경을 확인하려면 Chrome Canary에서 테스트하는 것이 좋습니다.

chromium-extensions 메일링 리스트에 새 디자인에 대한 의견을 남겨주시면 새 메뉴를 계속 개발하는 데 반영하겠습니다.