Как встроить js в firefox wikipedia
Перейти к содержимому

Как встроить js в firefox wikipedia

  • автор:

Новый простой редактор JavaScript в Firefox

В только что вышедший Firefox 6 входит новый инструмент для веб-разработчиков: простой редактор JavaScript (прим. переводчика — по-английски он называется Scratchpad («блокнот»). Буду его так и называть, чтобы не писать каждый раз «простой редактор JavaScript».) Идея проста: браузер это отличное место для экспериментов с JavaScript. Большинство JS-разработчиков уже знают об этом и используют такие инструменты, как веб-консоль и командную строку Firebug, чтобы использовать преимущества единственной среды, которая точно знает, как выглядит веб-страница.

Веб-консоль оптимизирована для ввода одной строки кода за раз (подсказка: с помощью Shift+Enter можно ввести несколько строк). В Firebug есть кнопка, включающая многострочный режим ввода, но всё равно работа основана на поочерёдном и линейном выполнении кусков кода.

К Scratchpad это не относится. Он полностью отвергает подход «строка ввода — строка вывода». Это просто текстовый редактор, который умеет запускать JavaScript.

Используем Scratchpad

Scratchpad можно найти в меню «Веб-разработка». Выберите «Простой редактор JavaScript» в этом меню, и увидите окно текстового редактора. При запуске в нём появляются подсказки по использованию.

  1. Введите код
  2. Выделите какую-то его часть
  3. Выберите одну из трёх команд в контекстном меню или меню «Выполнить»:
    • Запустить
    • Исследовать
    • Отобразить

    Конечно, для них есть акселераторы, чтобы не было необходимости тянуться за мышкой.

«Запустить» просто выполняет выбранный код. Эту команду можно использовать для определения функций или запуска кода, который управляет страницей.

«Исследовать» выполняет код и открывает инспектор объектов на возвращённом значении.

Наконец, «отобразить» помещает результат выполнения кода в редактор. С помощью этой команды можно превратить редактор в калькулятор. Впрочем, полезнее будет её использовать для отслеживания результатов при проверке правильной работы страницы.

Замечу, кстати, что многие идеи Scratchpad происходят из сред Smalltalk. Тридцать лет прошло, а мы всё ещё его догоняем 🙂

Чтобы понять для себя, что такое Scratchpad, нужно увидеть его в действии. Либо запустите его сами, либо посмотрите видео Роба Кэмпбелла.

Пишем новый код в Scratchpad

Используем фрагменты кода

Об областях видимости

Как и веб-консоль, код в Scratchpad видит все переменные на странице, но переменные, определённые в Scratchpad, странице недоступны. Если вы хотите определить переменную (скажем, foo ), видимую JavaScript-коду страницы, можно присвоить её объекту window : window.foo = 1 .

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

Наконец, если работаете над самим Firefox или расширениями для него, можно дать Scratchpad доступ к внутренностям браузера. Для этого сделайте в about:config настройку devtools.chrome.enabled истинной и поменяйте «среду» в редакторе с «содержимого» на «браузер». Но если вы введёте какой-то код, из-за которого браузер начнёт посылать на Google+ демотиваторы — чур, я не виноват!

Планы на будущее

Scratchpad прост, и мы хотим это сохранить. Мы планируем несколько улучшений, которые появятся в ближайших версиях Firefox, но суть — «текстовый редактор, умеющий запускать JavaScript» — останется неизменной.

Мы ждём ваших отзывов о Scratchpad! Напишите нам в список рассылки dev-apps-firefox (прим. переводчика — по-английски), что вы думаете. Или начните участвовать в нашей работе и сделайте Scratchpad и другие инструменты для разработчиков ещё лучше.

Встраиваемый скрипт

Встраиваемый скрипт — это часть расширения, которая выполняется в контексте отдельной веб-страницы (в отличии от фоновых скриптов, выполняющихся в контексте целого браузера).

Фоновые скрипты имеют доступ ко всем методам WebExtension JavaScript APIs, но они не имеют доступа к контенту отдельных веб-страниц. Так что если вашему расширению необходимо взаимодействие с контентом веб-страницы, вам нужен встраиваемый скрипт.

Точно так же, как скрипты загружаемые веб-страницами, встраиваемый скрипт может читать и изменять контент веб-страницы, используя DOM API.

Встраиваемые скрипты имеют доступ только к небольшому подмножеству методов WebExtension API, но они могут взаимодействовать с фоновыми скриптами, используя систему передачи сообщений, таким образом опосредовано имея доступ ко всему WebExtension API.

Примечание: Обратите внимание, что встраивание скриптов блокируется на следующих доменах:

  • accounts-static.cdn.mozilla.net
  • accounts.firefox.com
  • addons.cdn.mozilla.net
  • addons.mozilla.org
  • api.accounts.firefox.com
  • content.cdn.mozilla.net
  • content.cdn.mozilla.net
  • discovery.addons.mozilla.org
  • input.mozilla.org
  • install.mozilla.org
  • oauth.accounts.firefox.com
  • profile.accounts.firefox.com
  • support.mozilla.org
  • sync.services.mozilla.com
  • testpilot.firefox.com

Если вы попытаетесь встроить скрипт на страницы, находящиеся на вышеперечисленных доменах, у вас ничего не выйдет, и веб-страница сделает запись о CSP ошибке.

По причине того, что список запрещённых доменов включает в себя addons.mozilla.org, пользователи, которые попытаются испытать ваше расширение прямо на странице загрузки, могут посчитать, что расширение не работает! В связи с этим вы могли бы предоставить им соответствующее предупреждение или onboarding page чтобы немедленно переадресовать их с addons.mozilla.org.

Примечание: Значения, определённые в глобальной области видимости встраиваемого скрипта с помощью var foo или window.foo = «bar» могут исчезать по причине бага 1408996.

Загрузка встраиваемого скрипта

Загрузка встраиваемых скриптов на веб-страницу происходит следующими тремя способами:

  1. Автоматическая загрузка скрипта на страницах с определёнными URL, объявленными при установке: используя content_scripts (en-US) ключ в manifest.json, вы можете запросить браузер загружать встраиваемый скрипт каждый раз, когда браузер загружает веб-страницу, чей URL совпадает с объявленными шаблонами.
  2. Автоматическая загрузка скрипта на страницах с определёнными URL, объявленными в момент работы расширения: используя contentScripts (en-US) API, вы можете запросить браузер загружать встраиваемый скрипт каждый раз, когда браузер загружает веб-страницу, чей URL совпадает с объявленными шаблонами. Это очень похоже на первый метод, но позволяет добавлять и удалять правила динамически во время работы расширения.
  3. Загрузка скрипта расширением в конкретную вкладку: используя tabs.executeScript() (en-US) API, вы можете загружать встраиваемые скрипты в определённые вкладки когда захотите: например, в ответ на нажатие пользователя на browser action.

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

