Как сделать расширение для браузера яндекс

Yandex Translate API: Пишем расширение для браузера

Добрый день! В один момент я занялся целью написать свое расширение для браузера.

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

После выделения, посредине страницы появляется блок с переводом и через секунду плавно исчезает.

Решить вопрос помогут пользовательские скрипты и расширения для браузера.
add-ones для браузеров

Пишем расширение

Комментарии

// ==UserScript== // @name Robinzon by MiDen // @include * // @require http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js // @version 1.0 // @author Денис Мисанюк // @license freeware // @icon https://ps.vk.me/c609626/u131776794/docs/46e0630bdf11/robinzon.png // ==/UserScript== 

В комментариях прописываем разную служебную информацию (авторcтво, версию, название, тип лицензии, ссылку на изображение).
Также здесь подключаем библиотеку jQuery.

Эти данные использует плагин для отображения информации по нашему расширению.

Создаем и стилизуем наш блок

$('body').append(" "); $("#robinzon").css(); 

Добавляем обработчик

$("html").click(function() < text = document.getSelection(); console.log(text); if (text!='') < $.ajax(< type: "POST", url: 'https://translate.yandex.net/api/v1.5/tr.json/detect?key=trnsl.1.1.20140730T105810Z.a8bb36f8d87c6f11.b4912cbf0f1e4dbe9c51f28c272521b0af68ba42&text=' + text, success: function (response) < lang = response.lang; console.log(lang); >>); if (lang == 'en') < lang = 'ru'; >else < lang = 'en'; >var link = 'https://translate.yandex.net/api/v1.5/tr.json/translate?key=trnsl.1.1.20140730T105810Z.a8bb36f8d87c6f11.b4912cbf0f1e4dbe9c51f28c272521b0af68ba42&text=' + text + '&lang=' + lang; text = ''; $.ajax( >); > >); 

Спасибо за внимание!

• userscripts
• greasemonkey
• yandex api
• translate plugin

Делаем своё расширение для браузера за 10 минут

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

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

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

�� Что такое расширение

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

Примеры того, что может сделать расширение:

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

В этой статье

Мы сделаем самое простое расширение для браузера Chrome, которое позволит запускать скрипт со снежинками на любом сайте, независимо от настроенной политики безопасности. Для этого воспользуемся официальным руководством Google по созданию расширений.

Манифест

В каждом расширении для браузера должен быть манифест — документ, в котором написано:

• как называется расширение;
• к чему расширение может получить доступ;
• какие скрипты будут работать в фоне;
• как должна выглядеть иконка расширения;
• что показать или что выполнить, когда пользователь нажмёт на иконку расширения.

Манифест задаёт общие правила для всего расширения, поэтому манифест — единственный обязательный компонент. Можно обойтись без иконок и скриптов, но манифест обязательно должен быть.Каждый манифест хранится в файле manifest.json — создадим пустой файл с таким именем и напишем внутри такое:

«name»: «Запускаем снежинки на любом сайте»,
«description»: «Проект журнала Код»,
«version»: «1.0»,
«manifest_version»: 3
>

Первые две строчки — это название и подробное описание расширения. Третья отвечает за номер версии расширения, а последняя говорит браузеру, какая версия манифеста используется в описании. На момент выхода статьи в феврале 2021 года используется третья версия.

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

Мы попадаем на страницу, которая нам покажет все установленные расширения:

Чтобы добавить своё расширение, в правом верхнем углу включаем режим разработчика, а затем нажимаем «Загрузить распакованное расширение»:

Теперь выбираем папку, в которой лежит наш манифест:

Отлично, мы только что добавили в браузер новое расширение:

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

Чтобы было проще работать и тестировать расширение, закрепим его на панели браузера:

Иконки

У расширения есть две иконки, которыми мы можем управлять:

1. Картинка в карточке расширения на странице настроек.
2. Иконка на панели браузера.

Чтобы не рисовать всё с нуля, скачаем папку с иконками из того же руководства Google и положим её в ту же папку, что и манифест:

