chrome.tabs.executeScript()로 삽입된 콘텐츠 스크립트에 매개변수 전달

chrome.tabs.executeScript를 사용하여 콘텐츠 스크립트 파일을 삽입하는 경우 ({file: "content.js"}), 일반적인 질문이 생깁니다. 콘텐츠 스크립트 파일 내에서 JavaScript에 매개변수를 전달하는 방법은 무엇입니까?

매개변수 전달 오류

파라미터를 파일에 직접 전달할 수 없다는 점을 명확히 하는 것이 중요합니다. 대신 이 기능을 달성하기 위한 두 가지 옵션이 있습니다:

1. 파일 실행 전 매개변수 설정

Nest chrome.tabs.executeScript는 파일을 삽입하기 전에 변수를 정의하기 위해 호출합니다.

chrome.tabs.executeScript(tab.id, {
    code: 'var config = 1;'
}, function() {
    chrome.tabs.executeScript(tab.id, {file: 'content.js'});
});

복잡한 변수의 경우 JSON.stringify를 사용하여 객체를 문자열로 변환하는 것을 고려해 보세요.

var config = {somebigobject: 'complicated value'};
chrome.tabs.executeScript(tab.id, {
    code: 'var config = '   JSON.stringify(config)
}, function() {
    chrome.tabs.executeScript(tab.id, {file: 'content.js'});
});

content.js에서는 다음 변수에 액세스할 수 있습니다.

// content.js
alert('Example:'   config);

2. 파일 실행 후 매개변수 설정

파일을 먼저 실행한 다음 메시지 전달 API를 사용하여 매개변수를 보냅니다.

chrome.tabs.executeScript(tab.id, {file: 'content.js'}, function() {
    chrome.tabs.sendMessage(tab.id, 'whatever value; String, object, whatever');
});

content.js에서 chrome.runtime.onMessage를 사용하여 다음 메시지를 수신하고 메시지를 처리합니다.

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
    // Handle message.
    // In this example, message === 'whatever value; String, object, whatever'
});