Как выполнить javascript в браузере

Как выполнить код javascript в браузере?

Подскажите способ запуска кода javascript в браузере на какой-либо загруженной странице? Пробовали искать в поиске, но всё время выдаются результаты двух видов: или как включить javascript в браузере, или как встроить код javascript в html-страницу с помощью тегов .

Мне же нужно другое. Допустим, загружена какая-то страница в окне браузера, и мне нужно выполнить какие-то манипуляции с текущими DOM-элементами. Ну, например, составить список адресов страниц всех друзей в соцсети (когда их тысячи) или по очереди выйти из всех групп, короче подобные задачи. Хотелось бы найти какое-то расширение для какого-н. популярного браузера, чтобы работало примерно так: загрузил в окно нужную страницу, потом открыл окошко расширения, скопировал туда код, запустил, и этот код отработал бы, используя DOM-элементы загруженной в браузер страницы.

Вроде как-то в консоли браузера код js можно выполнять. Как это сделать? При таком выполнении можно работать с DOM загруженной страницы? Куда код вставлять (какие кнопочки нажимать)?

Сейчас эту проблему решаю с помощью 8-й версии imacros-а, но браузеры, которые её поддерживают, уже очень старые, скоро совсем перестанут работать с современными соцсетями. А новые полноценные версии imacros-а платные.

Существуют ли бесплатные расширения для описанного способа запуска javascript кода на странице? Чтобы куда-то скопировать свою javascript-программу, и она работала бы с элементами присутствующей в окне страницы? Или, может, это можно как-то сделать штатными средствами браузера?

• Вопрос задан более трёх лет назад
• 19219 просмотров

Как запустить JS-код

JavaScript — популярный язык программирования с широким спектром применения. Раньше его использовали в основном для интерактивности веб-страницам: например, для анимации или валидации форм. Сейчас же JS используется еще и во многих других областях: разработка серверных, мобильных приложений и так далее.

Из-за широкого спектра применения JavaScript можно запустить несколькими способами:

• через вкладку «Консоль» в веб-браузере;
• с помощью Node.js
• с помощью веб-страницы.

Через вкладку «Консоль» в браузере

В большинстве современных браузеров уже есть встроенные механизмы JavaScript, поэтому запустить код на JS можно прямо в браузере. Вот, как это сделать:

Шаг 1. Откройте любой браузер (мы будем использовать Google Chrome).

Шаг 2. Откройте инструменты разработчика. Для этого щелкните правой кнопкой мыши на пустой области и выберите пункт «Просмотреть код» (Inspect). Горячая клавиша: F12.

Шаг 3. В инструментах разработчика перейдите на вкладку «Консоль» (Console). Здесь уже можно писать код на JavaScript. Попробуйте ввести console.log(«Hello, world!») и нажмите Enter, чтобы запустить код.

С помощью Node.js

Node — среда выполнения кода JavaScript вне браузера. Вот, как запустить JS с помощью Node.js:

Шаг 1. Установите последнюю версию Node.js.

Шаг 2. Установите IDE или текстовый редактор. Мы будем использовать Visual Studio Code.

Шаг 3. В VS Code перейдите в Файл > Новый файл и напишите код на JS. Сохраните файл с расширением .js. Мы написали программу, которая выводит на экран строку «Hello, world!», поэтому файл будет называться helloworld.js.

Шаг 4. Откройте терминал/командную строку, перейдите к расположению файла (используйте команду cd ). Введите node helloworld.js и нажмите Enter. Вывод появится в терминале.

Примечание. JavaScript-код можно написать и запустить непосредственно в терминале. Для этого просто введите node и нажмите Enter.

С помощью веб-страницы

JavaScript изначально создавали для того, чтобы сделать веб-страницы интерактивными, поэтому JavaScript и HTML идут рука об руку. Вот, как запустить код на JS с помощью веб-страницы:

Шаг 1. Откройте VS Code. Перейдите в Файл > Новый файл. Сохраните файл с расширением .html. У нас это будет main.html.

Шаг 2. Скопируйте doctype, расположенный ниже. Это необходимый для запуска HTML-страницы код. Сохраните скопированный текст в файле.

Шаг 3. Аналогично создайте файл с расширением .js. Напишите в файле следующий JS-код и сохраните его. У нас это будет helloworld.js.

console.log("Hello, world!");

Шаг 4. Вернитесь к файлу main.html и на 11 строке впишите название JS-файла. В нашем случае это будет выглядеть так:

Шаг 5. Откройте main.html с помощью браузера.

Шаг 6. Чтобы проверить, запустился ли ваш JS-код, щелкните правой кнопкой мыши в свободной области, нажмите «Просмотреть код» и перейдите на вкладку «Консоль».

Теперь, когда вы знаете, как запустить JavaScript, приступим к изучению основ JS.

СodeСhick.io — простой и эффективный способ изучения программирования.

2023 © ООО «Алгоритмы и практика»

Запуск фрагментов Кода JavaScript на любой веб-странице

Если вы несколько раз выполняете один и тот же код в консоли , попробуйте сохранить его в виде фрагмента кода. Фрагменты кода — это скрипты, созданные в средстве «Источники «. Фрагменты кода имеют доступ к контексту JavaScript веб-страницы, и вы можете запускать фрагменты на любой веб-странице. Параметры безопасности большинства веб-страниц блокируют загрузку других скриптов в фрагментах. По этой причине необходимо включить весь код в один файл.

