크롬 API 및 전역 변수에 액세스하는 삽입 된 HTML

Question

Chrome 확장 프로그램에서 작업하고있어 새로운 단계입니다. 내가 작업하고있는 확장 기능은 페이지에 HTML 사이드 바를 삽입하고 자바 스크립트 함수를 헤더에 삽입 한 다음 사용자가 사이드 바의 버튼을 눌러 내선 데이터를 작성/저장하게합니다.

그러나 정보를 저장하려면 localStorage를 사용하지만 localStorage는 항상 현재 웹 사이트와 관련하여 저장합니다. 확장 기능과 관련하여 localStorage를 사용하여 저장하려면 어떻게해야합니까?

크롬 확장에 일부 전역 자바 스크립트 변수를 사용하고 싶습니다. 이것들은 어디에 속해 있습니까? 저는 현재 주입 된 자바 스크립트에서 액세스 할 수 없다는 것을 알고 있습니다.

메시지 전달을 살펴본 결과 몇 가지 문제가있었습니다. 페이지의 헤더에 삽입 된 자바 스크립트의 범위에서 어떻게 작동하는지 잘 모르겠습니다. 이 예제로 작업을 시도했지만 내 확장 프로그램이 메시지를 수신하지 않는 것 같습니다.

// This function is called in the injected header javascript. 
function sendToExtension() { 
    setTimeout(function() { 
    console.log('page javascript sending message'); 
    window.postMessage({ type: 'page_js_type', 
     text: "Hello from the page's javascript!"}, 
     '*' /* targetOrigin: any */); 
    }, 10); 
} 

// This is installed in a background script. 
window.addEventListener('message', function(event) { 
    console.log('content_script.js got message:', event); 
}); 

Answer 1

Chrome의 sendMessage 기능과 onMessage 수신기를 사용해야합니다. 아래 참조 :

function sendToExtension() { 
    console.log('Sending message'); 
    chrome.runtime.sendMessage({ext: "myExtension"}, function(response) { 
     console.log(response.ack); 
    }); 
} 

// Listener - Put this in the background script to listen to all the events. 
chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) { 
    if (request.ext) { 
     console.log('Message received from ' + request.ext); 
     sendResponse({ack:'received'}); // This send a response message to the requestor 
    } 
});