Как выполнить код javascript в браузере?
Подскажите способ запуска кода javascript в браузере на какой-либо загруженной странице? Пробовали искать в поиске, но всё время выдаются результаты двух видов: или как включить javascript в браузере, или как встроить код javascript в html-страницу с помощью тегов .
Мне же нужно другое. Допустим, загружена какая-то страница в окне браузера, и мне нужно выполнить какие-то манипуляции с текущими DOM-элементами. Ну, например, составить список адресов страниц всех друзей в соцсети (когда их тысячи) или по очереди выйти из всех групп, короче подобные задачи. Хотелось бы найти какое-то расширение для какого-н. популярного браузера, чтобы работало примерно так: загрузил в окно нужную страницу, потом открыл окошко расширения, скопировал туда код, запустил, и этот код отработал бы, используя DOM-элементы загруженной в браузер страницы.
Вроде как-то в консоли браузера код js можно выполнять. Как это сделать? При таком выполнении можно работать с DOM загруженной страницы? Куда код вставлять (какие кнопочки нажимать)?
Сейчас эту проблему решаю с помощью 8-й версии imacros-а, но браузеры, которые её поддерживают, уже очень старые, скоро совсем перестанут работать с современными соцсетями. А новые полноценные версии imacros-а платные.
Существуют ли бесплатные расширения для описанного способа запуска javascript кода на странице? Чтобы куда-то скопировать свою javascript-программу, и она работала бы с элементами присутствующей в окне страницы? Или, может, это можно как-то сделать штатными средствами браузера?
- Вопрос задан более трёх лет назад
- 20203 просмотра
Внешние скрипты, порядок исполнения
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Более новая информация по этой теме находится на странице https://learn.javascript.ru/script-async-defer.
Если JavaScript-кода много – его выносят в отдельный файл, который подключается в HTML:
Здесь /path/to/script.js – это абсолютный путь к файлу, содержащему скрипт (из корня сайта).
Браузер сам скачает скрипт и выполнит.
Можно указать и полный URL, например:
Вы также можете использовать путь относительно текущей страницы. Например, src=»https://learn.javascript.ru/lodash.js» обозначает файл из текущей директории.
Чтобы подключить несколько скриптов, используйте несколько тегов:
На заметку:
Как правило, в HTML пишут только самые простые скрипты, а сложные выносят в отдельный файл.
Браузер скачает его только первый раз и в дальнейшем, при правильной настройке сервера, будет брать из своего кеша.
Благодаря этому один и тот же большой скрипт, содержащий, к примеру, библиотеку функций, может использоваться на разных страницах без полной перезагрузки с сервера.
Если указан атрибут src , то содержимое тега игнорируется.
В одном теге SCRIPT нельзя одновременно подключить внешний скрипт и указать код.
Вот так не сработает:
Нужно выбрать: либо SCRIPT идёт с src , либо содержит код. Тег выше следует разбить на два: один – с src , другой – с кодом, вот так:
Асинхронные скрипты: defer/async
Браузер загружает и отображает HTML постепенно. Особенно это заметно при медленном интернет-соединении: браузер не ждёт, пока страница загрузится целиком, а показывает ту часть, которую успел загрузить.
Если браузер видит тег , то он по стандарту обязан сначала выполнить его, а потом показать оставшуюся часть страницы.
Например, в примере ниже – пока все кролики не будут посчитаны – нижний
не будет показан:
Начинаем считать:
Кролики посчитаны!
Такое поведение называют «синхронным». Как правило, оно вполне нормально, но есть важное следствие.
Если скрипт – внешний, то пока браузер не выполнит его, он не покажет часть страницы под ним.
То есть, в таком документе, пока не загрузится и не выполнится big.js , содержимое будет скрыто:
Этот текст не будет показан, пока браузер не выполнит big.js. И здесь вопрос – действительно ли мы этого хотим? То есть, действительно ли оставшуюся часть страницы нельзя показывать до загрузки скрипта?
Есть ситуации, когда мы не только НЕ хотим такой задержки, но она даже опасна.
Например, если мы подключаем внешний скрипт, который показывает рекламу или вставляет счётчик посещений, а затем идёт наша страница. Конечно, неправильно, что пока счётчик или реклама не подгрузятся – оставшаяся часть страницы не показывается. Счётчик посещений не должен никак задерживать отображение страницы сайта. Реклама тоже не должна тормозить сайт и нарушать его функциональность.
А что, если сервер, с которого загружается внешний скрипт, перегружен? Посетитель в этом случае может ждать очень долго!
Вот пример, с подобным скриптом (стоит искусственная задержка загрузки):
Важная информация не покажется, пока не загрузится скрипт.
. Важная информация!
Можно поставить все подобные скрипты в конец страницы – это уменьшит проблему, но не избавит от неё полностью, если скриптов несколько. Допустим, в конце страницы 3 скрипта, и первый из них тормозит – получается, другие два его будут ждать – тоже нехорошо.
Кроме того, браузер дойдёт до скриптов, расположенных в конце страницы, они начнут грузиться только тогда, когда вся страница загрузится. А это не всегда правильно. Например, счётчик посещений наиболее точно сработает, если загрузить его пораньше.
Поэтому «расположить скрипты внизу» – не лучший выход.
Кардинально решить эту проблему помогут атрибуты async или defer :
Поддерживается всеми браузерами, кроме IE9-. Скрипт выполняется полностью асинхронно. То есть, при обнаружении браузер не останавливает обработку страницы, а спокойно работает дальше. Когда скрипт будет загружен – он выполнится.
Поддерживается всеми браузерами, включая самые старые IE. Скрипт также выполняется асинхронно, не заставляет ждать страницу, но есть два отличия от async .
Первое – браузер гарантирует, что относительный порядок скриптов с defer будет сохранён.
То есть, в таком коде (с async ) первым сработает тот скрипт, который раньше загрузится:
А в таком коде (с defer ) первым сработает всегда 1.js , а скрипт 2.js , даже если загрузился раньше, будет его ждать.
Поэтому атрибут defer используют в тех случаях, когда второй скрипт 2.js зависит от первого 1.js , к примеру – использует что-то, описанное первым скриптом.
Второе отличие – скрипт с defer сработает, когда весь HTML-документ будет обработан браузером.
Например, если документ достаточно большой…
Много много много букв
…То скрипт async.js выполнится, как только загрузится – возможно, до того, как весь документ готов. А defer.js подождёт готовности всего документа.
Это бывает удобно, когда мы в скрипте хотим работать с документом, и должны быть уверены, что он полностью получен.
async вместе с defer
При одновременном указании async и defer в современных браузерах будет использован только async , в IE9- – только defer (не понимает async ).
Атрибуты async/defer – только для внешних скриптов
Атрибуты async/defer работают только в том случае, если назначены на внешние скрипты, т.е. имеющие src .
При попытке назначить их на обычные скрипты , они будут проигнорированы.
Тот же пример с async :
Важная информация теперь не ждёт, пока загрузится скрипт.
. Важная информация!
При запуске вы увидите, что вся страница отобразилась тут же, а alert из внешнего скрипта появится позже, когда загрузится скрипт.
Эти атрибуты давно «в ходу»
Большинство современных систем рекламы и счётчиков знают про эти атрибуты и используют их.
Перед вставкой внешнего тега понимающий программист всегда проверит, есть ли у него подобный атрибут. Иначе медленный скрипт может задержать загрузку страницы.
Забегая вперёд
Для продвинутого читателя, который знает, что теги можно добавлять на страницу в любой момент при помощи самого javascript, заметим, что скрипты, добавленные таким образом, ведут себя так же, как async . То есть, выполняются как только загрузятся, без сохранения относительного порядка.
Если же нужно сохранить порядок выполнения, то есть добавить несколько скриптов, которые выполнятся строго один за другим, то используется свойство script.async = false .
Выглядит это примерно так:
function addScript(src) < var script = document.createElement('script'); script.src = src; script.async = false; // чтобы гарантировать порядок document.head.appendChild(script); >addScript('1.js'); // загружаться эти скрипты начнут сразу addScript('2.js'); // выполнятся, как только загрузятся addScript('3.js'); // но, гарантированно, в порядке 1 -> 2 -> 3Более подробно работу со страницей мы разберём во второй части учебника.
Итого
- Скрипты вставляются на страницу как текст в теге , либо как внешний файл через
- Специальные атрибуты async и defer используются для того, чтобы пока грузится внешний скрипт – браузер показал остальную (следующую за ним) часть страницы. Без них этого не происходит.
- Разница между async и defer : атрибут defer сохраняет относительную последовательность скриптов, а async – нет. Кроме того, defer всегда ждёт, пока весь HTML-документ будет готов, а async – нет.
Очень важно не только читать учебник, но делать что-то самостоятельно.
Решите задачки, чтобы удостовериться, что вы всё правильно поняли.
Задачи
Какой скрипт выполнится первым?
важность: 4
В примере ниже подключены два скрипта small.js и big.js .
Если предположить, что small.js загружается гораздо быстрее, чем big.js – какой выполнится первым?
Как выполнить скрипт, в той вкладке браузера в которой мы находимся, из popup меню , расширения
Как выполнить скрипт, в той вкладке браузера в которой мы находимся, из popup меню , расширения? Когда я нажимаю на расширение, открывается попап меню, там есть кнопка, которая вызывает скрипт. Но, этот скрипт должен выполняться на той странице в которой мы находимся, а не в popup.html . Как так сделать? Если я этот скрипт через консоль вставляю, все отрабатывает. То есть как получить доступ к странице что бы там можно было выполнить скрипт в её окружении? У меня там ratiobutton (на веб-старницы к которой будет применяться плагин) и хочу их просто включать через скрипт. вот мой манифест
< "name": "test", "version": "2", "manifest_version": 2, "description": "Test!", "icons": < "16" : "images/GB-19.png", "48" : "images/GB-48.png", "128" : "images/GB-128.png" >, "browser_action": < "default_icon": "images/GB-19.png", "default_title": "TestExam", "default_popup": "popup.html" >, "permissions": ["tabs","activeTab"] >
UniversityExam a b c d e f g h
Отслеживать
задан 7 янв 2016 в 16:56
492 7 7 серебряных знаков 21 21 бронзовый знак
popup не доступна текущая страница ни в каком виде. Вам надо сделать content script, который будет загружен на этой странице и общаться с этим скриптом через сообщения (см. chrome.runtine.onMessage, chrome.runtime.sendMessage, chrome.tabs.sendMessage) Из контент скрипта вы получите доступ к текущему document таба на котором он загрузился, но при этом не получите доступ к JS коду самой страницы, но вот это последнее ограничение в принципе обойти можно, только обычно не нужно
7 янв 2016 в 17:20
Mike А Как? Что то у меня с попала не получается обзаться через эти сообщения.
Установка собственных userscript в Opera и Google Chrome
В браузере Opera подключить собственные скрипты весьма просто. Создаем папку, закидываем туда свои .js файлы. Затем на вкладке нужного сайта кликаем правой кнопкой мыши, выбираем пункт меню настройки для сайта и выбираем вкладку скрипты. В пункте Папка пользовательских скриптов JavaScript находим созданную папку. Вот и все. Скрипты автоматически будут загружены для соответствующем сайте. Единственное, что нужно помнить — это порядок их загрузки. Опыт показывает, что скрипты загружаются в алфавитном порядке. К примеру jquery.js будет загружен раньше чем user.js. Это нужно помнить, когда подключаете jQuery, если его еще нет ( да, Вы не поверите, но есть еще сайты без jQuery ). Еще один тонкий момент: скрипты будут загружены для всех страниц сайта, в том числе и для всех фреймов. И соответственно будут выполняться для всех фреймов. Чтобы скрипт выполнялся только в главном фрейме, я делаю так
if( !self.parent.frames.length )< // тут код >
Подключить userscript в Хроме, не намного сложнее. Он устанавливается, как обычное расширение и требует директив для выполнения в начале скрипта. К примеру таких
// ==UserScript== // @name myUserJS // @description Мой самый первый юзерскрипт // @author Leroy // @license MIT // @version 1.3 // @include http://yandex.ru/* // ==/UserScript== if( !self.parent.frames.length )
тут важны две строки @version и @include
@include — показывает на каком сайте запускать скрипт. А @version необходимо каждый раз менять, при обновлении скрипты, иначе будет вызываться кешированная версия расширения.
Чтобы установить скрипт нажимаем Настройки > Инструменты > Расширения. Теперь просто перетаскиваем сюда свои скрипты и и соглашаемся с установкой.
Тут тоже есть особенность: скрипты копируются Хромом, поэтому чтобы обновить нужно установить их заново. Не забывая сменить @version
Зачем Вам все это может понадобиться? Пища для размышления: все больше крупных сайтов делают проверку на выполнение js браузером, парсить их curl-ом уже не так просто, как раньше. Приходится изобретать более сложные способы парсинга. Вот тут могут пригодится эти скрипты. Если кому интересно, могу написать статейку, как писать парсеры на основе userscript. Одна статья по этой тематике уже есть, но в ней используются Расширения Chrome для написания парсеров. Здесь же можно добиться максимальной эмуляции человеческого поведения, так сказать написать свой human emulator.
Userscripts можно использовать и для раскрутки своего сайта. К примеру установка ряда скриптов будет добавлять некий функционал Вашему ресурсу. Пример надуманный, но также есть над чем поразмыслить.
Думаю такие плюшки положительно повлияют на seo продвижение сайта. Заказать поисковое продвижение сайтов можно на специальных ресурсах, а вот собственную раскрутку нужно делать своими руками.
Спасибо за внимание.
Оставлять комментарии могут только зарегистрированные пользователи