Фрагменты кода являются альтернативой закладкам с той разницей, что фрагменты выполняются только в средствах разработки и не ограничиваются разрешенной длиной URL-адреса.

Использование фрагментов кода — отличный способ изменить несколько вещей на сторонней веб-странице. Изменения кода в фрагментах кода добавляются на текущую веб-страницу и выполняются в том же контексте. Дополнительные сведения об изменении существующего кода веб-страницы см. в разделе Переопределения.

На следующем рисунке показана домашняя страница DevTools слева и некоторый фрагмент исходного кода справа.

Веб-страница перед запуском фрагмента кода:

Исходный код фрагмента с веб-страницы перед запуском фрагмента кода:

console.log('Hello, Snippets!'); document.body.innerHTML = ''; var p = document.createElement('p'); p.textContent = 'Hello, Snippets!'; document.body.appendChild(p); 

На следующем рисунке веб-страница отображается после запуска фрагмента кода. Откроется консольный ящик , чтобы отобразить сообщение Hello, Snippets! , которое записывает фрагмент кода, и содержимое веб-страницы полностью изменяется:

Открытие вкладки «Фрагменты»

На вкладке Фрагменты в области Навигатор слева отображается список фрагментов кода. Если вы хотите изменить фрагмент кода, его необходимо открыть на вкладке Фрагменты :

Открытие вкладки «Фрагменты» с помощью мыши

1. Перейдите на вкладку Источники . Появится средство Источники :
2. В области Навигатор (слева) выберите вкладку Фрагменты кода. Чтобы получить доступ к параметру Фрагменты кода , может потребоваться нажать кнопку Дополнительные вкладки ().

Откройте вкладку «Фрагменты» с помощью меню «Команда»

1. Выберите все элементы в средствах разработки, чтобы сосредоточиться на средствах разработки.
2. Нажмите клавиши CTRL+SHIFT+P (Windows, Linux) или COMMAND+SHIFT+P (macOS), чтобы открыть меню Command.
3. Введите Фрагменты, выберите Показать фрагменты и нажмите клавишу ВВОД , чтобы выполнить команду:

Создание фрагментов кода

Создание фрагмента с помощью средства «Источники»

1. Откройте вкладку Фрагменты кода.
2. Щелкните Новый фрагмент кода.
3. Введите имя фрагмента кода и нажмите клавишу ВВОД:

Создание фрагмента кода с помощью меню «Команда»

1. Сфокусируйте курсор где-нибудь в Средствах разработки.
2. Нажмите клавиши CTRL+SHIFT+P (Windows, Linux) или COMMAND+SHIFT+P (macOS), чтобы открыть меню Command.
3. Начните вводить фрагмент кода, выберите Создать новый фрагмент кода и нажмите клавишу ВВОД:

Сведения о переименовании нового фрагмента с пользовательским именем см. в статье Переименование фрагментов кода.

Изменение фрагментов кода

1. Откройте вкладку Фрагменты кода.
2. На вкладке Фрагменты выберите имя фрагмента кода, который требуется изменить. В редакторе кода откроется фрагмент кода:
3. Используйте редактор кода , чтобы добавить JavaScript в фрагмент кода.
4. Если рядом с именем фрагмента кода отображается звездочка, это означает, что у вас есть несохраняемый код. Нажмите клавиши CTRL+S (Windows, Linux) или COMMAND+S (macOS), чтобы сохранить:

Выполнение фрагментов кода

Запуск фрагмента из средства «Источники»

1. Откройте вкладку Фрагменты кода.
2. Щелкните имя фрагмента кода, который требуется запустить. В редакторе кода откроется фрагмент кода:
3. Щелкните Выполнить фрагмент кода ().

Выполнение фрагмента кода с помощью меню «Команда»

1. Сфокусируйте курсор где-нибудь в Средствах разработки.
2. Нажмите клавиши CTRL+SHIFT+P (Windows, Linux) или COMMAND+SHIFT+P (macOS), чтобы открыть меню Command.
3. > Удалите символ и введите символ !, за которым следует имя фрагмента кода, который вы хотите запустить:
4. Нажмите клавишу ВВОД , чтобы запустить фрагмент кода.

Переименование фрагментов

1. Откройте вкладку Фрагменты кода.
2. Щелкните правой кнопкой мыши имя фрагмента и выберите команду Переименовать.

Удаление фрагментов кода

1. Откройте вкладку Фрагменты кода.
2. Щелкните правой кнопкой мыши имя фрагмента и выберите команду Удалить.

Сохранение фрагментов кода

По умолчанию фрагменты доступны только в средствах разработки, но их также можно сохранить на диске.

1. Откройте вкладку Фрагменты кода.
2. Щелкните правой кнопкой мыши имя фрагмента и выберите команду Сохранить как.
3. При появлении запроса введите имя файла и расположение.

Части этой страницы являются изменениями, основанными на работе, созданной и совместно используемой Google и используемой в соответствии с условиями, описанными в международной лицензии Creative Commons Attribution 4.0. Исходная страница находится здесь и автор Kayce Basques (Технический писатель, Chrome DevTools & Lighthouse).

Эта работа лицензируется по международной лицензии Creative Commons Attribution 4.0.

Как выполнить скрипт, в той вкладке браузера в которой мы находимся, из 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"] > 

        
  
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 А Как? Что то у меня с попала не получается обзаться через эти сообщения.