Используя методы (1) и (2), вы можете загружать скрипты на страницы, чьи URL могут быть представлены, используя шаблон совпадения.

Используя метод (3), вы к тому же можете загружать скрипты на страницы вашего расширения, но вы не можете загружать скрипты на привилегированные страницы браузеры (например «about:debugging» или «about:addons»).

Условия работы встраиваемого скрипта

Доступ к DOM

Встраиваемые скрипты имеют доступ и могут изменять DOM на веб-странице, так же как и обычные скрипты. Так же они могут видеть любые изменения сделанные с DOM страничными скриптами.

При этом, встраиваемые скрипты имеют «чистое DOM представление». Это значит:

  • Встраиваемые скрипты не могут видеть JavaScript переменных, определённых страничными скриптами.
  • Если страничный скрипт переназначит встроенное свойство DOM, встраиваемый скрипт всё равно будет видеть его изначальное значение, а не переназначенное.

Например, рассмотрите эту веб-страницу:

Скрипт «page-script.js» делает следующее:

Теперь расширение загружает встраиваемый скрипт на страницу:

Те же самые правила применяются и наоборот: страничный скрипт не может видеть JavaScript свойств, добавленных встраиваемым скриптом.

Это означает, что встраиваемый скрипт может полагаться на то, что DOM свойства всегда будут вести себя предсказуемо, и не беспокоиться о том, что его переменные будут иметь конфликт с переменными из страничного скрипта.

Одно из последствий такого поведения состоит в том, что встраиваемый скрипт не будет иметь доступ к JavaScript библиотекам, загруженным страничным скриптом. Например, если веб-страница загружает jQuery, встраиваемый скрипт не сможет увидеть эту библиотеку.

Если встраиваемому скрипту необходимо использовать какую-либо JavaScript библиотеку, тогда эта библиотека должна быть загружена, тем же способом, как и встраиваемый скрипт вместе с ним:

Примечание: Firefox предоставляет некоторое API, позволяющее встраиваемому скрипту иметь доступ к JavaScript объектам, созданным страничным скриптом, и предоставлять свои собственные JavaScript объекты страничному скрипту.

Доступные WebExtension API

В дополнение стандартному DOM API, встраиваемый скрипт может использовать следующие методы WebExtension APIs:

Работа с XHR и Fetch

Встраиваемые скрипты могут делать запросы используя window.XMLHttpRequest и window.fetch() API.

Примечание: В Firefox, запросы, совершаемые из встраиваемого скрипта (например, используя fetch()) происходят в контексте расширения, так что вам необходимо предоставлять полный URL для доступа к контенту страниц. В Chrome, эти запросы совершаются в контексте страницы, так что URL может быть относительным, например /api будет трансформирован в https://[current page URL]/api .

Встраиваемый скрипт имеет точно такие же кросс-доменные привилегии, как и всё остальное расширение: так что если расширение запросило кросс-доменный доступ на какой-либо домен используя permissions ключ в manifest.json, тогда его встраиваемый скрипт тоже будет иметь доступ к этому домену.

Это достигается, предоставляя встраиваемому скрипту более привилегированные XHR and fetch объекты. Что имеет побочный эффект, связанный с отсутствием Origin и Referer заголовков, которые имел бы запрос, выполняемый из страничного скрипта. Зачастую это предпочитаемо, для того чтобы предотвратить раскрытие кросс-доменной натуры запроса. Начиная с версии 58 и дальше, расширения, которым необходимо выполнять запросы, которые должны выглядеть будто они отправлены встраиваемым скриптом, могут использовать content.XMLHttpRequest и content.fetch() . Кросс-браузерные расширения должны проверять присутствие этих методов.

Взаимодействие с фоновыми скриптами

Хотя встраиваемые скрипты не могут напрямую использовать большинство методов из WebExtension APIs, они могут взаимодействовать с фоновыми скриптами расширения, используя систему сообщений, и таким образом могут опосредованно иметь доступ к тем же самым API, что и фоновые скрипты.

Существует два способа общения между фоновым и встраиваемым скриптами: вы можете посылать одиночные сообщения, ожидая необязательного ответа, или вы можете установить долгосрочное соединение на двух сторонах и использовать это соединение для обмена сообщениями.

Одиночные сообщения

Для отправки одиночного сообщения и ожидания необязательного ответа, вы можете использовать следующее API:

Во встраиваемом скрипте В фоновом скрипте
Отправка сообщения browser.runtime.sendMessage() (en-US) browser.tabs.sendMessage() (en-US)
Получение сообщения browser.runtime.onMessage (en-US) browser.runtime.onMessage (en-US)

Например, представьте встраиваемый скрипт, который обрабатывает нажатие левой кнопки мыши на веб-странице.

Если нажатие было произведено по ссылке, встраиваемый скрипт отправляет сообщение фоновому скрипту со значение URL в ссылке:

Фоновый скрипт ожидает эти сообщения и, при их получении, отображает уведомления, используя notifications (en-US) API:

(Этот пример кода частично взят из notify-link-clicks-i18n примера на GitHub.)

Обмен сообщениями через постоянное соединение

Отправка одиночных сообщений может стать довольно обременительной, если вы пересылаете много сообщений между встраиваемым и фоновым скриптами. Альтернативное решение в этой ситуации будет установить постоянное соединение между двумя скриптами, и использовать его для обмена сообщениями.

Каждая из сторон имеет runtime.Port (en-US) объект, который они могут использовать для обмена сообщениями.

