Сделать расширение для ВК

Боты, что-то делающие на сайтах для пользователя, могут быть разными. Они могут представлять собой как десктопную программу, так и располагаться на сервере. А еще есть такие боты как расширения для браузеров. Это относительно узкая ниша, востребованная в частности на специфических сайтах и браузерах. Например, на сайтах в сети тор (onoin).

Для таких сайтов проще и быстрее всего создать дополнение для Firefox.

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

Разберем задачу на составляющие:

1. Создать расширение для тора
2. Создать бота телеграм
3. Создать на сервере базу данных
4. Создать обработчик сигналов от расширения и одновременно отправку их в телеграм.

Расширение для тора (мозиллы фф)

Лучшие браузерные расширения для приватности и удобства

В отдельной папке создаем такие файлы:

< «description»: «Описание расширения», «manifest_version»: 2, «name»: «MyBot», «version»: «1.0», «homepage_url»: «https://upread.ru/», «icons»: < «48»: «icons/bot.png» >, «permissions»: [ «», «*://upread.ru /*», «webRequest», ], «content_scripts»: [ < «matches»: [«*://*.onion/*»], «js»: [«jquery-3.6.0.min.js», «cont.js»] >], >

Как видите, тут есть jquery-3.6.0.min.js – это необязательно. Во-первых, на сайте, в который мы встраиваем скрипт, уже может быть jquery. Во-вторых, вы вполне можете без него обойтись. Но я привык в небольших проектах работать с jQuery, так что добавлю.

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

Сам основной файл контентного скрипта cont.js – тут ваш код. Я набросаю просто схему

function sendPost(mess, event) < console.log(«send»); var xhr = new XMLHttpRequest(); xhr.responseType = ‘document’; xhr.open(«POST», «адрес», true); var data = new FormData(); data.append(‘mess’, JSON.stringify(mess)); data.append(‘event’, event); xhr.onreadystatechange = function() < if (this.readyState == 4 this.status == 200) < location.reload(); >> xhr.send(data); > function initPage()< $(‘.table-sm tbody th’).each(function(i, item) < if (i%13 == 0)< let black_id = $(item).text(); let obj = < black_id: black_id >; arrOrders.push(obj); is_but = true; > >); if (is_but == true) < //отправляем sendPost(arrOrders, «add_order»); >> initPage();

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

Расширение VK NEXT — лучший мод для Вконтакте — замена VKOpt

Итак, имея эти два файла + иконку, мы уже можем загрузить временное дополнение. Для этого переходим по адресу about:debugging#/runtime/this-firefox и собственно загружаем

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

Создание xpi

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

Для начала надо зарегистрироваться в мозилле (создать аккаунт) и перейти на addons.mozilla.org. Там необходимо будет получить api-ключи разработчика.

После этого в своей системе установить Node.js и затем дополнение к нему:

npm install —global web-ext

Дальше переходим в папку нашего расширения и вводим команду:

web-ext sign —api-key=$AMO_JWT_ISSUER —api-secret=$AMO_JWT_SECRET

Где соответственно $AMO_JWT_ISSUER и $AMO_JWT_SECRET – ид разработчика и ключ, полученные выше. Эта команда создаст подписанное расширение xpi, которым уже можно делиться и ставить куда угодно.

Вот так мы создали самое простое расширение для мозиллы (тора).

Автор этого материала — я — Пахолков Юрий. Я оказываю услуги по написанию программ на языках Java, C++, C# (а также консультирую по ним) и созданию сайтов. Работаю с сайтами на CMS OpenCart, WordPress, ModX и самописными. Кроме этого, работаю напрямую с JavaScript, PHP, CSS, HTML — то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.

заметки, javascript, расширения

Источник: upread.ru

Создаем расширение для браузера на HTML

Сегодня браузеры являются неотЪемлемой частью жизни многих пользователей ПК. И не секрет что они имеют свои магазины с расширениями, позволяющими улучшать функционал используемого поисковика. Сегодня я хотел бы показать, как создавать расширение для браузера Chrome при помощи HTML и добавить его к браузеру.

