JavaScript에서 Chrome 확장 프로그램 설치 감지

Chrome 확장 프로그램을 빌드할 때 해당 확장 프로그램이 다음 환경에서 설치되었는지 확인해야 할 수도 있습니다. 외부 JavaScript 스크립트. 이는 확장 프로그램의 존재 여부에 따라 웹 콘텐츠를 맞춤설정하는 데 도움이 됩니다.

Chrome 문서에 따르면 웹사이트에서 확장 프로그램으로 메시지를 전달하여 이를 달성할 수 있습니다.

코드 구현

확장 프로그램의 background.js(또는 콘텐츠가 아닌 기타 스크립트) 파일에 메시지를 추가하세요. 리스너:

chrome.runtime.onMessageExternal.addListener(
  function(request, sender, sendResponse) {
    if (request) {
      if (request.message) {
        if (request.message == "version") {
          sendResponse({version: 1.0});
        }
      }
    }
    return true;
  }
);

이 리스너는 웹사이트에서 메시지를 수신합니다.

웹사이트 스크립트에서 확장 프로그램의 ID로 메시지를 보냅니다.

var hasExtension = false;

chrome.runtime.sendMessage(extensionId, { message: "version" },
  function (reply) {
    if (reply) {
      if (reply.version) {
        if (reply.version >= requiredVersion) {
          hasExtension = true;
        }
      }
    } else {
      hasExtension = false;
    }
  }
);

hasExtension 변수를 확인하여 확장 프로그램이 설치되어 있는지 확인하세요.

매니페스트 구성

manifest.json에 항목을 추가해야 합니다. 파일, 확장 프로그램으로 메시지를 보낼 수 있는 도메인 지정:

"externally_connectable": {
  "matches": ["http://mylocalhostextensiontest/*", "http://*:*/*"]
},

비동기적 특성 및 오류 처리

메시지 전달 메커니즘은 비동기식이므로 코드에서 이를 처리해야 할 수도 있습니다.

또한 확장 프로그램이 설치되지 않거나 비활성화된 경우 chrome.runtime.sendMessage에서 예외가 발생합니다. 이러한 경우 메시지를 보낸 후 chrome.runtime.lastError를 확인하세요.

if (chrome.runtime.lastError) {
  // Handle the error here...
}