chrome扩展名交换两个CSS样式表文件

我正在处理一个Chrome扩展程序，该扩展程序允许用户通过在两个CSS文件之间切换页面的CSS。这是我的第一个Chrome扩展名，我非常菜鸟编程JavaScript，我不确定我在做什么。希望您能帮助我正确地完成这项工作。

这是清单：

    {
    "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上工作的弹出窗口的图像：

弹出屏幕截图

谢谢！

您应该查看Google的"启动"教程，因为它做了非常相似的事情，并且是起动器的好资源。

您应该在标签之前将元素注入页面，以确保将使用您的样式。按下一个按钮时，您会更改内容或样式，或删除当前的按钮并添加新的按钮。

相关内容

最新更新

热门标签：