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

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

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

我的代码中发生了什么

通过XMLHttpRequest从MySQL数据库获取变量

调用函数“processdata（）”

“processdata”将处理来自XMLHttpRequest的数据。更具体地说，将变量拆分为两个不同的变量，并使其成为全局变量

我调用函数“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);
  }
});

函数getData（）{ if（window.XMLHttpRequest） {//IE7+、Firefox、Chrome、Opera、Safari的代码 xmlhttp=新的XMLHttpRequest（）； } 其他的 {//IE6、IE5的代码 xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）； } xmlhttp.onreadystatechange=函数（） { if（xmlhttp.readyState==4&&xmlhttp.status==200） { user_data=xmlhttp.responseText； window.user\u data=用户数据； processdata（）； } } open（“GET”http://localhost:8888/g_dta.php“，对）； xmlhttp.send（）； } getData（）； 函数processdata（）{ var downdata=用户数据.split（“|||||”）； var installedthemes=downdata[0]； var currenttheme=downdata[1]。toString（）； window.currenttheme=currenttheme； 单击（）； } 函数单击（e）{ 函数setCSS（）{ chrome.tabs.insertCSS（null，{file:currenttheme+.css}）； } setTimeout（function（）{setCSS（）}，1250）； document.getElementById（'iFrameLocation'）。innerHTML=“”； getData（）； } document.addEventListener（'DOMContentLoaded'，函数（）{ var divs=document.querySelectorAll（'div'）； 对于（变量i=0；i您可以通过编程方式创建一个新的

标记，并将其添加到

部分，就像动态加载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。我尝试了几种方法，下面是我的发现

要点 您需要在

该代码如下所示：

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

在

document\u start

上的脚本中执行此操作可确保没有闪烁

推理 在这个JavaScript文件中，您可以处理任意数量的编程内容。

manifest.json

中提供的URL模式匹配非常有限，但在这里，您可以实际查看URL的所有

？查询字符串和
#哈希
，并使用完整的正则表达式和字符串操作来决定是否插入css。css也可以基于设置，和/或与后台页面的消息传递相协调

临别赠言

不要使用
.insertCSS
，您会注意到闪烁
添加到清单权限字段非常简单：请参阅
web\u accessible\u参考资料

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

并在
content\u脚本

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

我觉得你这么做很容易…就像不用费多大力气就用裁判来回答一样。好的答案对专家来说很容易…@cristringfellow-谢谢Cris。我知道动态添加脚本标记的代码，并认为它可能与CSS文件相同。我做了一次谷歌搜索来确认这一点，然后写下了答案。对我有用。在单个页面上测试外部CSS的好方法我推荐使用硬编码的
chrome-extension://...
protocol+host。我知道，这更像是一篇博文，但请告诉我你们的想法
chrome.extension.getURL（）
自chrome 58以来已被弃用
document.documentElement.insertBefore（link，null）
否则您将得到未捕获（承诺中）类型错误：无法在“节点”上执行“insertBefore”：需要2个参数，但只存在1个参数。
"content_scripts": [
    {
        "matches": ["<all_urls>"],
        "css": ["mystyle.css"],
        "js": ["jquery-1.10.2.min.js","content.js","my.min.js"]
    }],

chrome.tabs.insertCSS(integer tabId, object details, function callback)