Теперь добавим иконки в манифест. За картинку в карточке отвечает блок icon, а за иконку на панели — блок action. Разные размеры картинки нужны для того, чтобы на разных мониторах с любой плотностью пикселей иконки выглядели хорошо:

 < "name": "Запускаем снежинки на любом сайте", "description": "Проект журнала Код", "version": "1.0", "manifest_version": 3, "action": < "default_icon": < "16": "/images/get_started16.png", "32": "/images/get_started32.png", "48": "/images/get_started48.png", "128": "/images/get_started128.png" >>, "icons": < "16": "/images/get_started16.png", "32": "/images/get_started32.png", "48": "/images/get_started48.png", "128": "/images/get_started128.png" >>

Сохраняем манифест, обновляем расширение на странице настроек и смотрим результат:

Настраиваем разрешения

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

1. Понять, какая вкладка сейчас активная, чтобы запустить снежинки именно на ней.
2. Запустить наш скрипт со снежинками.

Чтобы получить доступ к активной вкладке и к запуску скриптов, добавим в манифест такую строку:

«permissions»: [«activeTab», «scripting»],

Показываем меню

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

Чтобы сделать всплывающее меню, добавим в манифест в раздел action такую строку:

Она означает, что при нажатии на иконку мы увидим рядом с ней мини-страничку, на которой что-то будет.Создадим в той же папке расширения файл popup.html и добавим в него такой код:

     /* задаём размеры кнопки и размер текста на кнопке */ button   

Чтобы браузер не ругался, что у нас нет файла popup.js , создадим пустой файл с таким названием и положим его в ту же папку:

Сохраняем манифест, обновляем его на странице настроек и видим, что у нашего расширения появилось меню с кнопкой:

Запускаем снежинки

Вся магия будет происходить в файле popup.js — откроем его и добавим такой код:

// получаем доступ к кнопке let snow = document.getElementById("snow"); // когда кнопка нажата — находим активную вкладку и запускаем нужную функцию snow.addEventListener("click", async () => < // получаем доступ к активной вкладке let [tab] = await chrome.tabs.query(< active: true, currentWindow: true >); // выполняем скрипт chrome.scripting.executeScript(< // скрипт будет выполняться во вкладке, которую нашли на предыдущем этапе target: < tabId: tab.id >, // вызываем функцию, в которой лежит запуск снежинок function: snowFall, >); >); // запускаем снег function snowFall()

Последнее, что нам осталось сделать, — положить в функцию snowFall() полный код скрипта из проекта со снежинками и сохранить файл.

Проверка

В прошлый раз мы не смогли запустить скрипт на любой странице Яндекса — мешала политика безопасности. Теперь всё работает:

Скачать упакованное расширение. Перед установкой его нужно распаковать в любую папку.

Шаг за шагом: как создать расширение для Яндекс Браузера

В данной статье мы рассмотрим пошаговую инструкцию по созданию расширения для Яндекс Браузера. Вы узнаете, как просто и быстро создать свое собственное расширение, которое будет удобно использовать в повседневной жизни.

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

Шаг 1. Создание манифеста расширения

Манифест расширения — это файл, который содержит информацию о том, что должно происходить с расширением. Создайте файл с названием manifest.json и добавьте следующий код:

«manifest_version»: 2,
«name»: «Название вашего расширения»,
«version»: «1.0»,
«description»: «Описание вашего расширения»,
«icons»: < «16»: «icon.png»,
«48»: «icon.png»,
«128»: «icon.png» >,
«content_scripts»: |
«matches»: |»https://google.com/*»|,
«js»: |»content-script.js»|,
«css»: ||
>
|,
«permissions»: ||
>

В этом коде определяются основные настройки расширения, такие как его название, версия и описание.

Шаг 2. Создание файла иконки

Для вашего расширения необходимо создать иконку. Она может быть любой формы, но должна соответствовать размеру изображений, указанным в файле манифеста. Добавьте файл иконки (например, icon.png) в папку расширения.

Шаг 3. Создание контент-скрипта

Контент-скрипт — это скрипт, который выполняется на странице, когда она загружается в браузере. Создайте файл content-script.js и добавьте следующий код:

alert(«Привет, я расширение!»);

