Manifest V3의 확장 프로그램 작업

Simeon Vincent

Chrome 확장 프로그램이 출시된 이후 플랫폼에서는 개발자가 Chrome 확장 프로그램을 작업을 사용하여 최상위 Chrome UI에서 직접 기능을 구현할 수 있습니다. 작업은 아이콘 버튼으로 팝업을 열거나 확장 프로그램에서 일부 기능을 트리거할 수 있습니다. 지금까지 Chrome은 작업 유형, 브라우저 작업, 페이지 작업 Manifest V3에서는 기능을 새로운 chrome.action API에서 제공합니다.

간단한 확장 프로그램 작업 기록

chrome.action 자체는 Manifest V3에서 새로 도입되었지만, 기본적으로 제공되는 기능은 이전부터 제공되었습니다. 2010년 1월에 확장 프로그램이 처음으로 안정적이 된 시점으로 이어집니다. 최초의 안정적인 출시 당시 Chrome 확장 프로그램 플랫폼 버전에서는 두 가지 작업(브라우저)을 지원했습니다. 작업과 페이지 작업입니다.

브라우저 작업을 통해 확장 프로그램 개발자는 '기본 Chrome 툴바'에 아이콘을 표시하고 'Google 검색'이라는 (출처) 사용자에게 간단한 방법으로 모든 페이지에서 확장 프로그램 기능을 트리거할 수 있습니다. 반면에 페이지 액션은 '현재 페이지에서 취할 수 있지만 모든 페이지에 적용할 수 있는 것은 아님' (출처)

즉, 브라우저 작업은 확장 프로그램 개발자에게 브라우저의 영구 UI 노출 영역을 제공했습니다. 확장 프로그램이 현재 페이지에서 유용한 작업을 수행할 수 있는 경우에만 페이지 작업이 표시된 것을 볼 수 있습니다.

두 가지 작업 유형 모두 선택사항이었으므로 확장 프로그램 개발자는 또는 브라우저 작업 (여러 액션을 지정할 수 없음)을 지정할 수 있습니다.

약 6년 후 Chrome 49에서는 확장 프로그램을 위한 새로운 UI 패러다임을 도입했습니다. 돕기 위해 어떤 확장 프로그램을 사용하는지 알기 시작하면서 Chrome은 을 클릭합니다. 사용자가 '오버플로' 원하는 경우 확장 프로그램을 Chrome 메뉴에 추가할 수 있습니다.

각 확장 프로그램에 아이콘을 표시하기 위해 이번 업데이트에서 Chrome UI에서 확장 프로그램이 작동하는 방식을 보여줍니다. 먼저 모든 확장 프로그램이 툴바에 아이콘을 표시하기 시작했습니다. 확장 프로그램에 아이콘이 없는 경우 Chrome에서 아이콘을 자동으로 생성합니다. 둘째, 페이지 작업 브라우저 작업과 함께 툴바로 이동했고, 이를 구별하기 위한 어포던스 제공 '프로그램' 사이에 및 'hide' 있습니다.

이 변경으로 인해 페이지 액션 확장 프로그램이 예상대로 계속 작동할 수 있었지만, 시간 경과에 따른 페이지 액션의 역할 UI 디자인 변경의 영향 중 하나는 사실상 브라우저 작업에 포함됩니다. 툴바에 모든 확장 프로그램이 표시되었기 때문에 사용자들이 확장 프로그램의 툴바 아이콘을 클릭하면 확장 프로그램이 호출되고 브라우저 작업이 Chrome 확장 프로그램에서 점점 더 중요한 상호 작용이 되었습니다.

Manifest V3 변경사항

Chrome UI 및 확장 프로그램은 2016 확장 프로그램 UI 이후 몇 년 동안 계속 발전해 왔습니다. 브라우저 작업과 페이지 작업은 대부분 변경되지 않았습니다. 즉, 최소한 Manifest V3로 확장 프로그램 플랫폼을 현대화하는 방법을 계획하기 시작했습니다.

확장 프로그램 팀은 브라우저 작업과 페이지 작업이 점점 더 구별할 수 없습니다. 게다가 이러한 동작의 미묘한 차이로 인해 개발자가 어느 것을 사용할지 결정합니다. 우리는 브라우저를 통합하면 이러한 문제를 해결할 수 있다는 것을 깨달았고 페이지 작업을 하나의 '액션'으로 만듭니다.

Action API를 입력합니다. chrome.action은 chrome.browserAction와 가장 유사하지만 몇 가지 주목할 만한 차이점이 있습니다

먼저 chrome.action는 getUserSettings()라는 새 메서드를 도입합니다. 이 방법 사용자가 확장 프로그램의 작업을 있습니다.

let userSettings = await chrome.action.getUserSettings();
console.log(`Is the action pinned? ${userSettings.isOnToolbar ? 'Yes' : 'No'}.`);

'getUserSettings' 예를 들어 'isPinned'로 실행 중이지만 Chrome 작업 기록에 브라우저 UI가 확장 API와는 다릅니다. 따라서 이 API의 목표는 작업 관련 사용자 환경설정을 일반적인 인터페이스를 사용해야 합니다. 또한 다른 브라우저 공급업체가 이 생성자에서 반환한 UserSettings 객체의 브라우저별 UI 개념 메서드를 사용하여 축소하도록 요청합니다.

둘째, 확장 프로그램 작업의 아이콘 및 사용/사용 중지 상태는 선언적 콘텐츠 API 이렇게 하면 확장 프로그램이 사용자의 탐색에 반응할 수 있으므로 중요합니다. 직접 차단할 수 있습니다. 예를 들어 사용자가 example.com의 페이지를 방문할 때 확장 프로그램이 작업을 어떻게 사용 설정할 수 있는지 확인합니다.

// Manifest V3
chrome.runtime.onInstalled.addListener(() => {
  chrome.declarativeContent.onPageChanged.removeRules(undefined, () => {
    chrome.declarativeContent.onPageChanged.addRules([
      {
        conditions: [
          new chrome.declarativeContent.PageStateMatcher({
            pageUrl: {hostSuffix: '.example.com'},
          })
        ],
        actions: [new chrome.declarativeContent.ShowAction()]
      }
    ]);
  });
});

위의 코드는 확장 프로그램이 페이지 작업으로 실행하는 코드와 거의 동일합니다. 유일한 Manifest V3에서는declarativeContent.ShowAction Manifest V2의 declarativeContent.ShowPageAction

마지막으로 콘텐츠 차단기는 declarativeNetRequest API의 setExtensionActionOptions) 메서드를 사용하여 개발자가 특정 탭에서 확장 프로그램에 의해 차단된 요청입니다. 이 기능은 민감할 수 있는 탐색 메타데이터를 노출하지 않고 최종 사용자에게 정보를 제공하는 콘텐츠 차단 프로그램 확장 프로그램에 추가합니다.

마무리

Chrome 확장 프로그램 플랫폼의 현대화는 Manifest V3를 사용하게 된 주요 동기 중 하나였습니다. 여러 이는 새로운 기술로의 전환을 의미했지만 API 노출 영역을 단순화하는 것을 의미하기도 했습니다. 목표로 삼았습니다.

이 게시물이 Manifest V3 플랫폼의 이 점을 파악하는 데 도움이 되었기를 바랍니다. 받는사람 Chrome팀이 브라우저 확장 프로그램의 미래에 어떻게 접근하고 있는지 자세히 알아보려면 플랫폼 비전 및 Manifest V3 개요 페이지는 참조하세요. 또한 chromium-extensions Google 그룹스