Question

我正在使用一个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

谢谢！

Answer 1

您应该看一下Google的办公室“ {{3}}”教程，因为它的功能非常相似，并且是入门者的好资源。

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

Chrome扩展程序可交换两个CSS样式表文件

1 个答案: