Chrome 확장 프로그램으로 PWA 및 IWA 연결

Demián Renzulli

웹 개발자는 프로그레시브 웹 앱 (PWA)과 같이 신뢰도가 가장 낮은 보안 모델을 사용하여 애플리케이션을 설계하는 것이 좋습니다. 이 접근 방식을 사용하면 도달범위를 극대화하고 관리해야 하는 보안 오버헤드를 최소화하며 개발자와 사용자 모두에게 최대한의 유연성을 제공할 수 있습니다. 하지만 웹은 기본적으로 안전하도록 설계되어 있으므로 보수적인 보안 모델은 운영체제와 특정 강력한 기기 API에 대한 액세스를 자연스럽게 제한합니다.

분리형 웹 앱 (IWA)은 웹 플랫폼을 기반으로 빌드된 격리되고 번들로 제공되며 버전이 지정되고 서명된 신뢰도가 높은 애플리케이션 모델을 제공하여 이 문제를 해결합니다. 하지만 IWA로 전환하기 전에 PWA를 Chrome 확장 프로그램에 연결하는 등 점진적인 단계를 고려해 보는 것이 좋습니다. 관리 ChromeOS 환경(예: 관리 사용자 세션, 관리 게스트 세션 (MGS) 또는 키오스크 모드)에서 사용할 수 있는 이 기술을 사용하면 앱에서 보안 메시지 전달을 통해 하위 수준 확장 프로그램 API를 사용할 수 있습니다. 다음 다이어그램은 표준 웹 애플리케이션으로 시작하여 설치 가능한 PWA가 되는 기능을 추가하고 마지막으로 PWA 및 Chrome 확장 프로그램 경로를 탐색하여 추가 API를 잠금 해제하는 점진적인 접근 방식을 보여줍니다.

점진적 개선 경로 개발자는 설치 가능한 PWA를 컴패니언 Chrome 확장 프로그램과 페어링하여 웹의 보안 환경과 하위 수준 OS 및 기기 기능 간의 격차를 해소할 수 있습니다.

애플리케이션에 제어된 프레임 또는 직접 소켓 API와 같이 Chrome 확장 프로그램 API를 사용해도 계속 사용할 수 없는 고급 기능이 필요한 경우 분리형 웹 앱 (IWA)으로 이전하는 것이 가장 좋은 방법입니다. 하지만 IWA는 강력한 새로운 웹 기능을 잠금 해제하지만 키오스크 모드에서 ChromeOS 기기를 재부팅하는 chrome.runtime.restart()와 같이 Chrome 확장 프로그램에만 있는 특정 기기 수준 API가 여전히 필요할 수 있습니다. 다행히 PWA와 동일한 접근 방식을 사용하여 IWA를 Chrome 확장 프로그램에 연결할 수 있습니다. 이 기술은 다음 단계에서 설명합니다.

단계별 구현

컴패니언 확장 프로그램 배포

확장 프로그램은 Chrome 관리 콘솔을 통해 배포됩니다. 대상 환경에 따라 해당 섹션에서 이를 구성합니다 (예: 키오스크 모드의 경우 기기 > Chrome > 앱 및 확장 프로그램 > 키오스크 로 이동하거나 사용자 및 브라우저 또는 관리 게스트 세션 의 해당 탭으로 이동). 공개적으로 액세스할 수 있는 링크에서 확장 프로그램을 자체 호스팅하거나 Chrome 웹 스토어에서 직접 호스팅할 수 있습니다. 확장 프로그램 관리에 관한 자세한 내용은 공식 문서를 참고하세요.

메시지 전달 구현

확장 프로그램 설정

웹 앱의 메시지를 수신하고 응답하려면 클라이언트 (웹 앱)에서 도착하는 메시지를 수신 대기한 후 해당 요청을 상응하는 API 호출로 프록시하는 백그라운드 스크립트를 노출합니다. 다음 예에서는 웹 앱이 methodName이 callRestart인 커스텀 메시지 객체를 전송할 때 ChromeOS 기기를 다시 시작하도록 요청이 프록시됩니다.

Background.js

// message handler - extension code
chrome.runtime.onMessageExternal.addListener(function (request, sender, sendResponse) {
  if (request.methodName == 'callRestart') {
    chrome.runtime.restart();
  }
});

확장 프로그램의 매니페스트는 확장 프로그램에서 메서드를 호출할 수 있는 사이트와 확장 프로그램을 지정하는 externally_connectable⁠⁠ 키를 사용하여 확장 프로그램에 대한 외부 함수 호출을 허용하도록 구성할 수 있습니다. Chrome 확장 프로그램 및 매니페스트 v3에 관한 자세한 내용은 공식 문서⁠⁠를 참고하세요.

