Расширение Chrome CSS-инъекция с сохраненными пользователем значениями? - PullRequest
Новая
       8

Расширение Chrome CSS-инъекция с сохраненными пользователем значениями?

0 голосов
/ 26 октября 2018

Я создал расширение, которое вводит / переопределяет окраску на странице.работает отлично.Я хотел бы добавить возможность для пользователя вводить свои собственные значения окраски.У меня есть выпадающий список, текстовые поля и т.д ... вопрос в том ... Можете ли вы как-нибудь изменить файл css с помощью переменных?или я должен javascript внедрить его .., который я не уверен, как именно это сделать, так как CSS сложный

, как, я знаю document.body.style.backroundcolor = и т. д. и т. д., но эта страница я использую css, какэто: 

.chat_msgs li.chat_msg.msg-chat-message.msg-info-message{
color: yellowgreen !important;
border-radius: 10px !important;
background-color: #202020 !important;
border-bottom: 2px solid yellowgreen !important;
border-top: 2px solid yellowgreen !important;}

так я могу использовать переменные вместо цветов?или мне нужно сделать какой-нибудь код выполнения сценария и заставить его с помощью jss (какая боль! lol)

Спасибо!

Edit Понятно! 

L60C.onchange = function(element) {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      chrome.tabs.insertCSS(
          tabs[0].id,
          {code: ".xp_60 .icon {color: #35a6dd !important;}"});
    });
  };

Ответы [ 2 ]

0 голосов
/ 26 октября 2018

Чтобы добавить в пост maxpaj - вам также понадобится разрешение tabs в вашем файле manifest.json.

Вот еще немного документации по этому вопросу: https://developer.chrome.com/extensions/tabs#method-insertCSS

0 голосов
/ 26 октября 2018

Вы можете использовать chrome.tabs.insertCSS , чтобы вставить CSS во вкладку. 

const color = getColor();
const code = '.xp_40 .icon .color = "' + color + '";';
chrome.tabs.insertCSS(tabs[0].id, { code: code });
...