Внедренный HTML для доступа к Chrome API и глобальным переменным

Question

Я работаю над расширением Chrome, и я новичок в этом процессе. Расширение, над которым я работаю, вставляет на страницу боковую панель HTML, вставляет функции java-скрипта в заголовок, а затем позволяет пользователю нажимать кнопки на боковой панели для создания / сохранения данных моего расширения.

Однако, когда я хочу сохранить информацию, я использую localStorage, однако localStorage всегда сохраняет по отношению к текущему веб-сайту. Как я могу использовать localStorage для сохранения относительно нашего расширения?

Кроме того, я хотел бы использовать некоторые глобальные переменные javascript в расширении chrome. Где они принадлежат? Я знаю, что в настоящее время я не могу получить к ним доступ из введенного Javascript.

Я посмотрел на передачу сообщений, и у меня были некоторые проблемы с этим. Я не уверен, как это работает в объеме вставленного JavaScript в заголовок страницы. Я пытался работать с этим примером, но мое расширение, похоже, не улавливает сообщение.

// 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
    }
});