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

Question

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

Jac*_*lom 19 javascript google-chrome google-chrome-extension google-chrome-devtools

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

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

通过XMLHttpRequest从MySQL数据库中获取变量
调用函数"processdata()"
"processdata"将处理来自XMLHttpRequest的数据.更具体地说,拆分变量,将其放入2个不同的变量并使其成为全局变量
我叫这个函数,"click()"
"click"然后使用setTimeout在1250毫秒后设置css
我使用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);
  }
});

Run Code Online (Sandbox Code Playgroud)

Answer 1

jfr*_*d00 61

您可以以编程方式创建一个新<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);

Run Code Online (Sandbox Code Playgroud)

这是一篇关于这个主题的文章.

我给你的印象如此简单......就像用ref做出答案而不费吹灰之力.专家很容易得到好的答案...... (2认同)

Answer 2

Dev*_*ode 7

扩展闪烁

对生态系统的一种不难解决的问题

前言:

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

Run Code Online (Sandbox Code Playgroud)

对于一些动态css代码:

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

Run Code Online (Sandbox Code Playgroud)

在脚本中执行此操作document_start可确保没有闪烁!

推理

在这个JavaScript文件中,您可以处理任意数量的程序化事物.提供的URL模式匹配manifest.json非常有限,但在这里您可以实际查看所有?query_string和#hashURL,并使用完整的正则表达式和字符串操作来决定是否注入css.该css也可以基于设置,和/或与消息传递到后台页面协调.

分手

不要使用.insertCSS,你会发现闪烁.

我建议使用硬编码的``chrome.extension.getURL('/ mod/style.css')`](http://code.google.com/chrome/extensions/extension.html#method-getURL) chrome-extension:// ...`protocol + host. (2认同)

归档时间：	13 年，9 月前
查看次数：	22766 次
最近记录：	7 年，8 月前