И так, создадим пустую папку ChromeExt. Внутрь помещаем три файла index.html, script.js, manifest.json.

Covid-19 Stats- UK

async function fetchData() const res=await fetch («https://api.coronavirus.data.gov.uk/v1/data»);
const record=await res.json();
document.getElementById(«date»).innerHTML=record.data[0].date;
document.getElementById(«areaName»).innerHTML=record.data[0].areaName;
document.getElementById(«latestBy»).innerHTML=record.data[0].latestBy;
document.getElementById(«deathNew»).innerHTML=record.data[0].deathNew;
>
fetchData();

И последний файл, позволяющий превратить наш проект в расшение для браузера. manifest.json

«name»: «Covid-19 Stats UK»,
«version»: «1.0.0»,
«description»: «latest covid data of UK»,
«manifest_version»: 3,
«author»: «XXXXXXX TTTTTTTT»,
«action»: «default_popup»: «index.html»,
«default_title»: «Latest Covid Report»
>
>

Далее, переходим в браузер и заходим во вкладку расширения командой chrome://extensions/. Включаем плашку режим разработчика и нажимаем кнопку Загрузить распакованное расширение. Далее выбираем папку с проектом и загружаем его.

Создано 29.12.2022 13:35:02

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Источник: myrusakov.ru

Кратко о создании расширений для Chrome

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

Расширение, которое мы будем разрабатывать на протяжении всей статьи можно найти в магазине Google Chrome Web Store, с той лишь разницей, что там присутствует расширенный функционал. Помимо этого, присутствует исходный код на GitHub, опять таки с оговоркой на то, что там всё написано на CoffeeScript, а здесь будет вестись повествование с JavaScript. Кстати, я не поклонник и не сторонник CoffeeScript, но штука довольно интересная и полезная — советую попробовать.

Если вы когда-нибудь рассматривали идею создания расширения для Chrome, Firefox, Maxthon и прочих браузеров, то, наверное, уже успели заметить, что минимум усилий нужно приложить как раз таки для Хрома. Убедиться в этом можно, взглянув на документацию у соответствующих браузеров.

Постановка задачи

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

• Расширение должно скрывать все комментарии в социальной сети «VK»;
• Расширение должно иметь возможность отображать комментарии;
• Расширение должно иметь возможность отображать комментарии на конкретных страницах;

С первого взгляда всё просто и нам по силам. Однако, в рамках статьи мы реализуем лишь первые два пункта.

Каркас расширения

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

Первым делом нужно заполнить три обязательных поля:

Если с названием всё понятно, а с версией манифеста всё ещё проще, то поподробнее нужно остановиться с версией расширения.

Итак, все мы привыкли, что версия чего-либо состоит из трёх чисел, разделённых точками — Мажорное.Минорное.Патч (Имеется в виду число). С npm, bower и прочими прелестями разговор короткий: либо так, либо никак. А вот Google предлагает следующие варианты:

«version»: «1» «version»: «1.0» «version»: «2.10.2» «version»: «3.1.2.4567»

Тем не менее, я сторонник семантического версионирования и советую вам так же придерживаться этой идеи, но не настаиваю.

Далее рекомендуемыми полями идут:

«default_locale»: «en», // Язык по умолчанию «description»: «A plain text description», // Описание приложения «icons»: , // Иконки 16 128, дополнительно можно 32 96 short_name»: «Short Name», // Короткое название расширения (~12 символов) для тех мест, где мало места для вывода полного названия

Просто так от Хрома ничего не получить — нужны разрешения. Что же, прочим их:

«permissions»: [ «tabs», // Доступ к объекту Tabs «activeTab» // Доступ к объекту ActiveTabs ],

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

Помимо прочего, нужно указать, что наше приложение хочет иметь иконку справа вверху:

Если приложение имеет страницу настроек, то её тоже следует указать:

«options_page»: «options.html»,

Также можно перманентно вешать на различные страницы какие-то ресурсы (css или js), в зависимости от адреса:

«content_scripts»: [ < «matches»: [ «http://site.com/*», «https://site.com/*» ], «css»: [ «styles/styles.css» ] >],

И, напоследок, скажу, что можно указать фоновую страницу:

«background»: < «page»: «background.html», «scripts»: [«scripts.js»], «persistent»: false >,

Фоновая страница — это невидимая страница, которая нужна для того, чтобы объединять все вкладки. Ссылки на ресурсы можно указывать как в файле манифеста, так и на самой странице background.html .

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

Фоновая страница – это невидимая страница, которая как раз и содержит такой скрипт. Их бывает два типа: persistent (постоянные) и event (управляемые событиями). Persistent, как можно догадаться, загружена постоянно, а event-страница загружается только при необходимости, когда возникает связанное с ней событие.

— Alexandr Kozlov

Обязательно прочитайте статьи Александра в его блоге.

Подробнее обо всех полях файла манифеста можно узнать из документации.

В нашем случае, файл манифеста будет выглядеть следующим образом:

< «manifest_version»: 2, «name»: «__MSG_app_name__», «short_name»: «VKCommentBlocker», «description»: «__MSG_app_description__», «version»: «0.1.0», «default_locale»: «ru», «permissions»: [ «activeTab» ], «browser_action»: < «default_icon»: «icon_16.png», «default_title»: «__MSG_browser_action__» >, «icons»: < «16»: «icon_16.png», «48»: «icon_48.png», «128»: «icon_128.png» >, «background»: < «persistent»: false, «page»: «background.html» >, «content_scripts»: [ < «matches»: [ «http://vk.com/*», «https://vk.com/*» ], «css»: [ «styles/commentblocker.css» ] >], «web_accessible_resources»: [ «styles/commentblocker_on.css» ] >

Из того, что ранее не рассматривалось

• __MSG_key__ — это вариация Chrome на тему интернационализации приложений (i18n). Можно применять как в файле манифеста, так и в других файлах (даже CSS).
• web_accessible_resources — массив путей ресурсов, которые будут впоследствии использоваться в контексте веб-страниц. Без указания в нём пути — ничего не получится использовать на страницах сайтов, если такое поведение предполагается.

Ресурсы расширения

Огромный плюс в карму Chrome — мы уже сейчас можем подключить расширение, конечно, если созданы все ресурсы, указанные в manifest.json .

Не думаю, что стоит заострять внимание на том, что содержится в файле commentblocker.css и commentblocker_on.css . Приведу лишь первый, в котором указаны все селекторы, в которых заключены комментарии:

В файле commentblocker_on.css , как не трудно догадаться, всё наоборот. Обратите внимание, что прямо в CSS я использую строку с языковом ключом content: «__MSG_mode_enable__» . Самое время создать такой файл, где эти ключи будут храниться.

В корне нашего расширения создаём директорию _locales и вложенные в неё директории en и ru . Далее в файле messages.json описываем наши ключи.

< «app_name»: < «message»: «VK Comment Blocker» >, «app_description»: < «message»: «Удобный способ скрыть комментарии в новостной ленте и группах.» >, «browser_action»: < «message»: «Переключить вид комментариев» >, «mode_enable»: < «message»: «Без комментариев!» >, «mode_disable»: < «message»: «С комментариями!» >>

Помимо поля message есть и другие поля, о которых можно узнать из документации.

Теперь создаём файлы background.html , для начала так:

Background

Тут всё так, как в обычном HTML — ничего необычного. Кстати, файл background.html можно не создавать, так как он генерируется автоматически, на основе полей в manifest.json .

Запускаем расширение

Запустить расширение можно, не написав ни одной строчки JavaScript. Чтобы сделать это, нужно пройтись по меню:

• Настройка и управление Google Chrome (Гамбургер)
• Дополнительные инструменты
• Расширения
• Поставить галочку напротив «режим разработчика»
• Загрузить распакованное расширение
• Выбрать папку с расширением

Расширение загрузилось и показалось в меню. Да, да, это вот это вот «В».

Казалось бы, у только что созданного нами расширения ничего нет в голове (нет никакой логики), а все комментарии на страницах социальной сети на букву «В» теперь скрыты. Ответ кроется в manifest.json , где в поле «content_scripts»: <> мы указали на каких страницах ( http://vk.com/* и https://vk.com/* ) будет автоматически подключаться файл commentblocker.css , который и скрывает все комментарии. Советую подробнее почитать про mathes patterns. Он лишь с виду так прост, а под капотом чуть ли не сивый мерин, да с прибамбасами.

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

Оживляем расширение

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

Помните, что я говорил про background.html ? Да, да, про то, что его можно не создавать. Давайте слегка изменим manifest.json :

. «background»: < «persistent»: false, «scripts»: [ «scripts/commentblocker.js» ] >, .

Просто подключили JavaScript файл. Ничего особенного. Переходим к этому файлу.

Просто так запихнуть JS на страницу нельзя. И такая же проблема имеется не только со скриптами. Поэтому нам нужно воспользоваться специальной инъекцией executeScript .

Сначала нужно добавить обработчик события клика на иконку расширения:

chrome.browserAction.onClicked.addListener(function(tab) < chrome.tabs.executeScript(tab.id, < code: «(» + toggleComments.toString() + «)();» >); >);

Где toggleComments — это функция, которая и будет производить инъекцию нашего CSS файла на страницу:

var toggleComments = function() < var extensionLink; (document.getElementById(«extension») == null) ? ( extensionLink = document.createElement(«link»), extensionLink.href = chrome.extension.getURL(«/styles/commentblocker_on.css»), extensionLink.id = «extension», extensionLink.type = «text/css», extensionLink.rel = «stylesheet», document.getElementsByTagName(«head»)[0].appendChild(extensionLink) ) : (document.getElementsByTagName(«head»)[0].removeChild(document.getElementById(«extension»))) >;

Думаю, что слов о том, что этот кусок кода проверяет наличие подключения нашего CSS на странице и делает выводы о необходимости его подключения или отключения, будет достаточно.

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

• onCreated — создание вкладки.
• onUpdated — обновление вкладки.
• onRemoved — закрытие вкладки.

Стоит заметить, что событие onUpdated вызывается дважды:

• Обновление страницы;
• Полная загрузка страницы;

На StackOverflow советуют проверять статус страницы:

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) < if (changeInfo changeInfo.status === ‘complete’) < . >>);

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

Выводы

Как нельзя кстати, стоит упомянуть мою полную версию расширения VK Comment Blocker, которая доступна в Chrome Web Store. Помимо этого, так же доступен полный исходный код на GitHub.

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

Ссылки

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

• Целый блог, посвящённый разработке расширений для Chrome.
• Создание расширения для Chrome за пару часов.
• Chrome Extensions Box. Стартовый набор для создания расширений Google Chrome.
• Создание простого Chrome приложения.
• Создание своих собственных расширений для браузера.
• Делаем расширение для Google Chrome.
• Пишем расширение под Google Chrome.

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

Ответ очень прост:

Мои статьи не должны давать тебе полные знания от и до, иначе какой смысл в том, что ты прочитал? Ты не захочешь узнать больше, если я дам тебе ответы на все твои вопросы в этой статье. А если я тебя обману или дам плохой совет, который ты примешь как должное? Шучу.

На самом деле, я не люблю углубляться в своих статьях из-за того, что их попросту будет не интересно читать. Моё дело показать, что можно сделать используя ту, или иную технологию, как это просто сделать и какие вообще есть причины рассматривать или изучать то, о чём шла речь в статье. Конечно, есть темы, которые мне очень интересны и я рассказываю о них намного больше, чем просто «обзорно».

Делимся на оплату хостинга или кофе.
Чем чаще пью кофе, тем чаще пишу статьи.

Источник: canonium.com