Для создания постоянного соединения:

  • Одна из сторон должна ждать соединений, используя runtime.onConnect (en-US)
  • Другая сторона должна вызвать:
      (при соединении со встраиваемым скриптом); или (при соединении с фоновым скриптом).

    Результатом вызова этих методов будет возвращение runtime.Port (en-US) объекта.

      методу передаётся аргумент, являющийся собственным портом этого скрипта, runtime.Port объект.

    Как только обе стороны имеют порт, они могут:

    • отправлять сообщения, используя runtime.Port.postMessage() , и
    • получать сообщения используя runtime.Port.onMessage()

    Например, сразу после загрузки, нижерасположенный встраиваемый скрипт:

    • Соединяется с фоновым скриптом
    • Сохраняет Port в переменную myPort
    • Начинает ожидать и записывать сообщения приходящие на myPort
    • Использует myPort для отправки сообщений на фоновый скрипт, когда пользователь нажимает левую кнопку мыши на документе

    Соответствующий фоновый скрипт:

    • Ожидает попытки соединения от встраиваемого скрипта
    • Когда он получает эту попытку соединения:
      • сохраняет свой порт в переменную portFromCS
      • отправляет сообщение встроенному скрипту, используя этот порт
      • начинает ожидать сообщений, приходящих на порт, и записывать их
      Несколько встраиваемых скриптов

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

      Взаимодействие с веб-страницей

      Хотя по умолчанию встраиваемые скрипты не имеют доступ к объектам, которые созданы страничными скриптами, они могут взаимодействовать со страничными скриптами, используя window.postMessage и window.addEventListener API.

      Для просмотра законченного и полностью рабочего примера, посетите эту страницу на GitHub и следуйте инструкциям.

      Предупреждение: Заметьте, при взаимодействии с непроверенными страницами этим способом, вам нужно быть очень осторожными . Расширения имеют возможность запускать привилегированный код, который может обладать серьёзными возможностями, и вредоносные веб-страницы легко могут обмануть ваше расширение, ради доступа к этим возможностям.

      Как простейший пример, представим встраиваемый скрипт, который получает сообщение от веб-страницы и делает что-то вроде этого:

      Теперь страничный скрипт может запускать любой код со всеми привилегиями встраиваемого скрипта.

      Использование eval() во встраиваемых скриптах

      В Chrome, eval() всегда выполняет код в контексте встраиваемого скрипта, а не в контексте веб-страницы.

      • Если вы вызываете eval() , код выполняется в контексте встраиваемого скрипта.
      • Если вы вызываете window.eval() , код выполняется в контексте страничного скрипта.

      Например, рассмотрите этот встраиваемый скрипт:

      Этот код создаёт переменные x and y , используя window.eval() и eval() , затем записывает их значения, и отправляет сообщение на веб-страницу.

      Получая сообщение, страничный скрипт записывает те же самые переменные:

      В Chrome, в консоли будут записаны следующие строки:

      В Firefox, будут записаны следующие строки:

      Предупреждение: Будьте очень осторожны, запуская код в контексте страничного скрипта. Окружение страничного скрипта может контролироваться потенциально зловредным веб-страницей, которая может переопределить объекты, с которыми вы взаимодействуете, так что их поведение станет совершенно непредсказуемым:

      Как встроить js в firefox wikipedia

      Встраиваемый скрипт — это часть расширения, которая выполняется в контексте отдельной веб-страницы (в отличии от фоновых скриптов, выполняющихся в контексте целого браузера).

      Фоновые скрипты имеют доступ ко всем методам WebExtension JavaScript APIs, но они не имеют доступа к контенту отдельных веб-страниц. Так что если вашему расширению необходимо взаимодействие с контентом веб-страницы, вам нужен встраиваемый скрипт.

      Точно так же, как скрипты загружаемые веб-страницами, встраиваемый скрипт может читать и изменять контент веб-страницы, используя DOM API.

      Встраиваемые скрипты имеют доступ только к небольшому подмножеству методов WebExtension API, но они могут взаимодействовать с фоновыми скриптами, используя систему передачи сообщений, таким образом опосредовано имея доступ ко всему WebExtension API.

      Примечание: Обратите внимание, что встраивание скриптов блокируется на следующих доменах:

      • accounts-static.cdn.mozilla.net
      • accounts.firefox.com
      • addons.cdn.mozilla.net
      • addons.mozilla.org
      • api.accounts.firefox.com
      • content.cdn.mozilla.net
      • content.cdn.mozilla.net
      • discovery.addons.mozilla.org
      • input.mozilla.org
      • install.mozilla.org
      • oauth.accounts.firefox.com
      • profile.accounts.firefox.com
      • support.mozilla.org
      • sync.services.mozilla.com
      • testpilot.firefox.com

      Если вы попытаетесь встроить скрипт на страницы, находящиеся на вышеперечисленных доменах, у вас ничего не выйдет, и веб-страница сделает запись о CSP ошибке.

      По причине того, что список запрещённых доменов включает в себя addons.mozilla.org, пользователи, которые попытаются испытать ваше расширение прямо на странице загрузки, могут посчитать, что расширение не работает! В связи с этим вы могли бы предоставить им соответствующее предупреждение или onboarding page чтобы немедленно переадресовать их с addons.mozilla.org.

      Примечание: Значения, определённые в глобальной области видимости встраиваемого скрипта с помощью var foo или window.foo = «bar» могут исчезать по причине бага 1408996.

      Загрузка встраиваемого скрипта

      Загрузка встраиваемых скриптов на веб-страницу происходит следующими тремя способами:

      1. Автоматическая загрузка скрипта на страницах с определёнными URL, объявленными при установке: используя content_scripts (en-US) ключ в manifest.json, вы можете запросить браузер загружать встраиваемый скрипт каждый раз, когда браузер загружает веб-страницу, чей URL совпадает с объявленными шаблонами.
      2. Автоматическая загрузка скрипта на страницах с определёнными URL, объявленными в момент работы расширения: используя contentScripts (en-US) API, вы можете запросить браузер загружать встраиваемый скрипт каждый раз, когда браузер загружает веб-страницу, чей URL совпадает с объявленными шаблонами. Это очень похоже на первый метод, но позволяет добавлять и удалять правила динамически во время работы расширения.
      3. Загрузка скрипта расширением в конкретную вкладку: используя tabs.executeScript() (en-US) API, вы можете загружать встраиваемые скрипты в определённые вкладки когда захотите: например, в ответ на нажатие пользователя на browser action.

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

      Используя методы (1) и (2), вы можете загружать скрипты на страницы, чьи URL могут быть представлены, используя шаблон совпадения.

      Используя метод (3), вы к тому же можете загружать скрипты на страницы вашего расширения, но вы не можете загружать скрипты на привилегированные страницы браузеры (например «about:debugging» или «about:addons»).

      Условия работы встраиваемого скрипта

      Доступ к DOM

      Встраиваемые скрипты имеют доступ и могут изменять DOM на веб-странице, так же как и обычные скрипты. Так же они могут видеть любые изменения сделанные с DOM страничными скриптами.

      При этом, встраиваемые скрипты имеют «чистое DOM представление». Это значит:

      • Встраиваемые скрипты не могут видеть JavaScript переменных, определённых страничными скриптами.
      • Если страничный скрипт переназначит встроенное свойство DOM, встраиваемый скрипт всё равно будет видеть его изначальное значение, а не переназначенное.

      Например, рассмотрите эту веб-страницу:

      Скрипт «page-script.js» делает следующее:

      Теперь расширение загружает встраиваемый скрипт на страницу:

      Те же самые правила применяются и наоборот: страничный скрипт не может видеть JavaScript свойств, добавленных встраиваемым скриптом.

      Это означает, что встраиваемый скрипт может полагаться на то, что DOM свойства всегда будут вести себя предсказуемо, и не беспокоиться о том, что его переменные будут иметь конфликт с переменными из страничного скрипта.

      Одно из последствий такого поведения состоит в том, что встраиваемый скрипт не будет иметь доступ к JavaScript библиотекам, загруженным страничным скриптом. Например, если веб-страница загружает jQuery, встраиваемый скрипт не сможет увидеть эту библиотеку.

      Если встраиваемому скрипту необходимо использовать какую-либо JavaScript библиотеку, тогда эта библиотека должна быть загружена, тем же способом, как и встраиваемый скрипт вместе с ним:

      Примечание: Firefox предоставляет некоторое API, позволяющее встраиваемому скрипту иметь доступ к JavaScript объектам, созданным страничным скриптом, и предоставлять свои собственные JavaScript объекты страничному скрипту.

      Доступные WebExtension API

      В дополнение стандартному DOM API, встраиваемый скрипт может использовать следующие методы WebExtension APIs:

      Работа с XHR и Fetch

      Встраиваемые скрипты могут делать запросы используя window.XMLHttpRequest и window.fetch() API.

      Примечание: В Firefox, запросы, совершаемые из встраиваемого скрипта (например, используя fetch()) происходят в контексте расширения, так что вам необходимо предоставлять полный URL для доступа к контенту страниц. В Chrome, эти запросы совершаются в контексте страницы, так что URL может быть относительным, например /api будет трансформирован в https://[current page URL]/api .

      Встраиваемый скрипт имеет точно такие же кросс-доменные привилегии, как и всё остальное расширение: так что если расширение запросило кросс-доменный доступ на какой-либо домен используя permissions ключ в manifest.json, тогда его встраиваемый скрипт тоже будет иметь доступ к этому домену.

      Это достигается, предоставляя встраиваемому скрипту более привилегированные XHR and fetch объекты. Что имеет побочный эффект, связанный с отсутствием Origin и Referer заголовков, которые имел бы запрос, выполняемый из страничного скрипта. Зачастую это предпочитаемо, для того чтобы предотвратить раскрытие кросс-доменной натуры запроса. Начиная с версии 58 и дальше, расширения, которым необходимо выполнять запросы, которые должны выглядеть будто они отправлены встраиваемым скриптом, могут использовать content.XMLHttpRequest и content.fetch() . Кросс-браузерные расширения должны проверять присутствие этих методов.

      Взаимодействие с фоновыми скриптами

      Хотя встраиваемые скрипты не могут напрямую использовать большинство методов из WebExtension APIs, они могут взаимодействовать с фоновыми скриптами расширения, используя систему сообщений, и таким образом могут опосредованно иметь доступ к тем же самым API, что и фоновые скрипты.

      Существует два способа общения между фоновым и встраиваемым скриптами: вы можете посылать одиночные сообщения, ожидая необязательного ответа, или вы можете установить долгосрочное соединение на двух сторонах и использовать это соединение для обмена сообщениями.

      Одиночные сообщения

      Для отправки одиночного сообщения и ожидания необязательного ответа, вы можете использовать следующее API:

      Во встраиваемом скрипте В фоновом скрипте
      Отправка сообщения browser.runtime.sendMessage() (en-US) browser.tabs.sendMessage() (en-US)
      Получение сообщения browser.runtime.onMessage (en-US) browser.runtime.onMessage (en-US)

      Например, представьте встраиваемый скрипт, который обрабатывает нажатие левой кнопки мыши на веб-странице.

      Если нажатие было произведено по ссылке, встраиваемый скрипт отправляет сообщение фоновому скрипту со значение URL в ссылке:

      Фоновый скрипт ожидает эти сообщения и, при их получении, отображает уведомления, используя notifications (en-US) API:

      (Этот пример кода частично взят из notify-link-clicks-i18n примера на GitHub.)

      Обмен сообщениями через постоянное соединение

      Отправка одиночных сообщений может стать довольно обременительной, если вы пересылаете много сообщений между встраиваемым и фоновым скриптами. Альтернативное решение в этой ситуации будет установить постоянное соединение между двумя скриптами, и использовать его для обмена сообщениями.

      Каждая из сторон имеет runtime.Port (en-US) объект, который они могут использовать для обмена сообщениями.

      Для создания постоянного соединения:

      • Одна из сторон должна ждать соединений, используя runtime.onConnect (en-US)
      • Другая сторона должна вызвать:
          (при соединении со встраиваемым скриптом); или (при соединении с фоновым скриптом).

        Результатом вызова этих методов будет возвращение runtime.Port (en-US) объекта.

          методу передаётся аргумент, являющийся собственным портом этого скрипта, runtime.Port объект.

        Как только обе стороны имеют порт, они могут:

        • отправлять сообщения, используя runtime.Port.postMessage() , и
        • получать сообщения используя runtime.Port.onMessage()

        Например, сразу после загрузки, нижерасположенный встраиваемый скрипт:

        • Соединяется с фоновым скриптом
        • Сохраняет Port в переменную myPort
        • Начинает ожидать и записывать сообщения приходящие на myPort
        • Использует myPort для отправки сообщений на фоновый скрипт, когда пользователь нажимает левую кнопку мыши на документе

        Соответствующий фоновый скрипт:

        • Ожидает попытки соединения от встраиваемого скрипта
        • Когда он получает эту попытку соединения:
          • сохраняет свой порт в переменную portFromCS
          • отправляет сообщение встроенному скрипту, используя этот порт
          • начинает ожидать сообщений, приходящих на порт, и записывать их
          Несколько встраиваемых скриптов

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

          Взаимодействие с веб-страницей

          Хотя по умолчанию встраиваемые скрипты не имеют доступ к объектам, которые созданы страничными скриптами, они могут взаимодействовать со страничными скриптами, используя window.postMessage и window.addEventListener API.

          Для просмотра законченного и полностью рабочего примера, посетите эту страницу на GitHub и следуйте инструкциям.

          Предупреждение: Заметьте, при взаимодействии с непроверенными страницами этим способом, вам нужно быть очень осторожными . Расширения имеют возможность запускать привилегированный код, который может обладать серьёзными возможностями, и вредоносные веб-страницы легко могут обмануть ваше расширение, ради доступа к этим возможностям.

          Как простейший пример, представим встраиваемый скрипт, который получает сообщение от веб-страницы и делает что-то вроде этого:

          Теперь страничный скрипт может запускать любой код со всеми привилегиями встраиваемого скрипта.

          Использование eval() во встраиваемых скриптах

          В Chrome, eval() всегда выполняет код в контексте встраиваемого скрипта, а не в контексте веб-страницы.

          • Если вы вызываете eval() , код выполняется в контексте встраиваемого скрипта.
          • Если вы вызываете window.eval() , код выполняется в контексте страничного скрипта.

          Например, рассмотрите этот встраиваемый скрипт:

          Этот код создаёт переменные x and y , используя window.eval() и eval() , затем записывает их значения, и отправляет сообщение на веб-страницу.

          Получая сообщение, страничный скрипт записывает те же самые переменные:

          В Chrome, в консоли будут записаны следующие строки:

          В Firefox, будут записаны следующие строки:

          Предупреждение: Будьте очень осторожны, запуская код в контексте страничного скрипта. Окружение страничного скрипта может контролироваться потенциально зловредным веб-страницей, которая может переопределить объекты, с которыми вы взаимодействуете, так что их поведение станет совершенно непредсказуемым:

          Новый простой редактор JavaScript в Firefox

          В только что вышедший Firefox 6 входит новый инструмент для веб-разработчиков: простой редактор JavaScript (прим. переводчика — по-английски он называется Scratchpad («блокнот»). Буду его так и называть, чтобы не писать каждый раз «простой редактор JavaScript».) Идея проста: браузер это отличное место для экспериментов с JavaScript. Большинство JS-разработчиков уже знают об этом и используют такие инструменты, как веб-консоль и командную строку Firebug, чтобы использовать преимущества единственной среды, которая точно знает, как выглядит веб-страница.

          Веб-консоль оптимизирована для ввода одной строки кода за раз (подсказка: с помощью Shift+Enter можно ввести несколько строк). В Firebug есть кнопка, включающая многострочный режим ввода, но всё равно работа основана на поочерёдном и линейном выполнении кусков кода.

          К Scratchpad это не относится. Он полностью отвергает подход «строка ввода — строка вывода». Это просто текстовый редактор, который умеет запускать JavaScript.

          Используем Scratchpad

          Scratchpad можно найти в меню «Веб-разработка». Выберите «Простой редактор JavaScript» в этом меню, и увидите окно текстового редактора. При запуске в нём появляются подсказки по использованию.

          1. Введите код
          2. Выделите какую-то его часть
          3. Выберите одну из трёх команд в контекстном меню или меню «Выполнить»:
            • Запустить
            • Исследовать
            • Отобразить

          «Запустить» просто выполняет выбранный код. Эту команду можно использовать для определения функций или запуска кода, который управляет страницей.

          «Исследовать» выполняет код и открывает инспектор объектов на возвращённом значении.

          Наконец, «отобразить» помещает результат выполнения кода в редактор. С помощью этой команды можно превратить редактор в калькулятор. Впрочем, полезнее будет её использовать для отслеживания результатов при проверке правильной работы страницы.

          Замечу, кстати, что многие идеи Scratchpad происходят из сред Smalltalk. Тридцать лет прошло, а мы всё ещё его догоняем ��

          Чтобы понять для себя, что такое Scratchpad, нужно увидеть его в действии. Либо запустите его сами, либо посмотрите видео Роба Кэмпбелла.

          Пишем новый код в Scratchpad

          Используем фрагменты кода

          Об областях видимости

          Как и веб-консоль, код в Scratchpad видит все переменные на странице, но переменные, определённые в Scratchpad, странице недоступны. Если вы хотите определить переменную (скажем, foo ), видимую JavaScript-коду страницы, можно присвоить её объекту window : window.foo = 1 .

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

          Наконец, если работаете над самим Firefox или расширениями для него, можно дать Scratchpad доступ к внутренностям браузера. Для этого сделайте в about:config настройку devtools.chrome.enabled истинной и поменяйте «среду» в редакторе с «содержимого» на «браузер». Но если вы введёте какой-то код, из-за которого браузер начнёт посылать на Google+ демотиваторы — чур, я не виноват!

          Планы на будущее

          Scratchpad прост, и мы хотим это сохранить. Мы планируем несколько улучшений, которые появятся в ближайших версиях Firefox, но суть — «текстовый редактор, умеющий запускать JavaScript» — останется неизменной.

          Мы ждём ваших отзывов о Scratchpad! Напишите нам в список рассылки dev-apps-firefox (прим. переводчика — по-английски), что вы думаете. Или начните участвовать в нашей работе и сделайте Scratchpad и другие инструменты для разработчиков ещё лучше.

          Как включить JavaScript в Firefox и для чего он нужен

          JavaScript – особенный вид языка программирования, который основывается на объектных представлениях браузера. Он является необходимым для того, чтобы предоставить для сайта большую интерактивность, в сравнении с обычными статичными HTML-документами. Например, в интерфейсе пользовательского типа будет возможность реализации меняющих рисунков, бегущей строки из текстового контента и многого другого! Именно поэтому важно знать, как включить JavaScript в Firefox и в других браузерах.

          как включить javascript

          Отличия JavaScript заключаются в том, что текст программных разработок встраивается в документы HTML и анализируется самими браузерами. JavaScript – это язык программирования сценариев на веб-страницах.

          Типы отличий JavaScript от Java

          Зная обозначение термина JavaScript, многие пользователи без различия путают этот тип термина с другим понятием – Java. Несмотря на то что языки являются похожими из-за названий, они имеют разные типы значений. Основные типы отличий состоят в трудности и в количестве расширенных типов возможностей. Прежде чем узнать, как включить в браузере JavaScript, необходимо понять его характерные черты.

          как включить javascript в firefox

          Реализация «ЯваСкрипт» является более свободной в сравнении с Java. Например, преобразования типов данных происходят простейшим образом. Также программисту не будет необходимости компилировать начальный код программной разработки на языке JavaScript, иными словами, он является интерпретируемым типом языка.

          Каким образом это происходит на JavaScript и на Java? В JavaScript программа обрабатывает одну строку за другой, информирование про ошибки выдается после каждой прочитанной строки, если они есть в наличии. В Java компилятор показывает данные типы сведений после прочтения полного текста программной разработки.

          Перед тем как включить JavaScript, надо помнить, что он не рассматривается в качестве замены языка программирования Java. Лучше всего первый тип языка применять в качестве дополнений ко второму.

          включить javascript в internet explorer

          Для чего необходим JavaScript

          С поддержкой JavaScript есть возможность создавать динамические типы документов HTML. Статические виды страничек HTML ушли в прошедшее время. «ЯваСкрипт» связывает в единое целое все строительные блоки приложений. Другими словами, он служит наподобие средства построения фундамента, делает проверки полей форм HTML до того момента времени, пока они не будут переданы на сервер. Знание того, как включить JavaScript в Firefox и других обозревателях, необходимо для корректной их работы в сети.

          Управления программными разработками на этом языке программирования проходят через локальные введения коммуникационных данных. Пользователи имеют возможности наблюдать в различных окошках типы сообщений-предостережений, которые выводятся при поддержке «ЯваСкрипт».

          Что такое JavaScript error и как запустить JavaScript

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

          Далее необходимо вспомнить и об обычных типах проблем пользователей сети. В последний период времени увеличились ситуации, когда человек, посетив свою страницу в социальной сети, обнаруживает сверху окон сообщения об ошибках: «JavaScript error», «Не включен JavaScript», «Для корректной работы сайта необходимо включить JavaScript». В таких случаях, у пользователей возникают проблемы с загрузками фото и видео в социальной сети.

          как включить в браузере javascript

          Как включить JavaScript в Firefox

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

          • сначала нужно запустить личный браузер Mozilla Firefox;
          • после этого открыть опции браузера, затем кликнуть по соответственной кнопке в виде трех параллельных линий рядом со строчкой введения;
          • теперь перед вами открылось большущее окно со многими вкладками; та, что вам необходима, именуется «Содержимое», кликните на нее;
          • далее еще проще: найдите строчку «Использовать JavaScript» и поставьте рядом с ней галочку;
          • нажмите «ОК» и перезагрузите личный браузер.

          На этом инстукция того, как включить JavaScript в Firefox, может считаться завершенной.

          Выключение JavaScript

          Соответственным образом, если потребности использования яваскриптов стали не нужны, точно так же, как написано выше, можно отключить данный тип функции. Для этого также перейдите в «Настройки» – «Содержимое», уберите галочку возле «Использовать JavaScript». Готово!

          Кроме того, если у вас браузер Mozilla Firefox обновлен до последней версии, то хорошо бы осуществить проверку, не сбились ли настройки после обновлений, так как иногда такое случается. Также стоит заметить, что практически все виды социальных сетей используют интерактивные типы форм, потому без включенных видов скриптов не будет возможности полноценного просмотра страниц.

          Могут стать недоступными сообщения, оповещения, обсуждения. Иногда происходят сбои, и если в социальных сетях какие-либо типы разделов внезапно стали недоступными, но при этом виды скриптов в браузере есть активированными, попытайтесь их выключить, а потом включить снова. Возможно, таким методом проблема решится. Если нет, то всегда есть возможность выполнения сброса опций до стандартных. Как включить JavaScript в Internet Explorer и в других браузерах? Аналогичным образом.

          javascript от chee

          javascript.png

          Если вы считаете, что это дополнение нарушает политики Mozilla в отношении дополнений, или имеет проблемы с безопасностью или приватностью, сообщите об этих проблемах в Mozilla, используя эту форму.

          Не используйте эту форму, чтобы сообщать об ошибках или запрашивать новые функции в дополнении; это сообщение будет отправлено в Mozilla, а не разработчику дополнения.

          Как встроить js в firefox wikipedia

          Встраиваемый скрипт — это часть расширения, которая выполняется в контексте отдельной веб-страницы (в отличии от фоновых скриптов, выполняющихся в контексте целого браузера).

          Фоновые скрипты имеют доступ ко всем методам WebExtension JavaScript APIs, но они не имеют доступа к контенту отдельных веб-страниц. Так что если вашему расширению необходимо взаимодействие с контентом веб-страницы, вам нужен встраиваемый скрипт.

          Точно так же, как скрипты загружаемые веб-страницами, встраиваемый скрипт может читать и изменять контент веб-страницы, используя DOM API.

          Встраиваемые скрипты имеют доступ только к небольшому подмножеству методов WebExtension API, но они могут взаимодействовать с фоновыми скриптами, используя систему передачи сообщений, таким образом опосредовано имея доступ ко всему WebExtension API.

          Обратите внимание, что встраивание скриптов блокируется на следующих доменах:

          • accounts-static.cdn.mozilla.net
          • accounts.firefox.com
          • addons.cdn.mozilla.net
          • addons.mozilla.org
          • api.accounts.firefox.com
          • content.cdn.mozilla.net
          • content.cdn.mozilla.net
          • discovery.addons.mozilla.org
          • input.mozilla.org
          • install.mozilla.org
          • oauth.accounts.firefox.com
          • profile.accounts.firefox.com
          • support.mozilla.org
          • sync.services.mozilla.com
          • testpilot.firefox.com

          Если вы попытаетесь встроить скрипт на страницы, находящиеся на вышеперечисленных доменах, у вас ничего не выйдет, и веб-страница сделает запись о CSP ошибке.

          По причине того, что список запрещённых доменов включает в себя addons.mozilla.org, пользователи, которые попытаются испытать ваше расширение прямо на странице загрузки, могут посчитать, что расширение не работает! В связи с этим вы могли бы предоставить им соответствующее предупреждение или onboarding page чтобы немедленно переадресовать их с addons.mozilla.org.

          Значения, определённые в глобальной области видимости встраиваемого скрипта с помощью var foo или window.foo = «bar» могут исчезать по причине бага 1408996.

          Загрузка встраиваемого скрипта

          Загрузка встраиваемых скриптов на веб-страницу происходит следующими тремя способами:

          1. Автоматическая загрузка скрипта на страницах с определёнными URL, объявленными при установке: используя content_scripts (en-US) ключ в manifest.json, вы можете запросить браузер загружать встраиваемый скрипт каждый раз, когда браузер загружает веб-страницу, чей URL совпадает с объявленными шаблонами.
          2. Автоматическая загрузка скрипта на страницах с определёнными URL, объявленными в момент работы расширения: используя contentScripts (en-US) API, вы можете запросить браузер загружать встраиваемый скрипт каждый раз, когда браузер загружает веб-страницу, чей URL совпадает с объявленными шаблонами. Это очень похоже на первый метод, но позволяет добавлять и удалять правила динамически во время работы расширения.
          3. Загрузка скрипта расширением в конкретную вкладку: используя tabs.executeScript() (en-US) API, вы можете загружать встраиваемые скрипты в определённые вкладки когда захотите: например, в ответ на нажатие пользователя на browser action.

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

          Используя методы (1) и (2), вы можете загружать скрипты на страницы, чьи URL могут быть представлены, используя шаблон совпадения.

          Используя метод (3), вы к тому же можете загружать скрипты на страницы вашего расширения, но вы не можете загружать скрипты на привилегированные страницы браузеры (например «about:debugging» или «about:addons»).

          Условия работы встраиваемого скрипта

          Доступ к DOM

          Встраиваемые скрипты имеют доступ и могут изменять DOM на веб-странице, так же как и обычные скрипты. Так же они могут видеть любые изменения сделанные с DOM страничными скриптами.

          При этом, встраиваемые скрипты имеют «чистое DOM представление». Это значит:

          • Встраиваемые скрипты не могут видеть JavaScript переменных, определённых страничными скриптами.
          • Если страничный скрипт переназначит встроенное свойство DOM, встраиваемый скрипт всё равно будет видеть его изначальное значение, а не переназначенное.

          В Firefox это поведение называется Xray vision (en-US).

          Например, рассмотрите эту веб-страницу:

          Скрипт «page-script.js» делает следующее:

          Теперь расширение загружает встраиваемый скрипт на страницу:

          Те же самые правила применяются и наоборот: страничный скрипт не может видеть JavaScript свойств, добавленных встраиваемым скриптом.

          Это означает, что встраиваемый скрипт может полагаться на то, что DOM свойства всегда будут вести себя предсказуемо, и не беспокоиться о том, что его переменные будут иметь конфликт с переменными из страничного скрипта.

          Одно из последствий такого поведения состоит в том, что встраиваемый скрипт не будет иметь доступ к JavaScript библиотекам, загруженным страничным скриптом. Например, если веб-страница загружает jQuery, встраиваемый скрипт не сможет увидеть эту библиотеку.

          Если встраиваемому скрипту необходимо использовать какую-либо JavaScript библиотеку, тогда эта библиотека должна быть загружена, тем же способом, как и встраиваемый скрипт вместе с ним:

          Примечание: Firefox предоставляет некоторое API, позволяющее встраиваемому скрипту иметь доступ к JavaScript объектам, созданным страничным скриптом, и предоставлять свои собственные JavaScript объекты страничному скрипту.

          Доступные WebExtension API

          В дополнение стандартному DOM API, встраиваемый скрипт может использовать следующие методы WebExtension APIs:

          • getURL()
          • inIncognitoContext
          • connect()
          • getManifest()
          • getURL()
          • onConnect
          • onMessage
          • sendMessage()
          • getMessage() (en-US)
          • getAcceptLanguages() (en-US)
          • getUILanguage() (en-US)
          • detectLanguage() (en-US)
          Работа с XHR и Fetch

          Встраиваемые скрипты могут делать запросы используя window.XMLHttpRequest и window.fetch() API.

          В Firefox, запросы, совершаемые из встраиваемого скрипта (например, используя fetch()) происходят в контексте расширения, так что вам необходимо предоставлять полный URL для доступа к контенту страниц. В Chrome, эти запросы совершаются в контексте страницы, так что URL может быть относительным, например /api будет трансформирован в https://[current page URL]/api .

          Встраиваемый скрипт имеет точно такие же кросс-доменные привилегии, как и всё остальное расширение: так что если расширение запросило кросс-доменный доступ на какой-либо домен используя permissions ключ в manifest.json, тогда его встраиваемый скрипт тоже будет иметь доступ к этому домену.

          Это достигается, предоставляя встраиваемому скрипту более привилегированные XHR and fetch объекты. Что имеет побочный эффект, связанный с отсутствием Origin и Referer заголовков, которые имел бы запрос, выполняемый из страничного скрипта. Зачастую это предпочитаемо, для того чтобы предотвратить раскрытие кросс-доменной натуры запроса. Начиная с версии 58 и дальше, расширения, которым необходимо выполнять запросы, которые должны выглядеть будто они отправлены встраиваемым скриптом, могут использовать content.XMLHttpRequest и content.fetch() . Кросс-браузерные расширения должны проверять присутствие этих методов.

          Взаимодействие с фоновыми скриптами

          Хотя встраиваемые скрипты не могут напрямую использовать большинство методов из WebExtension APIs, они могут взаимодействовать с фоновыми скриптами расширения, используя систему сообщений, и таким образом могут опосредованно иметь доступ к тем же самым API, что и фоновые скрипты.

          Существует два способа общения между фоновым и встраиваемым скриптами: вы можете посылать одиночные сообщения, ожидая необязательного ответа, или вы можете установить долгосрочное соединение на двух сторонах и использовать это соединение для обмена сообщениями.

          Одиночные сообщения

          Для отправки одиночного сообщения и ожидания необязательного ответа, вы можете использовать следующее API:

          Во встраиваемом скрипте В фоновом скрипте
          Отправка сообщения browser.runtime.sendMessage() (en-US) browser.tabs.sendMessage() (en-US)
          Получение сообщения browser.runtime.onMessage (en-US) browser.runtime.onMessage (en-US)

          Например, представьте встраиваемый скрипт, который обрабатывает нажатие левой кнопки мыши на веб-странице.

          Если нажатие было произведено по ссылке, встраиваемый скрипт отправляет сообщение фоновому скрипту со значение URL в ссылке:

          Фоновый скрипт ожидает эти сообщения и, при их получении, отображает уведомления, используя notifications (en-US) API:

          (Этот пример кода частично взят из notify-link-clicks-i18n примера на GitHub.)

          Обмен сообщениями через постоянное соединение

          Отправка одиночных сообщений может стать довольно обременительной, если вы пересылаете много сообщений между встраиваемым и фоновым скриптами. Альтернативное решение в этой ситуации будет установить постоянное соединение между двумя скриптами, и использовать его для обмена сообщениями.

          Каждая из сторон имеет runtime.Port (en-US) объект, который они могут использовать для обмена сообщениями.

          Для создания постоянного соединения:

          • Одна из сторон должна ждать соединений, используя runtime.onConnect (en-US)
          • Другая сторона должна вызвать:
            • tabs.connect() (en-US) (при соединении со встраиваемым скриптом); или
            • runtime.connect() (en-US) (при соединении с фоновым скриптом).

            Результатом вызова этих методов будет возвращение runtime.Port (en-US) объекта.

            • runtime.onConnect (en-US) методу передаётся аргумент, являющийся собственным портом этого скрипта, runtime.Port объект.

            Как только обе стороны имеют порт, они могут:

            • отправлять сообщения, используя runtime.Port.postMessage() , и
            • получать сообщения используя runtime.Port.onMessage()

            Например, сразу после загрузки, нижерасположенный встраиваемый скрипт:

            • Соединяется с фоновым скриптом
            • Сохраняет Port в переменную myPort
            • Начинает ожидать и записывать сообщения приходящие на myPort
            • Использует myPort для отправки сообщений на фоновый скрипт, когда пользователь нажимает левую кнопку мыши на документе

            Соответствующий фоновый скрипт:

            • Ожидает попытки соединения от встраиваемого скрипта
            • Когда он получает эту попытку соединения:
              • сохраняет свой порт в переменную portFromCS
              • отправляет сообщение встроенному скрипту, используя этот порт
              • начинает ожидать сообщений, приходящих на порт, и записывать их
              Несколько встраиваемых скриптов

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

              Взаимодействие с веб-страницей

              Хотя по умолчанию встраиваемые скрипты не имеют доступ к объектам, которые созданы страничными скриптами, они могут взаимодействовать со страничными скриптами, используя window.postMessage и window.addEventListener API.

              Для просмотра законченного и полностью рабочего примера, посетите эту страницу на GitHub и следуйте инструкциям.

              Заметьте, при взаимодействии с непроверенными страницами этим способом, вам нужно быть очень осторожными . Расширения имеют возможность запускать привилегированный код, который может обладать серьёзными возможностями, и вредоносные веб-страницы легко могут обмануть ваше расширение, ради доступа к этим возможностям.

              Как простейший пример, представим встраиваемый скрипт, который получает сообщение от веб-страницы и делает что-то вроде этого:

              Теперь страничный скрипт может запускать любой код со всеми привилегиями встраиваемого скрипта.

              Использование eval() во встраиваемых скриптах

              В Chrome, eval() всегда выполняет код в контексте встраиваемого скрипта, а не в контексте веб-страницы.

              • Если вы вызываете eval() , код выполняется в контексте встраиваемого скрипта.
              • Если вы вызываете window.eval() , код выполняется в контексте страничного скрипта.

              Например, рассмотрите этот встраиваемый скрипт:

              Этот код создаёт переменные x and y , используя window.eval() и eval() , затем записывает их значения, и отправляет сообщение на веб-страницу.

              Получая сообщение, страничный скрипт записывает те же самые переменные:

              В Chrome, в консоли будут записаны следующие строки:

              В Firefox, будут записаны следующие строки:

              Будьте очень осторожны, запуская код в контексте страничного скрипта. Окружение страничного скрипта может контролироваться потенциально зловредным веб-страницей, которая может переопределить объекты, с которыми вы взаимодействуете, так что их поведение станет совершенно непредсказуемым:

              Новый простой редактор JavaScript в Firefox

              В только что вышедший Firefox 6 входит новый инструмент для веб-разработчиков: простой редактор JavaScript (прим. переводчика — по-английски он называется Scratchpad («блокнот»). Буду его так и называть, чтобы не писать каждый раз «простой редактор JavaScript».) Идея проста: браузер это отличное место для экспериментов с JavaScript. Большинство JS-разработчиков уже знают об этом и используют такие инструменты, как веб-консоль и командную строку Firebug, чтобы использовать преимущества единственной среды, которая точно знает, как выглядит веб-страница.

              Веб-консоль оптимизирована для ввода одной строки кода за раз (подсказка: с помощью Shift+Enter можно ввести несколько строк). В Firebug есть кнопка, включающая многострочный режим ввода, но всё равно работа основана на поочерёдном и линейном выполнении кусков кода.

              К Scratchpad это не относится. Он полностью отвергает подход «строка ввода — строка вывода». Это просто текстовый редактор, который умеет запускать JavaScript.

              Используем Scratchpad

              Scratchpad можно найти в меню «Веб-разработка». Выберите «Простой редактор JavaScript» в этом меню, и увидите окно текстового редактора. При запуске в нём появляются подсказки по использованию.

              1. Введите код
              2. Выделите какую-то его часть
              3. Выберите одну из трёх команд в контекстном меню или меню «Выполнить»:
                • Запустить
                • Исследовать
                • Отобразить

              «Запустить» просто выполняет выбранный код. Эту команду можно использовать для определения функций или запуска кода, который управляет страницей.

              «Исследовать» выполняет код и открывает инспектор объектов на возвращённом значении.

              Наконец, «отобразить» помещает результат выполнения кода в редактор. С помощью этой команды можно превратить редактор в калькулятор. Впрочем, полезнее будет её использовать для отслеживания результатов при проверке правильной работы страницы.

              Замечу, кстати, что многие идеи Scratchpad происходят из сред Smalltalk. Тридцать лет прошло, а мы всё ещё его догоняем ��

              Чтобы понять для себя, что такое Scratchpad, нужно увидеть его в действии. Либо запустите его сами, либо посмотрите видео Роба Кэмпбелла.

              Пишем новый код в Scratchpad

              Используем фрагменты кода

              Об областях видимости

              Как и веб-консоль, код в Scratchpad видит все переменные на странице, но переменные, определённые в Scratchpad, странице недоступны. Если вы хотите определить переменную (скажем, foo ), видимую JavaScript-коду страницы, можно присвоить её объекту window : window.foo = 1 .

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

              Наконец, если работаете над самим Firefox или расширениями для него, можно дать Scratchpad доступ к внутренностям браузера. Для этого сделайте в about:config настройку devtools.chrome.enabled истинной и поменяйте «среду» в редакторе с «содержимого» на «браузер». Но если вы введёте какой-то код, из-за которого браузер начнёт посылать на Google+ демотиваторы — чур, я не виноват!

              Планы на будущее

              Scratchpad прост, и мы хотим это сохранить. Мы планируем несколько улучшений, которые появятся в ближайших версиях Firefox, но суть — «текстовый редактор, умеющий запускать JavaScript» — останется неизменной.

              Мы ждём ваших отзывов о Scratchpad! Напишите нам в список рассылки dev-apps-firefox (прим. переводчика — по-английски), что вы думаете. Или начните участвовать в нашей работе и сделайте Scratchpad и другие инструменты для разработчиков ещё лучше.

              Как включить Javascript в Mozilla Firefox

              wikiHow работает по принципу вики, а это значит, что многие наши статьи написаны несколькими авторами. При создании этой статьи над ее редактированием и улучшением работали, в том числе анонимно, 10 человек(а).

              Количество просмотров этой статьи: 27 165.

              На многие сайтах присутствует анимированное меню и воспроизводятся звуки. Это достигается путем использования JavaScript – языка программирования, предназначенного для улучшения сетевого контента. Если при переходе на такой сайт изображение или звук искажены, а Firefox замедлился, то, скорее всего, в вашем браузере JavaScript отключен. Вы можете включить его через одну из настроек браузера Firefox.

              Чтобы выяснить версию вашего браузера, нажмите Alt+Н; в открывшемся меню «Справка» нажмите «О Firefox».

              Похожие публикации:
              1. Wnetwatcher что это за программа
              2. Как защитить презентацию от копирования и редактирования
              3. Как озвучить имя звонящего на андроид
              4. Как сделать майкрософт эйдж на русский

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *