백그라운드 스크립트에서 콘텐츠 스크립트로 메시지를 보낸 다음 삽입된 스크립트로 보내기

문제:
백그라운드 페이지에서 콘텐츠 스크립트로 메시지를 보낸 다음 삽입된 스크립트로 메시지를 보내려고 시도했지만 프로세스가 의도한 대로 작동하지 못했습니다. 콘텐츠 스크립트는 백그라운드 스크립트에서 메시지를 받을 수 없습니다.

해결책:
이 문제는 콘텐츠 스크립트가 삽입되는 방식에서 발생합니다. 확장 프로그램이 로드되면 콘텐츠 스크립트가 기존 탭에 자동으로 삽입되지 않습니다. 삽입은 확장이 로드된 후 새 탭이 생성되거나 기존 탭을 탐색할 때만 발생합니다.

해결책 1: 조건부 스크립트 삽입
배경과 콘텐츠 간의 통신을 보장하려면 스크립트의 경우 조건부 스크립트 삽입을 사용할 수 있습니다. 백그라운드 스크립트는 탭이 메시지를 수신할 준비가 되었는지 확인하고 아직 삽입되지 않은 경우에만 콘텐츠 스크립트를 삽입할 수 있습니다.

코드:

// Background script
function ensureSendMessage(tabId, message, callback) {
  chrome.tabs.sendMessage(tabId, { ping: true }, function (response) {
    if (response && response.pong) { // Content script ready
      chrome.tabs.sendMessage(tabId, message, callback);
    } else { // No listener on the other end
      chrome.tabs.executeScript(tabId, { file: "content_script.js" }, function () {
        if (chrome.runtime.lastError) {
          console.error(chrome.runtime.lastError);
          throw Error("Unable to inject script into tab "   tabId);
        }
        // OK, now it's injected and ready
        chrome.tabs.sendMessage(tabId, message, callback);
      });
    }
  });
}

콘텐츠 스크립트:

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  if (request.ping) {
    sendResponse({ pong: true });
    return;
  }
  // Content script action
});

해결책 2: 이중 실행 방지
또 다른 해결 방법은 콘텐츠 스크립트를 탭에 삽입하되 두 번 이상 실행되지 않도록 조치를 구현하는 것입니다.

코드:

// Background script
function ensureSendMessage(tabId, message, callback) {
  chrome.tabs.executeScript(tabId, { file: "content_script.js" }, function () {
    if (chrome.runtime.lastError) {
      console.error(chrome.runtime.lastError);
      throw Error("Unable to inject script into tab "   tabId);
    }
    // OK, now it's injected and ready
    chrome.tabs.sendMessage(tabId, message, callback);
  });
}

콘텐츠 스크립트:

var injected;

if (!injected) {
  injected = true;
  // Your toplevel code
}

해결책 3: 무분별한 스크립트 삽입
마지막으로 확장 프로그램 초기화 시 모든 탭에 콘텐츠 스크립트를 삽입하도록 선택할 수 있습니다. 이는 스크립트가 여러 번 실행되거나 페이지가 로드된 후에 스크립트 자체를 방해하지 않는 경우에만 권장됩니다.

코드:

chrome.tabs.query({}, function (tabs) {
  for (var i in tabs) {
    // Filter by URL if needed
    chrome.tabs.executeScript(tabs[i].id, { file: "content_script.js" }, function () {
      // Now you can use normal messaging
    });
  }
});

이러한 솔루션 중 하나라도 구현되면 메시지는 백그라운드 스크립트에서 콘텐츠 스크립트로, 그리고 결국 삽입된 스크립트로 성공적으로 전달될 수 있습니다.