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

Question

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

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

我的代码中发生了什么...

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

Answer 1

您可以通过编程方式创建一个新的 标记并将其添加到 部分，就像动态加载 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);

这是关于该主题的一篇文章 。

Answer 2

扩展闪烁

对生态系统的一次创伤不难修复

前言：

在将 CSS 添加到页面的多种方法中，大多数都会导致屏幕闪烁- 最初显示未应用 CSS 的页面，然后再应用它。我尝试了多种方法，以下是我的发现。

标记

您需要在 在 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 文件中，您可以处理任意数量的编程事物。 manifest.json 中提供的 URL 模式匹配非常有限，但在这里您实际上可以查看 a 的所有 ?query_string 和 #hash url，并使用完整的正则表达式和字符串操作来决定是否注入CSS。该 CSS 还可以基于设置，和/或与后台页面的消息传递相协调。

结束语

• 不要使用 .insertCSS，您会注意到闪烁。

Answer 3

这很简单，您可以添加到清单的权限字段：请参阅 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)