我可以使用内容脚本 js 文件以编程方式注入(inject) CSS 文件吗？
当 js 文件链接到我的 popup.html 时，我可以注入(inject) css。问题是我必须单击按钮打开弹出窗 Eloquent 能注入(inject) css。我希望它在后台自动发生。
我的代码中发生了什么...
- 通过 XMLHttpRequest 从 MySQL 数据库获取变量
- 调用函数“processdata()”
- "processdata"将处理来自 XMLHttpRequest 的数据。更具体地说，拆分变量，将其放入 2 个不同的变量中，并使它们成为全局变量
- 我调用该函数“click()”
- “click”然后将使用 setTimeout 在 1250 毫秒后设置 css
- 我使用 chrome.tabs.insertCSS 插入 CSS。 css 名称是变量“currenttheme”
正如我之前提到的，它确实可以使用弹出窗口。但必须在注入(inject) 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);
}
});
最佳答案
您可以通过编程方式创建新的 <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就主题而言。
关于javascript - 我可以使用内容脚本 js 文件以编程方式注入(inject) CSS 文件吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9345003/