greasemonkey - запускать скрипт при загрузке html и css

Question

Как видно из заголовка, я хочу подождать, пока HTML-файл не будет проанализирован и все таблицы стилей загружены, потому что мне нужно использовать currentsyle, Однако я не хочу ждать изображений. Поэтому я не могу использовать load событие, так как это ждет изображений. И я не могу использовать DOMContentLoaded событие, так как это не ждет таблиц стилей. Я тоже не могу использовать document.body.appendChild добавить тег сценария в конце документа, потому что этот сценарий выполняется в предположении, что на странице отключен JavaScript.

Серьезно ли нет событий, чтобы ждать на стилях?

Answer 1

Есть три возможно run-at значения для сценариев GM - с соответствующим document.readyState в скобках

• начало документа (до document.readyState === 'loading')
• конец документа (document.readyState === 'ineractive')
• бездействующий (document.readyState === 'complete')

Это единственные доступные точки внедрения для вашего скрипта

в начале / конце - никакие внешние ресурсы не будут загружены, поэтому слишком рано для того, что вы хотите

на холостом ходу загружаются все внешние ресурсы, поэтому уже слишком поздно для того, что вы хотите

Хорошо, вы знаете все это, но я добавляю это для других будущих читателей

если вы загружаете свой скрипт в конец документа, вы можете добавить load слушатели всех <link rel="stylesheet" лайк

Promise.all(Array.from(document.querySelectorAll('link[rel="stylesheet"]'), ss => new Promise(resolve => {
    const href = ss.href;
    const fulfill = status => resolve({href, status});
    setTimeout(fulfill, 5000, 'timeout');
    ss.addEventListener('load', () => resolve('load'));
    ss.addEventListener('error', () => resolve('error')); // yes, resolve, because we just want to wait until all stylesheets are done with, errors shouldn't stop us
}))).then((results) => {
    // results is an array of {href:'some url', status: 'load|error|timeout'}
    // at this point stylesheets have finished loading
});