>웹 프론트엔드 >JS 튜토리얼 >백그라운드에서 삽입된 백그라운드까지 Chrome 확장 프로그램의 스크립트 간 통신 문제를 해결하는 방법은 무엇입니까?

백그라운드에서 삽입된 백그라운드까지 Chrome 확장 프로그램의 스크립트 간 통신 문제를 해결하는 방법은 무엇입니까?

DDD
DDD원래의
2024-10-18 11:35:02738검색

How to Resolve Inter-Script Communication Issue in Chrome Extensions from Background to Injected Background?

Messaging Across Multiple Scripts in Chrome Extensions: From Background to Injected

Background

In the context of Chrome extensions, sending messages between scripts running in different environments can be challenging. Here's a detailed analysis and solution to the specific issue you're facing when attempting to send messages from the background script to a content script and subsequently to an injected script.

Problem:

Your code fails to send messages because of the way content scripts are injected into targets. Initially, content scripts are not present in existing tabs unless a page specifically triggers their injection. This means that when your background script tries to send a message to a tab upon extension load, there's no listener to receive it.

Solutions:

Solution 1: Message on Demand

Check if the content script is ready before sending messages:

// Background
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
      // Inject the script and then send the message
    }
  });
}
// Content
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if(request.ping) { sendResponse({pong: true}); return; }
  // Process messages
});

Solution 2: Inject and Execute Once

Inject the content script but ensure it only executes once:

// Background
function injectAndSend(tabId, message, callback){
  // Inject script and send message
}
// Content
var executed; // Flag to prevent multiple executions

if(!executed){
  executed = true;
  // Process messages
}

Solution 3: Inject Indiscriminately

Inject content scripts without relying on their presence:

// Background
chrome.tabs.query({}, function(tabs) {
  for(var i in tabs) {
    // Inject scripts and send messages
  }
});

Solution 4: Use Browser Action

Attach your messaging logic to a browser action for specific user interactions:

chrome.browserAction.onClicked.addListener(function() {
  // Process messages
});

Orphaned Content Scripts

An implication to consider is the phenomenon of orphaned content scripts. When an extension reloads, content scripts may not be properly cleaned up, leaving behind event listeners that can interfere with newly injected scripts.

Solution:

Implement a heartbeat mechanism to check the connection between the content script and the background script. If the heartbeat fails, the content script should deregister listeners and defer any actions.

Conclusion:

By understanding the behavior of content scripts in Chrome extensions and employing the appropriate messaging techniques, you can effectively send messages from the background script to content scripts and injected scripts.

위 내용은 백그라운드에서 삽입된 백그라운드까지 Chrome 확장 프로그램의 스크립트 간 통신 문제를 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.