我正在开发一个chrome扩展程序,它将所有网站上的突出显示颜色从丑陋的蓝色和白色更改为我给用户的一些预设。我想尝试覆盖要注入的css文件,因为变量重置并且其行为与我要实现的目的不同。
这与我发现的this问题非常相似,但我希望使用纯JavaScript来解决。
这是我的popup.html文件(不好意思的HTML)
<!DOCTYPE html>
<head>
<script src="popup.js"></script>
</head>
<body style="padding: 20px">
<h1>Choose A Color!</h1>
<a id="Black">Black</a>
</body>
我的popup.js文件
document.addEventListener('DOMContentLoaded', function() {
var Black = document.getElementById('Black');
// onClick's logic below:
Black.addEventListener('click', function() {
changeColorToBlack();
});
});
function changeColorToBlack() {
root.style.setProperty('--color', "Green");
}
还有我的manifest.json文件
{
"name": "Highlight Changer",
"version": "1.0",
"description": "Highlight Changer!",
"manifest_version": 2,
"browser_action": {
"default_popup": "ui.html"
},
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["contentScript.js"],
"css" : ["highlight.css"]
}],
"background": {
"scripts": ["backgroundScript.js"],
"persistent": false
}
}
谢谢!