Обработать веб страницу до открытия браузером.

[Predator199]

Я через расширение браузера. Удаляю некоторые элементы дом документа.
Удаляются они после того как подгрузилась страница. То есть вижу сначала то, что за тем удаляется. Как сделать так ,чтобы уже была обработана страница, прежде чем я ее увижу..?
И такой вопрос. Некоторые скрипты не находит, неверный указан путь. Из-за этого браузер дольше грузит страницу. Как сделать так, чтобы это меньше времени занимало. То ест тоже удалить, перед тем как подгрузицтся страница.

[Fenex]

Во-первых надо запускать скрипт сразу после начала загрузки страницы. В Chromium'ах это делается путём присваивания значения "document_start" свойству content_scripts.run_at в манифесте (также можно сделать аналог при использовании chrome.tabs.executeScript из background).

Во-вторых, для сокращения времени мелькания надо ставить таймеры на попытку обращения к DOM. Если дерево ещё не построено, то повторить попытку через 50мс:

function run() {
    // code

    return;
}

function try_run() {
    if(document.body)
        run();
    else 
        setTimeout(try_run, 50);

    return;
}

Кстати, к document.head можно обратиться гораздо раньше, чем к document.body, поэтому можно сделать один крутой финт - вставить в head стиль

body { display: none !important; }

а после формирования document.body и изменения DOM отобразить body. Таким образом сначала недолго будет белая страница, а затем сразу появится то, что нужно. И никаких мельканий.

[Predator199]

Сообщение от Fenex

Во-первых надо запускать скрипт сразу после начала загрузки страницы. В Chromium'ах это делается путём присваивания значения "document_start" свойству content_scripts.run_at в манифесте (также можно сделать аналог при использовании chrome.tabs.executeScript из background).

Во-вторых, для сокращения времени мелькания надо ставить таймеры на попытку обращения к DOM. Если дерево ещё не построено, то повторить попытку через 50мс:

function run() {
    // code

    return;
}

function try_run() {
    if(document.body)
        run();
    else 
        setTimeout(try_run, 50);

    return;
}

Кстати, к document.head можно обратиться гораздо раньше, чем к document.body, поэтому можно сделать один крутой финт - вставить в head стиль

а после формирования document.body и изменения DOM отобразить body. Таким образом сначала недолго будет белая страница, а затем сразу появится то, что нужно. И никаких мельканий.

Выставил document_start, разницы не заметил...
Точнее у меня выдает ошибку

Uncaught TypeError: Cannot call method 'setAttribute' of undefined

$.get(chrome.extension.getURL('/zxc.js'), 
    function(data) {
        var script = document.createElement("script");
        script.setAttribute("type", "text/javascript");
        script.innerHTML = data;
        document.getElementsByTagName("head")[0].appendChild(script);
        document.getElementsByTagName("body")[0].setAttribute("onLoad", "main();");
    }
);

Попробовал прописать

 $('body').css({'display' : 'none !important'});

Не работает, не прописывается так стиль. Если я правильно вас понял.

Вот страница грузился, а скрипт не работает в это время. Можно ли как то заставить, чтобы работал и делал свое задание в момент загрузки. Формирования документа?

[Fenex]

Выставил document_start, разницы не заметил...
Точнее у меня выдает ошибку

Естественно, я об этом написал в своём сообщении.

[Predator199]

Сообщение от Fenex

Естественно, я об этом написал в своём сообщении.

Я не совсем понимаю. Но ведь через баграунд, удаляются элементы. Это мне и нужно... Но ведь удаляются после того как на экране появляются. Можно ли, чтобы заранее были обработаны но в тоже время. Страница подгружалась... Я просто не хочу видеть то, что в дальнейшем исчезнет. Смотреть на белый экран, а затем все и сразу. Не удобно да и временя займет..

[Fenex]

Вы никак не сможете обращаться к DOM-дереву если его построение ещё не завершено.

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

[Naive]

Сообщение от Fenex

Вы никак не сможете обращаться к DOM-дереву если его построение ещё не завершено.

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

Можно обращаться к уже отстроенным узлам.
Со стилем, да, наилучший метод.

[Predator199]

Добавил в баграунд

$("head").prepend('<style type="text/css">body { display: none !important; }</style>');

Вот только белое окно постоянно.

$.get(chrome.extension.getURL('/zxc.js'), 
    function(data) {
        var script = document.createElement("script");
        script.setAttribute("type", "text/javascript");
        script.innerHTML = data;
        document.getElementsByTagName("head")[0].appendChild(script);
		$("head").prepend('<style type="text/css">body { display: none !important; }</style>');
        document.getElementsByTagName("body")[0].setAttribute("onLoad", "main();");
    }
);

Почему он не удаляется. Нет страницы после того как страница подгрузилась...

Присвоил id, после чего попытался удалить.Не выходит...

[Fenex]

Присвоил id, после чего попытался удалить.Не выходит...

Удалением тэгов style\script из DOM вы не удалите стиль, вы удалите DOM-элемент.

У стилей нет операции удаления, стили можно только применить к странице. Соответственно, "удаление" - это применение стилей по-умолчанию, то есть нужно создать новый элемент <style>, вписывая туда новое правило, которое будет отображать <body>.

Кстати, неплохо будет сразу за собой подчищать этот "мусор", удаляя тэги <style>. К <script> это тоже относится. Ну во всяком случае я так делаю.

var s = document.createElement('style');
s.innerHTML = 'body {display: none;}';
document.head.appendChild(s); //apply
document.head.removeChild(s); //clean up

Можно обращаться к уже отстроенным узлам.

Может быть и можно, но я бы не рисковал. Обязательно будут какие-то тонкости и что-то пойдёт не так.

[Predator199]

Сообщение от Fenex

Удалением тэгов style\script из DOM вы не удалите стиль, вы удалите DOM-элемент.

У стилей нет операции удаления, стили можно только применить к странице. Соответственно, "удаление" - это применение стилей по-умолчанию, то есть нужно создать новый элемент <style>, вписывая туда новое правило, которое будет отображать <body>.

Кстати, неплохо будет сразу за собой подчищать этот "мусор", удаляя тэги <style>. К <script> это тоже относится. Ну во всяком случае я так делаю.

var s = document.createElement('style');
s.innerHTML = 'body {display: none;}';
document.head.appendChild(s); //apply
document.head.removeChild(s); //clean up

Может быть и можно, но я бы не рисковал. Обязательно будут какие-то тонкости и что-то пойдёт не так.

Я так и не понял, что и как правильно мне в баграунде прописать. Вроде бы работает скрипт. Но после того как страница подгрузится. Выдает(Uncaught TypeError: Cannot call method 'setAttribute' of undefined )

Как правильно ваш код вписать в баграунд?