Справка по расширению Chrome: запуск переменной CSS из файла popup.html

Question

Хорошо, я создаю расширение следующим образом:

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

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

1. запустить javascript в background.html (который внедряет CSS) при нажатии кнопки в popup.html
2. , передающей данные изполе ввода в popup.html для 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, который обновляется для отображения информации localStorage).Что я делаю неправильно?Я просто не могу понять это.Кстати, 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", "*://*/*"]

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