我可以使用内容脚本js文件以编程方式注入CSS文件吗？ [英] Can I inject a CSS file programmatically using a content script js file?

问题描述

可以使用内容脚本js文件以编程方式注入CSS文件吗？

当js文件链接到弹出窗口时，我可以注入css html的。问题是我必须点击按钮打开弹出注入CSS。我希望它自动发生在后台。

我的代码会发生什么......

1. 通过XMLHttpRequest从MySQL数据库获取变量
   
2. 调用函数processdata（）
   
3. processdata将处理来自XMLHttpRequest的数据。更具体地说，分割变量，把它放到2个不同的变量中，并使它们成为全局变量。


4. 我调用函数click（）。点击然后将使用setTimeout设置1250毫秒后的CSS


5. 我使用chrome.tabs.insertCSS插入css。 css的名字是变量 currenttheme





正如我前面提到的，它使用弹出。但弹出窗口必须在CSS注入之前打开。





如何在没有任何用户互动的情况下自动完成这一切 ？



这里是我的代码：



  function getData（）{
 if（window。 XMLHttpRequest）
 {//代码为IE7 +，Firefox，Chrome，Opera，Safari 
 xmlhttp = new XMLHttpRequest（）; 
} 
 else 
 {//代码为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（）; 
 
函数processdata（）{
 var downdata = user_data.split（'|||||'）; 
 var installedthemes = downdata [0]; 
 var currenttheme = downdata [1] .toString（）; 
 window.currenttheme = currenttheme; 
 click（）; 
 
 
函数click（e）{
函数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（）; 
 
 $ b $ 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）; 
  

以下是关于该主题的文章。


Can I inject a CSS file programmatically using a content script js file?

It is possible for me to inject the css when the js file is linked to my popup.html. The problem is I have to click on the button to open the popup to inject the css. I want it to happen automatically and in the background.

What happens in my code...

1. Get a variable from a MySQL database through a XMLHttpRequest
2. Call the function, "processdata()"
3. "processdata" Will process the data from the XMLHttpRequest. More specifically, split the variable, put it into 2 different variables and make them global
4. I call the function, "click()"
5. "click" Then will set the css after 1250 milliseconds using setTimeout
6. I use chrome.tabs.insertCSS to insert the css. The css name is the variable, "currenttheme"

As I mentioned before it does work using the popup. But the popup has to be opened before the CSS gets injected.

How do I make this all happen automatically, without any user interaction?

Here is my code:

    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);
  }
});

解决方案

You can programmatically create a new <link> tag and add it to the <head> section just like JS files are loaded dynamically.

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);

Here's an article on the topic.

这篇关于我可以使用内容脚本js文件以编程方式注入CSS文件吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！