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

Я работаю над расширением 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);
});

javascript google-chrome google-chrome-extension local-storage html-injections
person yellow    schedule 30.03.2013    source источник
comment
Совет. Используйте chrome.storage вместо localStorage. Поскольку postMessage уже является асинхронным, у вас, вероятно, не возникнет проблем с изменением кода.   -  person Rob W    schedule 30.03.2013
comment
Хм, я бы рассмотрел это подробнее, так как это похоже на полезный API, но у меня все еще есть проблема, заключающаяся в том, что внедренный HTML не может получить доступ к API Chrome.   -  person yellow    schedule 31.03.2013
comment
Вы указали правильное решение в своем ответе: используйте postMessage и onmessage.   -  person Rob W    schedule 31.03.2013

Ответы (1)


arrow_upward
2
arrow_downward

Вы должны использовать функцию 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
    }
});
person ricardohdz    schedule 30.03.2013
comment
Это почти то, что я ищу, но sendToExtension вызывается из внедренного HTML-скрипта. Оттуда я не могу получить доступ к API chrome.runtime.sendMessage. - person yellow; 31.03.2013
comment
В итоге я перешел от окна к сценарию содержимого, а затем от сценария содержимого к фоновому сценарию. - person yellow; 07.04.2013