Помощь Chrome Extension: Trigger переменной CSS от popup.html

Question

Хорошо, я строй расширения примерно так:

• имеет browseraction, который вызывает popup.html, которая имеет поле ввода, кнопка отправки, и ссылка, которая вызывает JavaScript Действия
• страница background.html, который принимает входные данные значений через popup.html, а затем использует их, чтобы ввести пользовательский CSS в страницу

Я использую LocalStorage для хранения входные данные для будущего использования. Вот что мне нужна помощь с:

1. запуска Javascript в background.html (который впрыскивает CSS), если кнопка нажата в popup.html
2. , проходящей по данным из поля ввода во всплывающем окне .html to background.html

Я изучил исходный код Google, но ничего не смог найти. Я не хочу вводить CSS на каждую страницу (я знаю, как это сделать) или когда нажимается значок действия браузера (я знаю, как это сделать). Мне нужно, чтобы этот CSS был введен только тогда, когда пользователь вводит данные в popup.html и нажимает на ссылку или кнопку.

ОБНОВЛЕНО: Я по-прежнему не в состоянии делать то, что мне нужно для этого. Вот мой код:

<script type="text/javascript"> 

    var bgrSize = localStorage.getItem('gridSize'); 
function insert(){ 

    chrome.tabs.executeScript(null, {code:'body{ backgroundImage: -webkit-linear-gradient(#eee 0.05em, transparent 0.05em); backgroundPosition: 100% 0 %; backgroundSize: 100% '+ bgrSize +';}'}); 
} 
    </script> 

Это на моей странице background.html. Вот что выстреливает со страницы popup.html:

function showGrid(){ 
chrome.extension.getBackgroundPage().insert(); 
} 

В «ShowGrid» функция срабатывает при нажатии кнопки. Данные gridSize уже хранятся в localStorage (у меня есть раздел popup.html, который обновляет, чтобы показать информацию локального хранилища). Что я делаю неправильно? Я просто не могу понять. BTW, manifest.json включает в себя мой background.html

Answer 1

1. В всплывающем использовании chrome.extension.getBackgroundPage, а затем выполнить надлежащую функцию в фоновом режиме странице. Ввод данных с insertCSS или executeScript
2. Передайте данные через параметр функции или localStorage, если вы хотите использовать его позже.

Резюмируя:

// popup.html 
<script> 
window.onload = function(){ 
document.getElementById('my-form').addEventListener('submit', function(){ 
    console.log('popup'); 
    chrome.extension.getBackgroundPage().insert({ 
     param: 'example', 
     input: document.getElementById('my-input').value 
    }); 
}); 
} 
</script> 
<form id="my-form"> 
    <input type="text" id="my-input"/> 
    <input type="submit" /> 
</form> 

// background.html 
function insert(data){ 
    console.log('inserting', data.input); 
    chrome.tabs.insertCSS(null, { 
     code: 'a { font-size: ' + data.input + 'px;}' 
    }, function(){ 
     console.log('inserted'); 
    }); 
} 

// manifest.js 
... 
"permissions": ["tabs", "*://*/*"] 

Этот пример работает - я проверил это вручную;)