Этот код отображает диалоговое окно с приветствием, когда страница загружается.

Шаг 4. Установка расширения в Яндекс Браузере

Для установки расширения в Яндекс Браузере откройте его настройки, выберите пункт «Расширения» и нажмите на кнопку «Загрузить расширение». Укажите путь к папке расширения, где находятся файлы манифеста, иконки и контент-скрипта.

Шаг 5. Проверка работы расширения

Перезагрузите страницу, чтобы убедиться, что ваше расширение работает. Если все настроено правильно, то на странице должно быть отображено диалоговое окно с приветствием.

Создание расширения для Яндекс Браузера не так уж сложно, как кажется на первый взгляд. Самое главное — иметь базовые знания в программировании и следовать пошаговой инструкции. Создавайте свои собственные расширения и упрощайте свою жизнь!

Разработка расширений для Яндекс Браузера с использованием JavaScript

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

1. Установка Яндекс Браузера

Перед началом разработки расширений для Яндекс Браузера необходимо установить сам браузер на компьютер. Вы можете загрузить его с официального сайта Яндекса и следовать инструкциям по установке.

2. Создание расширения

Первым шагом в разработке расширения для Яндекс Браузера является создание директории, в которой будут храниться все файлы расширения. Внутри этой директории мы создадим файл manifest.json , который будет содержать информацию о расширении.

< "manifest_version": 2, "name": "Мое расширение", "version": "1.0.0", "description": "Описание вашего расширения", "icons": < "16": "icon16.png", "48": "icon48.png", "128": "icon128.png" >, "permissions": [ "tabs" ], "background": < "scripts": ["background.js"], "persistent": false >, "browser_action": < "default_icon": < "16": "icon16.png", "48": "icon48.png", "128": "icon128.png" >, "default_popup": "popup.html" > > 

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

Также мы указываем информацию о фоновом скрипте ( «background.js» ) и попапе расширения ( «popup.html» ), а также о иконках для разных размеров ( «icon16.png» , «icon48.png» , «icon128.png» ).

3. Создание фонового скрипта

Фоновый скрипт отвечает за основной функционал расширения и может запускаться при запуске браузера или по команде пользователя. Создадим файл background.js и добавим простой скрипт, который будет менять цвет фона на зеленый для всех открытых вкладок:

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) < if (changeInfo.status === 'complete') < chrome.tabs.executeScript(tabId, < code: 'document.body.style.backgroundColor = "green";' >); > >); 

Этот скрипт реагирует на обновление состояния вкладки и, когда вкладка полностью загрузится ( changeInfo.status === ‘complete’ ), меняет цвет фона на зеленый.

4. Создание попапа

Попап — это маленькое всплывающее окно, которое может быть открыто пользователем при нажатии на иконку расширения. Добавим файл popup.html с простым содержимым:

    body 
Привет, мир!
 
Это мое расширение для Яндекс Браузера.
   

В этом примере мы создали простую HTML-страницу с заголовком и абзацем.

5. Установка расширения

Теперь, когда мы создали все необходимые файлы, мы можем установить расширение в Яндекс Браузер. Для этого откройте браузер, перейдите в меню настроек и выберите пункт «Дополнительные инструменты» -> «Расширения». Включите режим разработчика, нажав на соответствующий переключатель.

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

6. Тестирование расширения

После установки расширения вам будет доступна иконка на панели инструментов. При нажатии на нее откроется попап с текстом «Привет, мир!». Также, после загрузки любой веб-страницы, вы увидите, что цвет фона изменился на зеленый.

7. Дальнейшая разработка

Поздравляю! Вы создали свое первое расширение для Яндекс Браузера с использованием JavaScript. Теперь, используя возможности языка JavaScript и API браузера, вы можете создавать более сложные и полезные расширения.

В процессе разработки вы можете ознакомиться с документацией Яндекс Браузера и различными примерами расширений, чтобы узнать больше о возможностях разработки и создать более интересные и полезные функции для пользователей. Успехов вам в разработке!

• → Влияние окружающей среды на биологические тесты
• ← Оптимизация производительности кода Javascript в Яндекс Браузере