Как определить расширение таблицы стилей в всплывающем окне для расширения Google Chrome?

Question

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

Мне нужно создать кнопку-переключатель для включения / выключения таблицы стилей для конкретной страницы / домена, когда пользователь нажимает кнопку, которая в всплывающем окне.

Например, когда пользователь использует расширение Adblock, когда пользователь щелкает значок браузера, он открывает всплывающее окно, содержащее серию ссылок. Одна из таких ссылок - «не запускать на этой странице», которая затем изменяется на «включить», и пользователь может щелкнуть ее, чтобы снова включить.

Другой пример (гораздо лучший пример): Классический блокировщик всплывающих окон имеет кнопку во всплывающем окне с надписью «добавить эту страницу в черный список», и после щелчка изменяется «удалить из черного списка».

Классический блокировщик всплывающих окон - это, как правило, функциональность, которую я хочу для своего расширения (он ничего не делает с рекламой или блокировкой всплывающих окон, это был только пример), поэтому, когда пользователь нажимает кнопку во всплывающем окне, он поворачивает таблицу стилей. включено или выключено, что я написал и сохранил как файл .css с расширением.

Надеюсь, я сделал это достаточно ясно, чтобы понять.

---

ЭКРАНЫ

Вот фотография, сделанная мной, чтобы вы могли видеть, что именно я пытаюсь сделать:

---

и фотошоп снова, чтобы увидеть, что должно произойти, когда вы нажмете кнопки:

---

Answer 1

Вы можете использовать метод chrome.tabs.executeScript для динамического внедрения / удаления CSS (требуется разрешение tabs в manifest.json):

chrome.tabs.executeScript(null, {code:
    'document.documentElement.setAttribute("RWchooseStyle", "style1.css");'
}, function() {
    chrome.tabs.executeScript(null, {file: 'myscript.js'});
});

В myscript.js определите, вставлен ли уже CSS. Если нет, добавьте новый элемент <style> или link и присвойте ему id. В противном случае замените таблицу стилей.

Пример из myscript.js:

var selectedStyle = document.documentElement.getAttribute('RWchooseStyle');
var id, link;
if (selectedStyle) {
    id = 'RW_style_' + selectedStyle.replace(/\W/g,'');   // Sanitize id
    // Remove previous sheet, if available.
    link = document.getElementById(id);
    if (link) {
        link.parentNode.removeChild(link);
    }
}
if (id) {
    // Insert new sheet
    link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = chrome.extension.getURL(selectedStyle);
    link.id = id;
    (document.head||document.documentElement).appendChild(link);
}

// Remove temporary attribute
document.documentElement.removeAttribute('RWChooseStyle');

В этом примере файлы CSS должны быть определены в вашем каталоге расширений. Конечно, вы также можете использовать <style> вместо <link> и динамически устанавливать содержимое стиля.

Примечание. Не забудьте добавить таблицу стилей в раздел web_accessible_resources файла манифеста.