我正在使用一个Chrome扩展程序，该扩展程序允许用户通过在两个CSS文件之间切换来更改页面的CSS。这是我的第一个Chrome扩展程序，我非常菜鸟编程javascript，我不确定自己在做什么。希望您能帮助我使此工作正常进行。
这是manifest.json：
{
"name": "Scorm Cleaner",
"version": "1.0",
"description": "Limpia temarios de ASIR Online!",
"permissions": ["activeTab", "declarativeContent", "storage"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"page_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
}
},
"icons": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
},
"manifest_version": 2
}
这是popup.html：
<html>
<head>
<script src="popup.js"></script>
<link id="pagestyle" rel="stylesheet" type="text/css" href="default.css">
</head>
<body>
<button id="ChangeCSS" href="ScormCleaner.css">Style 1</button>
<button id="ChangeCSS" href="ScormQuestions.css">Style 2</button>
</body>
</html>
和popup.js：
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("ChangeCSS").addEventListener("click", handler);
});
function handler() {
document.getElementById('pagestyle').setAttribute('href');
}
这是在Chrome上运行的弹出窗口的图像：
Popup screenshot
谢谢！！
最佳答案
您应该看一下Google的Office“ Getting Started”教程，因为它的功能非常相似，并且对于初学者来说是很好的资源。
您应该在标签之前插入一个元素到页面上，以确保将使用您的样式。当按下其中一个按钮时，您可以更改内容或样式或删除当前的按钮或样式并添加一个新的按钮。