Продвинутые пользовательские стили сайтов, не ограниченные одним css?

document.querySelector(#responsive_page_template_content > div.page_content_ctn > div > div > div > div > div > div > div > div> div > span).style.color = background-color: #FF0000;

const element = document.querySelector("#responsive_page_template_content > div.page_content_ctn > div > div > div > div > div > div > div > div > div > span");
element.style.color = "red";

Но если я просто вставляю этот код в скрипт ниже // Your code here..., то ничего не происходит...

const element = document.querySelector("#responsive_page_template_content > div.page_content_ctn > div > div > div > div > div > div > div > div > div > span");
    element.style.color = "red";

var textElements1 = document.querySelectorAll("#responsive_page_template_content > div.page_content_ctn > div > div > div > div > div > div > div > div > div > span");
    textElements1.forEach(function(element) {
        element.style.color = 'red';
    });

что я делаю не так? Вы можете ответить конкретно?

И опять же он работает в консоли но не работает в скрипте. А что я делаю не так, никто не знает...

Сейчас многие сайты использует ренедринг страниц на стороне клиента и нужные вам элементы просто ещё не были созданы, поэтому надо ждать загрузки всей страницы. Ещё можно подписаться на появление определённого элемента в дереве.

https://learn.javascript.ru/onload-ondomcontentloaded

document.addEventListener("DOMContentLoaded", ready);

    function ready() {
        var textElements1 = document.querySelectorAll("#responsive_page_template_content > div.page_content_ctn > div > div > div > div > div > div > div > div > div > span");
        textElements1.forEach(function(element) {
            element.style.color = 'red';
        });
    }

window.onload = function() {
        var textElements1 = document.querySelectorAll("#responsive_page_template_content > div.page_content_ctn > div > div > div > div > div > div > div > div > div > span");
        textElements1.forEach(function(element) {
            element.style.color = 'red';
        });
    };