Как переключить CSS-файл в пользовательском скрипте перед отображением страницы?

Question

Я пытаюсь написать пользовательский скрипт для Chrome, который отключает конкретный файл CSS для конкретного сайта.

Часть, касающаяся переключения CSS-файла на другой, работает нормально, проблема в том, что я не могу этого сделать до того, как страница будет отображена.Это приводит к очень уродливому мерцанию сайта, когда сначала отображается оригинальный макет, а затем быстро заменяется новым макетом, который я вставил.

Я использовал @run_at document_start, чтобы мой пользовательский скрипт запускался достраница отображается, но это не работает должным образом.Из того, что я вижу из официальной документации Chrome , это должно поддерживаться.

Для справки, вот мой полный сценарий:

// ==UserScript==
// @name           name
// @namespace      namespace
// @version        0.1a
// @description    description
// @include        http://example.com/*
// @run_at document_start
// ==/UserScript==


var sheets = document.getElementsByTagName("link");

for (var i=0; i<sheets.length; ++i) {
    if (sheets[i].href.indexOf('all.css') != -1) {
        sheets[i].href = 'http://replacement.com/all.css';
    }
}

Я исследовал немного дальшеи мне удалось установить точку останова в моем скрипте (по какой-то причине скрипт изначально не появлялся в Инструментах разработчика).При остановке в точке останова в начале моего сценария сайт уже полностью загружен оригинальной темой.Так что, похоже, директива @run_at document_start просто не работает, и мой скрипт выполняется после загрузки страницы.Хотя я не могу понять, почему это так.

Answer 1

Я попробовал ваш код при запуске документа и, как и ожидалось, не получил никаких листов. Это было ожидаемо, так как, как говорят доктора, они не построены DOM (поэтому не будет никаких ссылок). Существует несколько таблиц стилей, которые можно увидеть, но они не могут быть доступны для скрипта контента из-за междоменной css или чего-то подобного. Вы можете получить их, внедрив некоторый код, но который не сможет получить доступ к файлам CSS из другого домена на этой странице ( Чтение документов CSS в расширении Chrome ).

Существует альтернативный способ обмена файлами CSS с использованием события onBeforeLoad ....

function doBeforeLoad(event){
    if ((event.srcElement.type=="text/css") && (event.srcElement.href.indexOf('all.css') != -1) && ( event.srcElement.href != 'http://replacement.com/all.css')) {
        event.srcElement.href = 'http://replacement.com/all.css';
    }
}

document.addEventListener('beforeload', doBeforeLoad , true);

Поместите это в скрипт содержимого и запустите при запуске документа.