2

Есть тестовое расширение под chrome. Добавил в него несколько настроек. Они прекрасно сохраняются и передаются на background page. Но я никак не могу понять, как я могу использовать эти значения на сайте. Например в зависимости от настройки - добавить класс к боди на нужном мне сайте.

Вот как я делаю. в скрипте option.js я задаю localStorage

localStorage.power_status = document.getElementById('power_status').checked;

Это чекбокс. В итоге localStorage.power_status получает значение true/false

код в background такой:

var pwr_s = localStorage.power_status;

    chrome.storage.sync.set({'power_s':pwr_s}, function() {
        console.log('Option power set: ' + pwr_s);
    });

на сайте подключаю script.js, в нем пытаюсь получить значение:

chrome.storage.sync.get('power_s', function(r) {
    console.log('Status: ' + r['power_s']);
});

Но значение получает не верное, или через раз.. т.е. не понятно откуда оно берется.. то верное показывает, то нет..

Может есть способ более простой манипулировать DOM через настройки расширения?

Итоговая задача состоит в том, что бы менять CSS стили на сайте в зависимости от настроек расширения. Планирую просто добавлять нужный класс к боди.

2
  • У бекграунда свое хранилище, у вашей странички своё. Дабы результат был одинаков - все должен делать фоновый скрипт( он же background) а content уже читает непосредственно с него
    – jackrv
    10 мар 2016 в 15:27
  • т.е. на сайте так же подключать background.js ? 1 фев 2018 в 11:40

1 ответ 1

1

Идея с localStorage звучит крайне сложно, с учетом вашей задачи:

Итоговая задача состоит в том, что бы менять CSS стили на сайте в зависимости от настроек расширения

Для того чтобы, вносить изменения в стили страницы вам достаточно методов chrome.tabs.insertCSS или chrome.tabs.executeScript В таком случае сайту даже не обязательно взаимодействовать и вообще знать про наличие расширения.

Примеры

Можно выполнить JS-код, меняющий стиль элемента:

chrome.tabs.executeScript({
    code: 'document.body.style.backgroundColor="red"'
});

Или добавить класс элементу:

сhrome.tabs.executeScript({
  code: 'document.body.classList.add("myClass")'
});

Метод insertCSS позволяет добавлять произвольные стили на страницу:

chrome.tabs.insertCSS({
    code: 'body {background: green}'
});

Или инъектировать собственный CSS-файл, упакованный вместе с расширением:

chrome.tabs.insertCSS({
    file: 'style.css'
});
1
  • Спасибо! У меня нету проблем с изменением css или js на сайте. Я хочу сохранять эти изменения в настройках расширения. Вот в чем мой вопрос ) 1 фев 2018 в 11:39

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.