Могу ли я внедрить CSS-файл программно, используя js-файл сценария содержимого? - PullRequest
19 голосов
/ 19 февраля 2012

Могу ли я внедрить файл CSS программным способом, используя js-файл сценария содержимого?

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

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

  1. Получить переменную из базы данных MySQL через XMLHttpRequest
  2. вызов функции "processdata ()"
  3. "processdata" Обрабатывает данные из XMLHttpRequest. В частности, разделите переменную, поместите ее в две разные переменные и сделайте их глобальными
  4. Я вызываю функцию "click ()"
  5. «щелчок» Затем установит CSS через 1250 миллисекунд, используя setTimeout
  6. Я использую chrome.tabs.insertCSS для вставки 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);
  }
});

Ответы [ 3 ]

60 голосов
/ 19 февраля 2012

Вы можете программно создать новый тег <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);

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

7 голосов
/ 09 марта 2012

Расширение мерцания

трамвай для экосистемы , который не сложно исправить

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

Среди множества способов добавления 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, вы заметите мерцание.
0 голосов
/ 23 мая 2016

Просто вы можете добавить в поле разрешений манифеста: См. 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)
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...