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

时间：2012-02-18 23:05:10

标签： javascript google-chrome google-chrome-extension google-chrome-devtools

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

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

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

  1. 通过XMLHttpRequest从MySQL数据库中获取变量
  2. 调用函数“processdata（）”
  3. “processdata”将处理来自XMLHttpRequest的数据。更具体地说，拆分变量，将其放入2个不同的变量并使其成为全局变量
  4. 我调用了函数“click（）”
  5. “click”然后使用setTimeout
    6. 在1250毫秒后设置css
  6. 我使用chrome.tabs.insertCSS来插入css。 css名称是变量“ currenttheme ”

    7. 正如我之前提到的，它确实可以使用弹出窗口。但是在注入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 个答案:

答案 0 :(得分：60)

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

这是关于该主题的an article。

答案 1 :(得分：7)

扩展名闪烁

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

序：

  

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

要点

您需要在Content script injected on document_start

中附加css <link>或<style>标记

该代码如下所示：

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中提供的网址格式匹配非常有限，但在这里您实际上可以查看网址的所有?query_string和#hash，并使用完整的正则表达式和字符串操作来决定是否或者不注入css。该css也可以基于设置，和/或与消息传递到后台页面协调。

分词

  • 请勿使用.insertCSS，否则会发现闪烁。

答案 2 :(得分：0)

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