프로그레시브 웹 앱 (PWA)에서 연결하는 경우 앱이 호스팅되는 표준 HTTPS 도메인을 matches 배열에 나열합니다. 다음은 키오스크 모드에서 실행되는 PWA에 맞게 구성된 매니페스트의 예입니다.

Manifest.json

{
  "manifest_version": 3,
  "name": "Restart your kiosk app",
  "version": "1.0",
  "description": "This restarts your ChromeOS device.",
  "background": {
    "service_worker": "background.js"
  },
  "externally_connectable": {
    "accepts_tls_channel_id": false,
    "matches": [
      "*://developer.chrome.com/*"
    ]
  }
}

분리형 웹 앱 (IWA)에서 연결하는 경우 메커니즘은 정확히 동일하지만 URL 스키마가 변경됩니다. IWA는 안전하게 패키징되고 표준 웹 서버에서 실행되지 않으므로 자체 프로토콜을 사용합니다. isolated-app:// 스키마를 사용하여 IWA의 출처를 추가해야 합니다.

Manifest.json

{
  "manifest_version": 3,
  "name": "IWA Companion Extension",
  "version": "1.1",
  "description": "Companion extension for the IWA",
  "background": {
    "service_worker": "/scripts/background.js"
  },
  "externally_connectable": {
    "matches": [
      "isolated-app://*/*"
    ]
  }
}

이는 PWA 또는 IWA의 메시지를 수신 대기하기 위해 확장 프로그램에 필요한 최소한의 코드입니다.

PWA 및 IWA 설정

웹 앱에서 확장 프로그램을 호출하려면 정적 확장 프로그램 ID를 알아야 합니다. 이 ID는 Chrome 확장 프로그램을 설치할 때 표시되는 chrome://extensions 페이지 또는 확장 프로그램이 업로드된 후 Chrome 웹 스토어에서 찾을 수 있습니다. 이렇게 하면 웹 앱에서 통신할 정확한 확장 프로그램을 지정할 수 있습니다. 그런 다음 chrome.runtime.sendMessage⁠⁠ 를 호출하고 확장 프로그램에 전송할 메시지와 함께 확장 프로그램 ID를 전달합니다.

const STATIC_EXTENSION_ID = 'abcdefghijklmnopqrstuvwxyz';
// found from chrome extensions page of chrome web store.
const callExtensionAPI = function (method) {
  chrome.runtime.sendMessage(STATIC_EXTENSION_ID, {
    methodName: method,
  });
};
callExtensionAPI('callRestart');

메시지 전달을 위해 웹 앱을 확장 프로그램에 연결하는 방법에 관한 자세한 내용은 확장 프로그램 문서⁠⁠를 참고하세요.

데모

이 구현을 실제로 보려면 IWA Kitchen Sink 저장소를 살펴보세요. 이 프로젝트는 직접 소켓 및 제어된 프레임과 같은 신뢰도가 높은 API의 데모를 제공하는 다양한 IWA 기능을 위한 포괄적인 플레이그라운드 역할을 합니다. 또한 IWA-Chrome 확장 프로그램 연결의 완전한 작업 예시를 제공합니다. 저장소에는 샘플 컴패니언 확장 프로그램과 보안 메시지 전달을 사용하여 확장 프로그램 전용 메서드를 트리거하는 방법을 보여주는 전용 웹 인터페이스가 포함되어 있습니다. 예를 들어 분리형 웹 앱에서 직접 chrome.identity.getProfileUserInfo() API를 사용하여 사용자 프로필 정보를 가져오는 것을 테스트할 수 있습니다.

결론

웹 애플리케이션을 Chrome 확장 프로그램에 연결하면 기본 기기 기능을 잠금 해제하는 안전하고 점진적인 경로를 제공할 수 있습니다. 앱의 아키텍처를 설계할 때 다음 주요 사항을 염두에 두세요.

웹으로 시작: 도달범위를 극대화하고 보안 오버헤드를 최소화하려면 PWA를 기본값으로 설정합니다.
확장 프로그램으로 격차 해소: 키오스크 모드에서 기기 재부팅과 같이 깊이 통합된 OS 수준 기능의 경우 컴패니언 Chrome 확장 프로그램을 배포하고 보안 메시지 전달을 사용하여 애플리케이션에 연결합니다.
필요한 경우에만 IWA로 업그레이드: 직접 소켓, 제어된 프레임 또는 기타 IWA 전용 API와 같이 신뢰도가 높은 API가 필요한 경우 분리형 웹 앱을 사용합니다.