Могу ли я внедрить файл CSS программно с помощью файла JS -файла содержимого?

StackOverflow https://stackoverflow.com/questions/9345003

Вопрос

Могу ли я внедрить файл CSS программно с помощью файла JS -файла содержимого?

Я могу вводить CSS, когда файл JS связан с моим Popup.html. Проблема в том, что я должен нажать на кнопку, чтобы открыть всплывающее окно, чтобы ввести CSS. Я хочу, чтобы это произошло автоматически и на заднем плане.

Что происходит в моем коде ...

  1. Получите переменную из базы данных MySQL через XMLHTTPRequest
  2. Вызовите функцию "processData ()"
  3. «ProcessData» будет обрабатывать данные из Xmlhttprequest. Более конкретно, разделите переменную, поместите ее на 2 разных переменных и сделайте их глобальными
  4. Я называю функцию "click ()"
  5. «Нажмите», затем установит CSS после 1250 миллисекунд с помощью SetTimeout
  6. Я использую chrome.tabs.insertcsss для вставки CSS. Имя CSS является переменной »,CurrentTheme"

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

Как мне все это произойдет автоматически без какого -либо взаимодействия с пользователем?

Вот мой код:

    function getData() {
if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        user_data = xmlhttp.responseText;
        window.user_data = user_data;
        processdata();
        }
      }
    xmlhttp.open("GET","http://localhost:8888/g_dta.php",true);
    xmlhttp.send();
}

getData();

function processdata() {
  var downdata = user_data.split('|||||');
  var installedthemes = downdata[0];
  var currenttheme = downdata[1].toString();
  window.currenttheme = currenttheme;
  click();
  }

function click(e) { 
      function setCSS() {
          chrome.tabs.insertCSS(null, {file:currenttheme + ".css"});
          }
      setTimeout(function(){setCSS()}, 1250);
      document.getElementById('iFrameLocation').innerHTML = "<iframe src='http://localhost:8888/wr_dta.php?newid="+e.target.id+"'></iframe>";
      getData();
}

document.addEventListener('DOMContentLoaded', function () {
  var divs = document.querySelectorAll('div');
  for (var i = 0; i < divs.length; i++) {
    divs[i].addEventListener('click', click);
  }
});
Это было полезно?

Решение

Вы можете программно создать новый <link> теж и добавьте его в <head> Раздел точно так же, как файлы JS загружаются динамически.

var link = document.createElement("link");
link.href = "http://example.com/mystyle.css";
link.type = "text/css";
link.rel = "stylesheet";
document.getElementsByTagName("head")[0].appendChild(link);

Вот статья по теме.

Другие советы

Мерцание удлинения

Трама в экосистему Это не сложно исправить

Предисловие:

Среди многих способов добавить ваш CSS на страницу, большинство из них приводят к мерцанию экрана - изначально отображая страницу без применения CSS, а затем применяя его. Я попробовал несколько способов, ниже мои выводы.

Гист

Вам нужно добавить CSS <link> или <style> метка в Сценарий контента вводится на document_start

Этот код выглядит так:

var link = document.createElement('link');
link.href =  chrome.runtime.getURL('main.css');
  //chrome-extension://<extension id>/main.css
link.rel = 'stylesheet';
document.documentElement.insertBefore(link);

Для некоторого динамического кода CSS:

var customStyles = document.createElement('style'); 
customStyles.appendChild(document.createTextNode(
   'body { background-color: ' + localStorage.getItem('background-color') + '}'
));
document.documentElement.insertBefore(customStyles);

Делать это в сценарии на document_start гарантирует есть Не мерцаю!

Рассуждение

В этом файле JavaScript вы можете обрабатывать любое количество программных вещей. Сопоставление с шаблоном URL -адреса, предлагаемое в manifest.json очень ограничен, но здесь вы можете посмотреть на все ?query_string а также #hash URL и используйте полные регулярные выражения и строковые операции, чтобы решить, вводить ли CSS или нет. Что CSS также может основываться на настройках и/или координации с сообщениями на фоновой странице.

Прощальные слова

  • Не используйте .insertCSS, вы заметите мерцание.

Это просто, вы можете добавить в поле разрешения манифеста: см. web_accessible_resources 

 , "web_accessible_resources": [
        "mystyle.css"
    ]

а также добавьте это в content_scripts

"content_scripts": [
    {
        "matches": ["<all_urls>"],
        "css": ["mystyle.css"],
        "js": ["jquery-1.10.2.min.js","content.js","my.min.js"]
    }],

Вы также добавляете то же самое, используя программную инъекцию и INSERTCSS ().

chrome.tabs.insertCSS(integer tabId, object details, function callback)
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top