Question

我正在尝试在chrome扩展程序中实现启用暗模式。我已经能够执行选项页面，并且它可以正确保存，但是我不知道如何使它以这种方式工作，即当用户选中启用暗模式选项时，它将显示暗模式。

在过去的48小时中，我一直在研究解决方案，但没有将它们与我遇到的问题联系起来。

以下是我编写的一些代码：

注意：目前，我不知道要在content_script.js中放入什么

Manifest.json

@Override
public void onBindViewHolder(ActionItemViewHolder holder, int position) {
    position = position % SIZE_OF_LIST;
};

options.html

"permissions": [
        "tabs",
        "*://*.facebook.com/*",     
        "storage",
        "activeTab",
        "tabs"
    ],
    "options_page": "options/options.html",

    "content_scripts": [{
            "matches": [
                "*://*.facebook.com/messages/*",
                "https://www.messenger.com/*"
            ],
            "js": ["/assets/js/jquery-2.2.4.min.js", 
     "/assets/js/content_script.js"],
            "css": ["/assets/css/content_script.css"]

        }]

options.js

   <html>
   <head><title>My Options</title></head>
   <body>
    <h1>My Options</h1>
    <h3>Enable night mode</h3>
    <label>
        <input type="checkbox" id="night-mode">
    </label>    
    <div id="status"></div>
    <button id="save">Save</button>


    <script src="options.js"></script>
    <script src="../assets/js/jquery-2.2.4.min.js"></script>
    <script src="../assets/bootstrap/js/bootstrap.min.js"></script> 
    <script src="../assets/js/jquery.scrolly.min.js"></script>
        <script src="../assets/js/skel.min.js"></script>
        <script src="../assets/js/simplebar.js"></script>       
        <script src="../assets/js/util.js"></script>
        <script src="../assets/js/jquery.validate.js"></script>
        <script src="../dist/bootstrap-tagsinput.js"></script>
        <script src="../assets/js/custom.js"></script>
    </body>
    </html>

background.js

    var enableNightMode = document.getElementById('night-mode').checked;
    chrome.storage.sync.set({
    enableNightMode: enableNightMode
    }, function() {
      // Update status to let user know options were saved.
      //console.log('Value is set to ' + enableNightMode);

      var status = document.getElementById('status');
      status.textContent = 'Settings Saved.';
      setTimeout(function() {
        status.textContent = '';
      }, 3750);
          });
}

    // Restores checkbox state using the preferences
    // stored in chrome.storage.
    function restore_options() {
    // Use default value color = 'red' and likesColor = true.
    chrome.storage.sync.get({
    enableNightMode: true
    }, function(items) {
    document.getElementById('night-mode').checked = items.enableNightMode;
    //document.getElementById('like').checked = items.likesColor;
    });
    }
    document.addEventListener('DOMContentLoaded', restore_options);
    document.getElementById('save').addEventListener('click',
    save_chatsilo_options);

darkmode.css

   function updatePage(){
    chrome.storage.sync.get(
        {
            enableNightMode: true
        },
        function(settings) {
            if (true === settings.enableNightMode) {                
                //document.body.style.backgroundColor = 'green';
                //console.log(document.body.style.backgroundColor);

                //chrome.tabs.insertCSS(null, { file: "../js/css/darkmode.css" });
                chrome.tabs.insertCSS(null, { file: "../css/darkmode.css" });

            } else {
                //document.body.style.backgroundColor = 'yellow';
                //console.log(document.body.style.backgroundColor);
            }
        }
    );
}
chrome.storage.onChanged.addListener(updatePage);
updatePage();

我希望用户能够启用暗模式，然后将css（darmkmode.css）添加到页面中，然后效果就会发生。

请注意：

darkmode.css位于asset / css /中。 background.js位于Assets / js /

非常感谢。

如何在Chrome扩展程序中注入CSS代码

0 个答案: