Я пытаюсь реализовать включение темного режима в моем расширении Chrome.Мне удалось сделать страницу параметров, и она сохраняется правильно, но я не знаю, как заставить ее работать таким образом, чтобы при выборе пользователем опции включения темного режима показывался темный режим.
Я изучал решение этой проблемы в последние 48 часов, но не смог связать их с проблемой, с которой я столкнулся.
Вот некоторые из написанных мною кодов:
Примечание: в настоящее время я не знаю, что добавить в мой content_script.js
Manifest.json
"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.html
<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>
options.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);
background.js
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();
darkmode.css
background-color: #365899 !important;
}
._3i_m ._2her {
background-color: #365899 !important;
color: #365899 !important;
}
Я хочу, чтобы пользователь мог включить темный режим, и тогда css (darmkmode.css) будет добавлен на страницу, и эффект будет иметь место.
Пожалуйста, обратите внимание:
darkmode.css находится в assets / css / .. background.js находится в assets / js /
Большое спасибо.