Русский
Русский
English
Авторизация
Ip-адрес
Восстановление пароля
Регистрация
Статистика
Реклама

Расширения

Самые упоротые и забавные расширения для браузера подборка

06.01.2021 18:12:51 | Автор: admin


Иногда разработчики Желают странного (С) А. Б. Стругацкие, из-за этого появляются необычные проекты, вроде запуска Doom на терминалах для считывания банковских карт и других, еще менее приспособленных для этого, девайсах. Чаще всего такое получается в результате тренировок, когда программист осваивает новую тему и реализует тестовый проект не в виде традиционного Hello, Word!, а чего-то более изощренного. Но ведь не все занимаются портированием древних шутеров на смарт-часы, есть и другие области разработки, более прикладные, но не менее интересные. Предположим, что человеку наскучило смотреть на длинные логи в консоли и grepать из них данные для отладки, хочется добавить интерактива и наглядности в свое обучение. Инструменты для этого выбираются самые разные, кто-то пользуется обычным графическим выводом, кто-то выводит данные через простенький сайт, а кто-то пишет расширения для браузера!

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


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



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



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

Поддерживаются браузеры Chrome и FireFox, но расширения нет в их интернет-магазинах. Его надо скачать и установить самому, а виртуальная файловая система вкладок работает только на Linux или Mac OS. Разберем процесс настройки этого необычного продукта.

Для экономии места и времени, я опишу тут установку для FireFox на системе Ubuntu, желающие настроить его для Chrome или на Mac OS найдут инструкцию на сайте разработчика, действия отличаются минимально.

Сначала надо склонировать репозиторий

$ git clone https://github.com/osnr/TabFS.git


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

about:debugging#/runtime/this-firefox и загрузить в браузер файл из директории репозитория extension/manifest.json.

После этого надо установить FUSE

sudo apt install libfuse-dev</code>А потом создать точку монтирования и скомпилировать файловую систему<code>$ cd fs$ mkdir mnt$ make$  cd ..$ ./install.sh firefox


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

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



В одной директории файлы отсортированы по заголовкам, в другой но номеру вкладки, отдельные файлы содержат адрес страницы, ее содержимое и заголовок. Имея текст страниц в виде файлов на диске, можно поднять парсинг на совершенно новый уровень, операции с данными открытых сайтов выполняются стандартными командами bash, такими как: rm, cat и grep, или скриптами на Python, к примеру.

Выведем список открытых вкладок по их заголовкам (здесь подразумевается, что пользователь находится в директории репозитория fs/mnt и все команды вводятся с учетом этого):

$ ls tabs/by-titleGitHub_-_osnr_TabFS_____Mount_your_browser_tabs_as_a_filesystem._34Levelord__an_Ordinary_Moscow_Resident__Interview_with_the_Creator_of_Duke_Nukem___RUVDS.com_corporate_blog___Habr_33Make_it_easier_to_get_finished__Interview_with_John_Romero__developer_of_Doom___RUVDS.com_corporate_blog___Habr_32Making_Games_for_a_Living__11_tips_from_Levelord___RUVDS.com_corporate_blog___Habr_31TabFS_10The_one_who_resurrected_Duke_Nukem__interview_with_Randy_Pitchford__magician_from_Gearbox___RUVDS.com_corporate_blog___Habr_30


А теперь закроем в браузере все страницы Хабра из блога компании RuVDS:

$ rm tabs/by-title/*RUVDS*


И останется только две:

$ ls tabs/by-titleGitHub_-_osnr_TabFS_____Mount_your_browser_tabs_as_a_filesystem._34TabFS_10


Если нажать в браузере несколько раз Ctrl-Shift-T, то вкладки откроются снова и на диске появятся новые файлы. Можно сохранить текст всех открытых вкладок в отдельный файл:

cat tabs/by-id/*/text.txt > ~/text-of-all-tabc.txt


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

На закуску еще несколько расширений попроще. Одно из них чем-то напоминает то, что с глазами, но ищет уже не глаза, а NSFW глаза. Точнее картинки с порно и эротикой. NSFW Filter блюрит запрещенку в хлам, чтобы не смущать коллег заглядывающих в твой монитор :) Увы, но посмотреть всем известный сайт не выйдет, потому что, даже на максимально безопасных настройках, расширение пропускает часть картинок. Особенно тяжело расширению дается детектирование групповухи :)



Хотя, от случайного захода на порносайт в процессе серфинга, оно спасет.

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



Впрочем, не обязательно использовать интернет только для развлечения. У журналистов новостные сайты это хлеб насущный, где они собирают материал для публикаций. Вот только некоторые порталы требуют подписку для доступа к полным текстам некоторых статей, что может быть довольно разорительно, если приходится делать фактчекинг не на одном-двух сайтах, а на десятках. Помочь в этом позволяет расширение Bypass Paywalls. Оно прикидывается поисковым ботом и проходит через заглушки с требованием заплатить. Что логично, расширение удалено из всех официальных браузерных магазинов, потому ставить его придется вручную, качая напрямую с GitHub. Жаль только, что русские сайты в списке практически не представлены, но разработчик поддерживает связь со своими пользователями и можно попросить его добавить новые адреса. Последнее обновление было два месяца назад, так что есть надежда, что проект не заброшен и можно попробовать договориться с программистом.

В завершении подборки, расскажу еще об одном расширении, которое упрощает работу с Internet Archive. Оно называется Wayback Machine и позволяет быстро просмотреть, как выглядел открытый сайт несколько лет назад. Можно посмотреть как прошлые, так и самую первую версию сайта, а еще отправить его архивироваться:



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



Всем удачного серфинга!

Если у вас есть на примете интересные и необычные расширения, мало известные широкой общественности пишите о них в комментариях!

Подробнее..
Категории: Блог компании ruvds.com , Браузеры , Расширения для браузеров , Расширения , Google chrome , Firefox , Chrome , Подборка , Браузер

Расширения для Google Chrome, без которых вы уже не сможете представить свою работу

18.11.2020 12:16:11 | Автор: admin


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

1. Recent Tabs with your browsing history

image

Расширение из разряда must have для тех, кто иногда по ошибке закрывает нужные вкладки. По клику выводит 15 последних открытых вкладок. Это как Ctrl-Shift-T, только выбрать можно любую закрытую ранее вкладку.

2. LongClick New Tab

image

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

3. Better History

image

Замена стандартной истории браузера для более удобной работы с ней в виде (наконец-то) вкладок по часам и дням недели. Вызывается аналогично стандартной истории посещений из меню или по Ctrl + H

4. Группировка вкладок

image

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

5. Read This Later

image

По роду моей деятельности мне часто приходится открывать несколько вкладок одновременно для решения какой-либо задачи, причем иногда приходится откладывать эту задачу чтобы возвратиться к ней немного позднее, так как в приоритете возникла другая задача, либо вкладок открыто уже столько, что у них даже значков не видно. В этом случае на помощь приходит расширение Read This Later, которое позволяет сохранить нужные ссылки для того, чтобы прочитать их позднее. На любой странице кликаете правой кнопкой мыши и выбираете Read This Later. Страница появится в меню самого расширения, там же можно удалить ненужные одним кликом. Зачем оно нужно если есть закладки из коробки, причем с папками? Главная проблема вкладок как раз и кроется в этих самых папках, которые просто хоронят в себе все страницы. Лично у меня в них уже пара десятков папок по разным темам, во многих из них еще по нескольку папок, и так далее, и разумеется я свято верю в то, что рано или поздно я все это буду читать. Когда-нибудь. А тут все динамично: сохранил нужные, вернулся к ним позднее, удалил ненужные, снова добавил новые, и так далее. Сдается мне что по этой причине папки оно и не поддерживает, ибо иначе это был бы просто очередной аналог закладок.

6. Translator

image

Настоящий мастхэв для тех, кому требуется время от времени переводить слова на другой язык или обратно. Очень сильно выручает когда нужно задать вопрос на StackOverflow (например), однако не получается вспомнить как пишется какое-либо слово. Ранее мне приходилось постоянно открывать Google Translate как новую страницу, что изрядно напрягало. Поддерживает какое-то просто неадекватно большое количество сервисов для перевода, однако Google Translate, конечно же, имеется.

7. Конвертер валют PRO

image

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

8. Strong Password Generator

image

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

9. OnionLink .onion plugin



Свершилось! Расширение для просмотра .onion сайтов прямо в Chrome для тех, кому важна не столько безопасность, сколько просмотр их контента. Просто установите данное расширение и переходите по ссылкам на .onion сайты или вводите их как обычные сайты в строке адреса. Расширение работает, и со своими прямыми обязанностями справляется, правда платное, хоть 64 рубля это и небольшая сумма.

10. Chrome extension source viewer

image

Расширение больше подойдет разработчикам, однако я просто не мог не добавить его в эту подборку, так как оно будет полезно и тем, кто предпочитает хранить файлы расширений локально (что довольно актуально, ибо на момент написания данной статьи некоторые расширения оказались удалены из магазина Chrome, поэтому пришлось искать их аналоги, причем в большинстве случаев это оказывались форки этих удаленных расширений. В самом Chrome удаленные расширения при этом работали и работают до сих пор. Поэтому позаботьтесь о резервных копиях заранее если не хотите остаться без любимых расширений на новом компьютере). Позволяет скачивать нужные расширения и/или просматривать их исходный код. Такие расширения можно устанавливать в дальнейшем в разделе Загрузить распакованное расширение в разделе Расширения в настройках Chrome. Работает на странице конкретного расширения в магазине расширений в Google Chrome (Настройки > Расширения > Подробнее > Перейти в Интернет-магазин Chrome).

11. SimpleExtManager

image

И на десерт настоящая бомба! Расширение для работы с расширениями и темами! Позволяет получить список установленных расширений и тем и отключать ненужные просто снимая соответствующие галочки без перехода в настройки браузера. Очень выручает когда некоторые расширения начинают чудить на некоторых сайтах, либо просто занимать место, особенно если расширений довольно много, не все они нужны часто, но удалять их при этом незачем, либо какое-то расширение просто упало (да, бывает и такое). Их можно просто отключить, а потом снова включить буквально парой кликов, и самое главное здесь то, что они остаются в самом расширении даже когда отключены, поэтому для их последующего включения не нужно проходить целый квест.

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

Благодарю за внимание!
Подробнее..
Категории: Javascript , Браузеры , Расширения для браузеров , Расширения , Расширения chrome , Google chrome , Chrome , Расширения браузеров

Пишем расширение-читалку для Habr

12.02.2021 08:05:33 | Автор: admin

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

В данной статье я хочу показать, как можно совместить утренние сборы на работу с прочтением статей на Habr. Для этого мы напишем простое расширение для браузеров на базе chromium (в частности, Chrome и Opera), которое будет зачитывать для нас вслух открытый во вкладке пост на Habr.

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

Автор туториалаАвтор туториала

Шаг 1. Определим состав расширения

Наше расширение будет состоять из нескольких частей:

  • манифест-файл manifest.json с описанием самого расширения, указанием его основных разрешений, прописыванием путей к иконкам, фоновым скриптами т.д.;

  • HTML-страница popup.html и CSS-файл style.css для popup-формы, на которой будет расположена панель управления воспроизведением аудио;

  • фоновый JavaScript-файл content.js, который будет обращаться к странице с открытым постом и воспроизводить её текстовое содержимое;

  • JavaScript-файл popup.js для popup-формы, с помощью которого фоновому скрипту будут передаваться команды пользователя, заданные через popup-форму;

  • иконки расширения 3 размеров: 128x128, 48x48, 16x16 пикселей.

В итоге получаем примерно такую структуру:

Структура проектаСтруктура проекта

Шаг 2. Подготавливаем манифест-файл

С помощью манифеста мы:

  • сообщаем о том, что мы сделали за расширение;

  • указываем, где хранятся его иконки;

  • запрашиваем доступы к вкладкам;

  • сообщаем о том, что будем выполнять фоновые скрипты;

  • указываем, какой popup мы будем использовать.

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

Содержимое manifest.json 
{  "manifest_version": 2,  "name": "Habr Reader",  "description": "Расширение позволяет воспроизводить текст на странице со статьей на Хабре с возможностью изменения языка и скорости воспроизведения",  "version": "1.01",  "developer": {    "name": "Enji Rouz",    "url": "https://github.com/EnjiRouz/Habr-Reader-Extension"  },  "icons": {    "16": "res/icon16.png",    "48": "res/icon48.png",    "128": "res/icon128.png"  },  "permissions": [    "storage",    "http://*/*",    "https://*/*",    "tabs",    "contextMenus"  ],  "background": {    "scripts": ["js/content.js"],    "persistent": true  },  "browser_action": {    "default_icon": "res/icon128.png",    "default_popup": "popup.html",    "icon_128": "res/icon128.png"  },  "content_scripts": [{    "matches": ["<all_urls>"],    "js": ["js/content.js"]  }],  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self';"}

Шаг 3. Делаем popup-форму для управления воспроизведением

С помощью данной формы мы будем ненапрямую:

  • запускать проигрывание синтезированной речи;

  • ставить воспроизведение на паузу;

  • полностью останавливать воспроизведение;

  • менять скорость воспроизведения;

  • менять язык речи с русского на английский, и наоборот.

Для этого нам потребуется сделать в popup.html несколько кнопок для управления воспроизведением, поле для ввода скорости и переключатель для языков. К странице мы привяжем файл стилей style.css, а также скрипт popup.js, который мы будем запускать после того, как форма полностью загрузится. Для этого добавим после его определения ключевое слово defer.

Содержимое popup.html 
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <link rel="stylesheet" href="css/style.css" type="text/css"/>     <script type="text/javascript" src="js/popup.js" defer></script>     <title>Habr Reader</title> </head> <body> <div class="tool-bar">     <ul>         <li>             <button id="play-button"></button>         </li>         <li>             <button id="pause-button"></button>         </li>         <li>             <button id="stop-button"></button>         </li>         <li>             <label for="speed">Speed</label>             <input type="number" name="speed" id="speed" placeholder="1" value="1" min="0.5" max="2.0"                    step="0.1">         </li>             <li>             <label><input type="radio" name="speech-language" value="ru-RU" id="ru" checked>ru-RU</label>         </li>         <li>             <label><input type="radio" name="speech-language" value="en-US" id="en">en-US</label>         </li>     </ul> </div> </body> </html>
Содержимое style.css 
body{    width:180px;    height:60px;    font-family: arial, serif;    font-size: 12px;}.tool-bar{    display: block;    width: 180px;    height: 60px;    line-height: 30px;    background-color: #242424;}.tool-bar ul{    list-style-type: none;    margin: 0;    padding: 0;}.tool-bar ul li{    display: inline-block;    margin: 0;    padding: 0;}button{    background: none;    color: inherit;    border: none;    padding: 0;    font: inherit;    cursor: pointer;    outline: inherit;}.tool-bar ul li button, label{    padding: 0 4px;    text-decoration: none;    color: #FFFFFF;}.tool-bar ul li button:hover{    text-decoration: underline;}input {    width:30px;    padding: 6px 0 4px 10px;    border: 1px solid #9e9e9e;    background: #242424;    border-radius: 4px;    color: #FFFFFF;}

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

Раскрытая popup-форма расширенияРаскрытая popup-форма расширения

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

Упаковку самого расширения мы рассмотрим в конце.

Шаг 4. Передаём управление фоновому скрипту из popup-формы

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

Для этого на каждое событие мы добавим обращение к активной вкладке текущего окна, в котором передадим сообщение. В нём мы укажем следующее:

  • название команды, которую нужно выполнить, например, todo: "play", чтобы сообщить, что мы хотим начать либо продолжить воспроизведение;

  • значения переменных, которые нужны будут для выполнения этой команды, например, newSpeed: speed.value, lang: language,где мы передадим новое значение скорости и языка.

Содержимое popup.js 
// определение кнопокconst playButton = document.getElementById("play-button");const pauseButton = document.getElementById("pause-button");const stopButton = document.getElementById("stop-button");// определение полей вводаconst speed = document.getElementById("speed");// назначение действий на соответствующие кнопки/поляif(playButton)    playButton.addEventListener("click", play);if(pauseButton)    pauseButton.addEventListener("click", pause);if(stopButton)    stopButton.addEventListener("click", stop);if(speed)    speed.addEventListener("input", changeSpeed);// применение настроек на странице происходит при помощи их передачи в сообщении,// предназначенном для background скриптаfunction play(){    // определение выбранного языка воспроизведения    let language = document.querySelector('input[name="speech-language"]:checked').value;    chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {        chrome.tabs.sendMessage(tabs[0].id, {todo: "play", newSpeed: speed.value, lang: language});    });}function pause(){    chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {        chrome.tabs.sendMessage(tabs[0].id, {todo: "pause"});    });}function stop(){    chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {        chrome.tabs.sendMessage(tabs[0].id, {todo: "stop"});    });}function changeSpeed(){    chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {        chrome.tabs.sendMessage(tabs[0].id, {todo: "changeSpeed", newSpeed: speed.value});    });}

Шаг 5. Пишем фоновый скрипт для синтеза речи

На самом деле,браузер уже содержит встроенные возможности для синтеза речи. Их мы и будем использовать.

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

Вот, что будет происходить в нашем фоновом скрипте:

  1. При загрузке страницы, содержащей элемент с ID "post-content-body", скрипт будет рекурсивно складывать содержимое текстовых элементов внутри родительского, чтобы сформировать текст для будущего синтеза (это гораздо проще, чем запрашивать разрешение на использование Habr API, но стоит учитывать, что однажды этот ID может поменяться);

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

  3. Далее ожидается действие пользователя через popup-форму. Как только фоновый скрипт получит сообщение от popup-формы с командой и/или значением переменных, то он инициализирует переменные внутри себя и запустит соответствующие функции, например, найдёт голос для нужного языка, а затем начнёт синтез речи в случае нажатия на кнопку воспроизведения.

Конечно же, символы, содержимое таблиц, ссылки и некоторое другое нестандартное текстовое наполнение будут криво обрабатываться встроенным синтезом речи, да и не всегда ударение будет верным. Но зато, в целом вышла неплохая автоматизация ^_^

Далее вы можете модифицировать код на своё усмотрение.

Содержимое content.js 
// создание средства синтеза речи и получение списка голосовconst synthesis = window.speechSynthesis;const voices = synthesis.getVoices();const utterance = new SpeechSynthesisUtterance();// текущий символ, который синтезируется в данный момент времениlet currentCharacter;// назначение события на момент, когда речь перестанет проигрыватьсяutterance.addEventListener("end", () => {    currentCharacter = null;});// получение символа, который синтезируется в данный моментutterance.addEventListener("boundary", event => {    currentCharacter = event.charIndex;});// переменные: язык речи, скорость проигрывания аудио, воспроизводимый текстlet speechLanguage = "ru-RU";let playerSpeed = 1;let textToPlay = "Открой статью, а потом уже нажимай сюда";/** * Рекурсивно прибавляет текстовое содержимое дочерних элементов для формирования текста поста * @param elementForSearchingIn - родительский элемент, в котором будет осуществляться поиск текстовых нодов */function joinTextNodes(elementForSearchingIn) {    if (elementForSearchingIn.hasChildNodes()) {        elementForSearchingIn.childNodes.forEach(function (node) {            joinTextNodes(node)        });    } else if (elementForSearchingIn.nodeType === Text.TEXT_NODE) {        textToPlay += " " + elementForSearchingIn.textContent;    }}/** * Поиск голоса для заданного языка речи * @param lang - заданный язык речи * @returns {null|SpeechSynthesisVoice} */function findVoice(lang) {    for (let i = 0; i < voices.length; i++) {        if (voices[i].lang === lang)            return voices[i];    }    return null;}/** * Проигрывание синтезированного высказывания */function playTextToSpeech() {    // если проигрывание речи было поставлено на паузу - происходит продолжение проигрывания    if (synthesis.paused && synthesis.speaking)        return synthesis.resume();    if (synthesis.speaking) return;    // определение параметров синтезируемой речи    utterance.text = textToPlay;    utterance.rate = playerSpeed || 1;    utterance.lang = speechLanguage;    utterance.voice = findVoice(utterance.lang);    // проигрывание речи    synthesis.speak(utterance);}/** * Установка проигрывания синтезированной речи на паузу */function pauseTextToSpeech() {    if (synthesis.speaking)        synthesis.pause();}/** * Остановка (прекращение) проигрывания синтезированной речи */function stopTextToSpeech() {    synthesis.resume();    synthesis.cancel();}/** * Изменение скорости речи в режиме реального времени */function changeSpeed() {    if (synthesis.paused && synthesis.speaking) return;    if (currentCharacter === null) return;    stopTextToSpeech();    playTextToSpeech(utterance.text.substring(currentCharacter));}/** * Осуществление взаимодействия pop-up формы с background скриптом при помощи отправки-получения сообщений * в активной вкладке с передачей в них необходимых для работы параметров. * Переданные параметры перезаписывают предыдущие настройки */chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {    switch (request.todo) {        case "play":            playerSpeed = request.newSpeed;            speechLanguage = request.lang;            playTextToSpeech();            break;        case "changeSpeed":            playerSpeed = request.newSpeed;            changeSpeed();            break;        case "pause":            pauseTextToSpeech();            break;        case "stop":            stopTextToSpeech();            break;    }    sendResponse({        response: "Message received"    });});// подготовка текста поста к чтениюwindow.onload = function () {    let contentBody = document.getElementById("post-content-body");    if (contentBody) {        textToPlay = "";        joinTextNodes(contentBody);        alert("Текст поста готов к чтению")    }};

Шаг 6. Упаковка и установка расширения

Я опишу упаковку и установку для Opera и Chrome. В других браузерах процесс, скорее всего, будет аналогичным, поскольку основные действия мы будем делать через стандартный раздел браузера "Расширения".

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

  • Opera Меню Расширения Расширения включить Режим Разработчика Упаковка расширения

  • Google Chrome Дополнительные инструменты Расширения включить Режим Разработчика Упаковка расширения

На выходе вы получите crx-файл расширения, который, по факту, представляет собой архив с запакованным проектом.

Расширение можно установить через раздел "Расширения" двумя путями:

  • если модификация не требуется - для ряда браузеров достаточно перетащить подготовленный crx-файл из папки с проектом в окно с открытым разделом расширений и нажать на "Установить";

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

Заключение

На этом мой небольшой туториал подошёл к концу.

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

Кстати, мой хороший товарищ сделал на основе моего проекта расширение для того, чтобы оставлять для себя комментарии к объявлениям на Avito. Кому интересно - код и релиз вы найдёте на его GitHub.

Документированные исходники моего расширения и его запакованную версию можно найти здесь.

Спасибо за внимание! До новых встреч!

Подробнее..
Категории: Javascript , Автоматизация , Лайфхаки для гиков , Habr , Расширения для браузеров , Расширения , Расширения браузеров , Расширение , Opera , Расширение для chrome , Читалка , Читалки , Text-to-speech , Браузерные расширения , Мультиязычность

Пишем расширение для MediaWiki

12.05.2021 08:15:25 | Автор: admin

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

В этой статье я покажу, как написать простейшее расширение для Медиавики, включающее в себя новый метод API, расширение парсера и немного js/css для фронтенда. А чтобы не было скучно, приплетем сюда работу с Google Knowledge Graph.

Расширения MediaWiki

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

Пишутся расширения, как правило, на php+jQuery. Возможность встраиваться в код ядра MediaWiki (или в код других расширений) реализована через т.н. хуки. Хуки позволяют вызывать дополнительный код по заданным событиям. Примерами таких событий могут быть: сохранение страницы, вызов поиска по сайту, открытие страницы на редактирование и так далее.

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

Что будем писать?

Готовое расширение можно взять тут:
https://github.com/Griboedow/GoogleKnowledgeGraph

Давайте развлечемся и напишем что-нибудь бесполезное. Скажем, расширение, которое будет вытаскивать описания с Google Knowledge Graph.

Т.е. расширение будет вот это:

Код этого приложения прост и изящен как <GoogleKnowledgeGraph query="Мэльхэнанвенанхытбельхын"/>

Превращать в это:

Штука довольно бесполезная, но она послужит хорошей иллюстрацией. Еще и с графом знаний Гугла поиграемся!

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

Как оно будет работать

Примерный принцип работы расширения выглядит так:

  1. Пользователь сохраняет страницу, где в тексте присутствуют теги <GoogleKnowledgeGraph query="Ричард Докинз">.

    • MediaWIki позволяет использовать не только формат тега, но и формат функции парсера <link>: {{#GoogleKnowledgeGraph||query=Ричард Докинз}}.

  2. Расширение функции парсера превращает тег в html код <span class="googleKnowledgeGraph">Ричард Докинз</span>

  3. JS код при загрузке страницы идет по всем элементам .googleKnowledgeGraph и запрашивает через API нашего же расширения описания терминов, подставляя их в title.

  4. API нашего расширения будет максимально примитивным: он будет передавать запросы от фронтенда на Google API, чистить ответ от всего лишнего и передавать очищенное описание сущности на фронт.

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

Итого, нам потребуется:

  1. Определить манифест нашего расширения.

  2. Расширить MediaWIki API, добавив запрос на получение описания из Google Knowledge Graph

  3. Расширить парсер MediaWiki, добавив обработку нового тега.

  4. Добавить JS код, который будет выполняться по загрузке страницы

  5. Подгрузить наше расширение в MediaWiki

  6. Поделиться результатом наших трудов с сообществом.

А еще перед началом работы вам потребуется токен для работы с Google Knowledge Graph API. Сгенерировать его можно тут.

Создаем структуру расширения

Типичная иерархия файлов и папок для MediaWIki расширения выглядит так:

extensions                    <-- Папка всех расширений MediaWiki GoogleKnowledgeGraph      <-- Подпапка с нашим расширением      extension.json   <-- Манифест нашего расширения     i18n           <-- Каталог с используемыми строками для разных языков      en.json    <-- Строки на английском      qqq.json   <-- Описания строк для облегчения жизни переводчиков      ru.json    <-- Строки на русском     includes                             <-- PHP код      ApiGoogleKnowledgeGraph.php      <-- Расширение API      GoogleKnowledgeGraph.hooks.php   <-- Расширение парсера и другие хуки     modules                                <-- Папка с JS модулями          ext.GoogleKnowledgeGraph           <-- В нашем случае модуль только 1             ext.GoogleKnowledgeGraph.css   <-- CSS стили нашего модуля             ext.GoogleKnowledgeGraph.js    <-- JS код нашего модуля

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

Интернационализация (i18n)

Для того, чтобы нашим расширением было удобно пользоваться на всех языках, можно воспользоваться стандартной системой интернационализации banana-i18n. Помимо облегчения интернационализации, эта система также позволяет хранить все тексты в одном месте (а не раскиданными по коду). Выглядит это примерно так:

qqq.json

{"@metadata": {"authors": [ "Developer Name" ]},"googleknowledgegraph-description": "Description of the extension, to be show in Special:Vesion.","apihelp-askgoogleknowledgegraph-summary" : "Help string for 'askgoogleknowledgegraph' API request","apihelp-askgoogleknowledgegraph-param-query": "Help string for 'query' parameter of API request 'askgoogleknowledgegraph'"}

en.json

{"@metadata": {"authors": [ "Nikolai Kochkin" ]},"googleknowledgegraph-description": "The extension gets brief description from Google Knowledge Graph","apihelp-askgoogleknowledgegraph-summary" : "API to get description from Google Knowledge Graph","apihelp-askgoogleknowledgegraph-param-query": "String to ask from Google Knowledge Graph"}

Создаем манифест расширения (extension.json)

Для начала разберемся, как нам сообщить MediaWiki, что нужно загрузить то или иное расширение. Путей на самом деле два:

  • Использоватьrequire_once( '/path/to/file.php' ). Этот метод считается устаревшим, так что мы его подробно не будем рассматривать.

  • Использовать функцию wfLoadExtension('ExtensionName'). Сейчас этот способ считается основным, так что на нем и остановимся. http://personeltest.ru/aways/habr.com/ru/company/veeam/blog/544534

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

Определяем манифест (файл extension.json):

{"name": "GoogleKnowledgeGraph","version": "0.1.0","author": ["Nikolai Kochkin"],"url": "http://personeltest.ru/aways/habr.com/ru/company/veeam/blog/544534/","descriptionmsg": "googleknowledgegraph-description","license-name": "GPL-2.0-or-later","type": "parserhook","requires": {"MediaWiki": ">= 1.29.0"},"MessagesDirs": {"GoogleKnowledgeGraph": ["i18n"]},"AutoloadClasses": {"GoogleKnowledgeGraphHooks": "includes/GoogleKnowledgeGraph.hooks.php","ApiAskGoogleKnowledgeGraph": "includes/ApiAskGoogleKnowledgeGraph.php"},"APIModules": {"askgoogleknowledgegraph": "ApiAskGoogleKnowledgeGraph"},"Hooks": {"OutputPageParserOutput": "GoogleKnowledgeGraphHooks::onBeforeHtmlAddedToOutput","ParserFirstCallInit": "GoogleKnowledgeGraphHooks::onParserSetup"},"ResourceFileModulePaths": {"localBasePath": "modules","remoteExtPath": "GoogleKnowledgeGraph/modules"},"ResourceModules": {"ext.GoogleKnowledgeGraph": {"localBasePath": "modules/ext.GoogleKnowledgeGraph","remoteExtPath": "GoogleKnowledgeGraph/modules/ext.GoogleKnowledgeGraph","scripts": ["ext.GoogleKnowledgeGraph.js"],"styles": ["ext.GoogleKnowledgeGraph.css"]}},"config": {"GoogleApiLanguage": {"value": "ru","path": false,"description": "In which language you want to get result from the Knowledge Graph","public": true},"GoogleApiToken": {"value": "","path": false,"description": "API token to be used with Google API","public": false}},"ConfigRegistry": {"GoogleKnowledgeGraph": "GlobalVarConfig::newInstance"},"manifest_version": 2}
Разбираем extension.json по частям

Первая часть файла определяет то, что пользователь увидит в описании расширения на странице Special:Version

"name": "GoogleKnowledgeGraph","version": "0.1.0","author": ["Nikolai Kochkin"],"url": "http://personeltest.ru/aways/habr.com/ru/company/veeam/blog/544534/","descriptionmsg": "googleknowledgegraph-description","license-name": "GPL-2.0-or-later","type": "parserhook",

Далее мы указываем зависимости нашего расширения: с какими версиями MediaWIki расширение может работать, какие версии php требуются, какие расширения должны быть уже установлены и так далее.

"requires": {"MediaWiki": ">= 1.29.0"},

Затем мы указываем, где искать файлы со строками i18n

"MessagesDirs": {"GoogleKnowledgeGraph": ["i18n"]},

И сообщаем, в каких файлах искать классы для автоподгрузки. Подробнее тут.

"AutoloadClasses": {"GoogleKnowledgeGraphHooks": "includes/GoogleKnowledgeGraph.hooks.php","ApiAskGoogleKnowledgeGraph": "includes/ApiAskGoogleKnowledgeGraph.php"},

Заявляем, что мы реализовываем API метод askgoogleknowledgegraph в классе ApiAskGoogleKnowledgeGraph

"APIModules": {"askgoogleknowledgegraph": "ApiAskGoogleKnowledgeGraph"},

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

"Hooks": {"BeforePageDisplay": "GoogleKnowledgeGraphHooks::onBeforePageDisplay","ParserFirstCallInit": "GoogleKnowledgeGraphHooks::onParserSetup"},

Сообщаем, что модули наши лежат в папке modules

"ResourceFileModulePaths": {"localBasePath": "modules","remoteExtPath": "GoogleKnowledgeGraph/modules"},

И определяем наш фронтенд модуль с js и css. Когда модулей несколько, можно указать в коде зависимости между ними.

"ResourceModules": {"ext.GoogleKnowledgeGraph": {"localBasePath": "modules/ext.GoogleKnowledgeGraph","remoteExtPath": "GoogleKnowledgeGraph/modules/ext.GoogleKnowledgeGraph","scripts": ["ext.GoogleKnowledgeGraph.js"],"styles": ["ext.GoogleKnowledgeGraph.css"]}},

И, наконец, задаем дополнительные параметры конфигурации нашего расширения

"config": {"GoogleApiLanguage": {"value": "ru","path": false,"description": "In which language you want to get result from the Knowledge Graph","public": true},"GoogleApiToken": {"value": "","path": false,"description": "API token to be used with Google API","public": false}},"ConfigRegistry": {"GoogleKnowledgeGraph": "GlobalVarConfig::newInstance"},

В LocalSettings.php опции будут иметь стандартный префикс wg

$wgGoogleApiToken = 'your-google-token';$wgGoogleApiLanguage = 'ru';

И, наконец, задаем версию схемы манифеста

"manifest_version": 2

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

Расширяем API

Для начала реализуем API.

В extension.json мы заявили, что у нас будет метод askgoogleknowledgegraph, реализованный в классе ApiAskGoogleKnowledgeGraph из файла includes/ApiAskGoogleKnowledgeGraph.php:

// extension.json fragment"AutoloadClasses": {    <...>    "ApiAskGoogleKnowledgeGraph": "includes/ApiAskGoogleKnowledgeGraph.php"},"APIModules": {           "askgoogleknowledgegraph": "ApiAskGoogleKnowledgeGraph"     },

Теперь реализуем наш метод. Файл includes/ApiAskGoogleKnowledgeGraph.php:

<?php/**  * Класс включает в себя реализацию и описание API метода askgoogleknowledgegraph * Для простоты я не реализую кеширование, любопытные могут подсмотреть реализацию тут:  * https://github.com/wikimedia/mediawiki-extensions-TextExtracts/blob/master/includes/ApiQueryExtracts.php */use MediaWiki\MediaWikiServices;class ApiAskGoogleKnowledgeGraph extends ApiBase {public function execute() {$params = $this->extractRequestParams();// query - обязательный параметр, так что $params['query'] всегда определен$description = ApiAskGoogleKnowledgeGraph::getGknDescription( $params['query'] );/** * Определяем результат для Get запроса.  * На самом деле Post запрос отработает с тем же успехом,  * если специально не отслеживать тип запроса \_()_/. */$this->getResult()->addValue( null, "description", $description );}/**  * Список поддерживаемых параметров метода */public function getAllowedParams() {return ['query' => [ApiBase::PARAM_TYPE => 'string',ApiBase::PARAM_REQUIRED => true,]];}/** * Получаем данные из Google Knowledge Graph,      * предполагая, что самый первый результат и есть верный. */private static function getGknDescription( $query ) {/** * Вытаскиваем параметры языка и токен. * Все параметры в LocalSettings.php имеют префикс wg, например: wgGoogleApiToken. * Здесь же мы их указываем без префикса */$config = MediaWikiServices::getInstance()->getConfigFactory()->makeConfig( 'GoogleKnowledgeGraph' );$gkgToken = $config->get( 'GoogleApiToken' );$gkgLang = $config->get( 'GoogleApiLanguage' );$service_url = 'https://kgsearch.googleapis.com/v1/entities:search';$params = ['query' => $query ,'limit' => 1,'languages' => $gkgLang,'indent' => TRUE,'key' => $gkgToken,];$url = $service_url . '?' . http_build_query( $params );$ch = curl_init();curl_setopt( $ch, CURLOPT_URL, $url) ;curl_setopt( $ch, CURLOPT_RETURNTRANSFER, 1 );$response = json_decode( curl_exec( $ch ), true );curl_close( $ch );if( count( $response['itemListElement'] ) == 0 ){return "Nothing found by your request \"$query\"";}if( !isset( $response['itemListElement'][0]['result'] ) ){return "Unknown GKG result format for request \"$query\"";}if( !isset($response['itemListElement'][0]['result']['detailedDescription'] ) ){return "detailedDescription was not provided by GKG for request \"$query\"";}if( !isset( $response['itemListElement'][0]['result']['detailedDescription']['articleBody'] ) ){return "articleBody was not provided by GKG for request \"$query\"";}return $response['itemListElement'][0]['result']['detailedDescription']['articleBody'];}}

Теперь мы можем обращаться по апи к нашей вики:

Get /api.php?action=askgoogleknowledgegraph&query=Выхухоль&format=jsonResponse body:{"description": "Выхухоль, или русская выхухоль, или хохуля,  вид млекопитающих отряда насекомоядных из трибы Desmanini подсемейства Talpinae семейства кротовых. Один из двух видов трибы; вторым видом является пиренейская выхухоль."}

Расширяем парсер и используем прочие хуки

// Фрагмент файла extension.json"AutoloadClasses": {"GoogleKnowledgeGraphHooks": "includes/GoogleKnowledgeGraph.hooks.php",<...>},"Hooks": {"BeforePageDisplay": "GoogleKnowledgeGraphHooks::onBeforePageDisplay","ParserFirstCallInit": "GoogleKnowledgeGraphHooks::onParserSetup"},

В extension.json мы заявили, что в классе GoogleKnowledgeGraphHooks из файла includes/GoogleKnowledgeGraph.hooks.php реализуем расширения для хуков:

  • OutputPageParserOutput в методе onBeforeHtmlAddedToOutput;

  • ParserFirstCallInit в методе onParserSetup

Немножко про используемые хуки:

  • OutputPageParserOutput позволяет выполнить какой-то код после того, как парсер закончил формировать html, но перед тем, как html был добавлен к аутпуту. Здесь мы, например, можем подгрузить фронтенд. Фронтенд мы целиком расположили в модуле ext.GoogleKnowledgeGraph, так что достаточно будет подгрузить его.

  • ParserFirstCallInit позволяет расширить парсер дополнительными методами. Мы добавим в парсер обработку тега <GoogleKnowledgeGraph>.

Итак, реализация (файл includes/GoogleKnowledgeGraph.hooks.php):

<?php/** * Хуки расширения GoogleKnowledgeGraph  */class GoogleKnowledgeGraphHooks {/** * Сработает хук после окончания работы парсера, но перед выводом html.  * Детали тут: https://www.mediawiki.org/wiki/Manual:Hooks/OutputPageParserOutput */public static function onBeforeHtmlAddedToOutput( OutputPage &$out, ParserOutput $parserOutput ) {// Добавляем подгрузку модуля фронтенда для всех страниц, его определение ищи в extension.json$out->addModules( 'ext.GoogleKnowledgeGraph' );return true;}/** * Расширяем парсер, добавляя обработку тега <GoogleKnowledgeGraphHooks> */public static function onParserSetup( Parser $parser ) {$parser->setHook( 'GoogleKnowledgeGraph', 'GoogleKnowledgeGraphHooks::processGoogleKnowledgeGraphTag' );return true;}/** * Реализация обработки тега <GoogleKnowledgeGraph>  */public static function processGoogleKnowledgeGraphTag( $input, array $args, Parser $parser, PPFrame $frame ) {// Парсим аргументы, переданные в формате <GoogleKnowledgeGraph arg1="val1" arg2="val2" ...> if( isset( $args['query'] ) ){$query = $args['query'];}else{// В тег не был передан аргумент query, так что и выводить нам нечегоreturn '';}return '<span class="googleKnowledgeGraph">' . htmlspecialchars( $query ) . '</span>';}}

Добавляем фронтенд

Фронтенд свяжет воедино все, что мы реализовали выше.

// Фрагмент файла extension.json    "ResourceModules": {"ext.GoogleKnowledgeGraph": {"localBasePath": "modules","remoteExtPath": "GoogleKnowledgeGraph/modules","scripts": ["ext.GoogleKnowledgeGraph.js"],"styles": ["ext.GoogleKnowledgeGraph.css"],"dependencies": []}},  "ResourceFileModulePaths": {"localBasePath": "modules","remoteExtPath": "GoogleKnowledgeGraph/modules"},

В extension.json мы заявили, что у нас есть один модуль ext.GoogleKnowledgeGraph, который находится в папке modules и состоит из двух файлов:

  • modules/ext.GoogleKnowledgeGraph/ext.GoogleKnowledgeGraph.js

  • modules/ext.GoogleKnowledgeGraph/ext.GoogleKnowledgeGraph.css

Загрузку модуля мы реализовали чуть раньше в методе onBeforeHtmlAddedToOutput. Определим теперь и сам код модуля.

Для начала зададим стили
(файл modules/ext.GoogleKnowledgeGraph/ext.GoogleKnowledgeGraph.css):

.googleKnowledgeGraph{    border-bottom: 1px dotted #000;    text-decoration: none;}

А теперь возьмемся за JS
(файл modules/ext.GoogleKnowledgeGraph/ext.GoogleKnowledgeGraph.js):

( function ( mw, $ ) {  /**   * Ищем все элементы с <span class="googleKnowledgeGraph">MyText</span>,   * вытаскиваем MyText и отправляем запрос   * /api.php?action=askgoogleknowledgegraph&query=MyText   * После чего добавляем результат в 'title'.   */$( ".googleKnowledgeGraph" ).each( function( index, element ) {$.ajax({type: "GET", url: mw.util.wikiScript( 'api' ),data: { action: 'askgoogleknowledgegraph', query: $( element ).text(),format: 'json',},dataType: 'json',success: function( jsondata ){$( element ).prop( 'title', jsondata.description );}});});}( mediaWiki, jQuery ) );

JS код довольно прост. jQuery нам достался даром, поскольку MediaWiki подгружает его автоматически.

Подгружаем наше расширение и радуемся

Для загрузки расширения, как мы уже обсуждали, потребуется поправить файл LocalSettings.php. Добавляем в самый конец:

// Фрагмент файла LocalSettings.php<?php<...>  wfLoadExtension( 'GoogleKnowledgeGraph' );$wgGoogleApiToken = "your-google-token";$wgGoogleApiLanguage = 'ru';

Можно пробовать! Добавим на страницу что-нибудь эдакое:

Даже <GoogleKnowledgeGraph query="прикольный флот"/> может стать отстойным.

И получим:

Делимся с сообществом

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

Типичная страница с описанием расширенияТипичная страница с описанием расширения

Заключение

В статье был описан случай довольно простого расширения, но, на самом деле, такие расширения как iFrame, CategoryTree, Drawio и многие другие не очень далеко ушли по сложности.

За скобками остались такие вещи, как работа с базой, кэширование, OOUI и много-многое другое. Все ж я вас не напугать хотел, а как раз наоборот показать, что писать расширения под вики на самом деле совсем не сложно и не страшно.

Ссылки

Подробнее..
Категории: Краудсорсинг , Википедия , Разработка веб-сайтов , Php , Cms , Блог компании veeam software , Расширения , Туториал , База знаний , Подготовка технической документации , Mediawiki , Google knowledge graph

Функциональный Kotlin. Во имя добра, радуги и всего такого

30.01.2021 00:09:39 | Автор: admin

Введение

Сам по себе Kotlin очень мощный инструмент, но многие часто используют его не на полную мощность, превращая его в какую-то... Java 6. Попробую рассказать почему так делать не надо и как использовать функциональные фичи языка на полную.

Функции высшего порядка

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

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

val foo: () -> Unit = {  }

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

run(foo)

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

str.run(String::isEmpty)

Перейдем к более конкретному кейсу. Допустим, нам нужно распарсить строки определенным образом, но только в одном месте в программе. Очевидно, что логика будет повторяться. Что делать? Создадим для этого отдельный объект с одним методом? Или пропишем для каждого "ручками" прямо на месте?

Нет, копить технический долг ни к чему, лучше мы сделаем, например, что-то такое:

val parse: (String) -> List<Int> = { it.split(":").map(String::toInt) }val (xMin, yMin) = parse(data["from"])val (xMax, yMax) = parse(data["to"])

Функции области видимости

Теперь, когда мы разобрались с ФВП, перейдем к вещам, которыми, скорее всего, пользовались все. let,run,with,apply, иalso. Знакомые слова? Надеюсь, но все же разберем их.

inline fun <T, R> T.let(block: (T) -> R): Rinline fun <T> T.also(block: (T) -> Unit): T

Сначала let и also. Они наиболее просты и понятны, потому что все что они делают внутри - это вызов block(this) . По сути, мы просто делаем вызов определенной нами "на месте" функции. Разница лишь в том, что они возвращают. also используется когда вы хотите продолжить работу с тем же объектом, у которого решили вызвать функцию и let, если вам нужно вернуть новый объект.

inline fun <R> run(block: () -> R): Rinline fun <T, R> T.run(block: T.() -> R): Rinline fun <T, R> with(receiver: T, block: T.() -> R): Rinline fun <T> T.apply(block: T.() -> Unit): T

Теперь к run, with и apply:
run очень похож на let, apply на also, а with это почти то же самое что и run, просто receiver получаем разными способами. Чем они удобны и зачем нужны, если есть let и also? Все просто, тут вместо it используется this, который вообще можно опустить и не писать.

И как же эффективно использовать все эти функции? Мы можем и в большинстве случаев даже должны писать все наши функции полностью в функциях областей видимости.

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

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

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

Классы и Объекты

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

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

let {  val some = Some()  it.run(some::doSome)}

Использование объекта позволило бы нам сделать наш код проще:

let(Some::doSome)

Как хорошо, когда нет ничего лишнего, да?

Но допустим мы все же вынуждены иметь дело с классом, у которого есть поведение, но экземпляр класса создавать не хотим? К счастью, и для этого найдется достаточно простое решение. Мы просто скинем всю статику, которая есть в объекте в companion object:

class Some {  companion object {    fun doSome(any: Any) = run {}  }}

Теперь мы можем сделать так же, как и с объектом.

Factory методы

Для начала я приведу пример кода:

val other = Other()val stuff = other.produceStuff()val some = Some(stuff)

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

Конечно, мы можем заинлайнить его:

val some = Some(  Other().produceStuff())

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

class Some {  companion object Factory {    inline fun <T>create(t: T?, f: (T?) -> Stuff) = Some(f(t))  }}

Теперь мы можем сделать так:

val some = Some(Other()) { it.doStuff() }

Или если класс Other тоже имеет свой фабричный метод:

val some = Some.create(Other) { it.create().doStuff() }

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

Подводные камни функций-расширений

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

fun Some.foo() = run { }

Или если хотите экзотики:

val foo: Some.() -> Unit = {  }

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

Теперь, давайте поговорим о ссылках на функции-расширения. Если мы сделали ее через val то все просто и понятно, передаем ее просто как foo и ничего лишнего, работаем как с любой другой переменной. Но если через fun, появляются нюансы, на которые имеет смысл обратить внимание.

Давайте посмотрим на вот такой код:

class Some {  fun Other.someExtention() = run { }}

В принципе, ничто не мешает нам так сделать, но есть одно "но", из-за которого я считаю это очень плохой практикой.

Все дело в том, что передать ссылку на эту функцию просто не получится. Никак. Даже внутри самого класса. Если так сделать, то Котлин просто не поймет, как обращаться к этой функции - как к методу класса Some или Other.

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

P.S.

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

fun Some.overlay(f: KFunction1<Some, Any>) = f(this)

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

Подробнее..
Категории: Kotlin , Функциональное программирование , Расширения , Рефакторинг , Функции , Котлин , Функции высшего порядка , Ссылки на фукнции , Inline

Ультимативный список инструментов для разработчиков и опытных пользователей для Windows

30.12.2020 10:17:29 | Автор: admin
Можете ли вы поверить, что с момента моего последнего списка инструментов прошло 6 лет? Инструменты изменились, многие из них доступны онлайн, но, честно говоря, для составления нового списка инструментов требуется ОЧЕНЬ МНОГО РАБОТ. Но я смог, вот список на 2020-2021 годы. Это инструменты в моей папке Utils. Я создал папку d:\dropbox\utils и добавил ее в свой PATH. Таким образом, он будет на всех моих компьютерах, и я могу мгновенно добраться до любого из них.

Это обновленный до версии 2020-21 мой список 2003, 2005, 2006, 2007, 2009, 2011 и 2014 годов, который в настоящее время включает все остальные мои списки. Я занимаюсь этим более 17 лет. Вау. Думаю, стоит тратить на это больше времени.

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

Все это очень любимые и часто используемые утилиты. Я бы не рекомендовал их, если бы не использовал их постоянно. Никто не платил деньги за то, чтобы быть в этом списке.

Эту статью написал наш коллега Скотт. Вот версия на английском. Ну а сам список под катом.



Утилиты, меняющие жизнь и работу


  • Подсистема Windows для Linux. Невозможно переоценить то, как WSL/WSL2 поставил вишенку на вершину Windows 10. Интеграция с Windows просто фантастическая. Это также НАМНОГО быстрее, чем запуск виртуальной машины.
  • Терминал Windows. Наконец-то в Windows появился современный терминал. Вы можете запускать такие оболочки, как командная строка, PowerShell и подсистема Windows для Linux (WSL).
  • Windows PowerToys они вернулись и должны быть встроены в Windows.
  • VS Code Visual Studio Code супер-быстр и является моим редактором кода goto. Я до сих пор иногда использую блокнот и часто использую полную Visual Studio, но VS Code похож на Tesla в мире редакторов кода. Ознакомьтесь с моими любимыми расширениями VS Code ниже.
  • ZoomIt Настоящая классика, но также и ответ на вопрос 1, который мне задают. Как вы рисуете на экране, когда показываете свой экран?
  • Winget это apt-get для Windows. Подобно choco, который я использовал в прошлом, WinGet будет включен в Windows 10 и будет иметь массу приятных функций.
  • QuickLook Бесплатно в Магазине Windows, просто выделите файл в Проводнике и нажмите Пробел, чтобы получить превью.

Крутые утилиты для разработчиков (в большинстве своем .NET, но не только)


  • CodeTrack это бесплатный профилировщик производительности и анализатор выполнения .NET. Он работает практически со всеми версиями .NET и даст вам полное представление о том, как работает ваш код!
  • LINQPad интерактивно запрашивайте базы данных с помощью LINQ с помощью этого инструмента от Джозефа Альбахари.
  • WinMerge WinMerge становится все лучше и лучше. Он сравнивает файлы и папки и помогает вам объединить конфликтующие файлы исходного кода.
  • WinDbg низкоуровневый и классический, но также новый и свежий! WinDbg теперь в Магазине Windows со ВСЕМИ НОВМИ ВИЗУАЛАМИ и многим другим!
  • Insomnia и Nightingale отличные альтернативы Postman для REST API!
  • Обозреватель пакетов NuGet это приложение позволяет просматривать пакеты NuGet из онлайн-канала и просматривать содержимое пакетов.
  • WireShark Что происходит в сети? WireShark знает.
  • GitHub Desktop Gits, кхм, прочь! Смотрите Git 101 на YouTube.

Полезные утилиты Windows


  • Ear Trumpet фантастический продвинутый регулятор громкости для Windows! Если вы когда-нибудь хотели, чтобы громкость в Windows увеличилась до 11, то Ear Trumpet это то приложение.
  • Teracopy хотя я чаще всего использую отличные встроенные функции копирования Windows 10, когда я хочу переместить МНОГО файлов как можно быстрее, ничто не сравнится с TeraCopy, приложением, которое делает именно это быстро перемещает файлы. Контроль очереди отличный.
  • AutoHotKey это крошечная, удивительно быстрая бесплатная утилита с открытым исходным кодом для Windows. Она позволяет автоматизировать все, от нажатия клавиш до мыши. Программирование для непрограммистов. Это полная система автоматизации для Windows без разочарований из-за VBScript.
  • 7-Zip все закончилось, и 7zip выиграл. Время подняться на борт. Формат 7z быстро становится форматом сжатия, который выбирают самые требовательные пользователи. Обычно сжатие на 2-10% лучше, чем у ZIP. Это приложение прекрасно интегрируется в проводник Windows и открывает практически ВСЕ, что вы когда-либо захотите открыть, от TAR до ISO, от RAR до CAB.
  • Paint.NET забытая Microsoft программа Paint, написанная на .NET. Это 80% Photoshop, и это бесплатно. Вы можете поддержать автора, получив версию из Магазина Windows, и она будет обновляться автоматически!
  • NimbleText регулярные выражения сложны, и я не очень умен. NimbleText позволяет мне делать сумасшедшие вещи с большими объемами текста без особой боли.
  • Markdown Monster хотя мне нравится VSCode, Markdown Monster делает одну вещь невероятно хорошо. Markdown.
  • Fiddler простой, чистый и мощный прокси отладки для проверки HTTP между здесь и там. Он даже поддерживает изучение SSL-трафика.
  • Коллекция утилит NirSoft почти все, что делает NirSoft, заслуживает внимания. Мои любимые MyUninstaller, замена для удаления программ, и WhoIsThisDomain.
  • Ditto Clipboard Manager WindowsKey+V великолепен и близок, но Ditto продолжает продвигать управление буфером обмена в Windows.
  • TaskbarX он буквально центрирует кнопки панели задач. Я люблю это. Open Source, но также доступно и за 1 доллар в Магазине Windows.
  • ShellEx View меню вашего проводника, вызываемое правой кнопкой мыши, загромождено, это поможет вам его не загромождать!
  • OneCommander, Midnight Commander и Altap Salamander. Существует множество замечательных переосмыслений проводника Windows. OneCommander и Altap Salamander делают это, а Midnight Commander делает это для командной строки/CLI.
  • WinDirStat классический, но необходимый. Что занимает все это место? Спойлер это Call of Duty.
  • FileSeek и Everything мгновенный поиск во всем!
  • Мне нравится Win+Share+S для скриншотов, но я также рекомендую ShareX, Greenshot и Lightshot.
  • Для анимированных гифок попробуйте screen2gif или LICEcap!
  • Alt-Tab Terminator переводит ваш Alt-Tab на новый уровень с большим предварительным просмотром и поиском
  • PureText PureText вставляет простой текст в чистом виде. Свободный и славный. Спасибо Стив Миллер.
  • Я все еще использую FTP, SCP и SFTP, и я использую для этого WinSCP! Это бесплатно или всего 10 долларов, чтобы получить его в Магазине Windows и поддержать автора!
  • VLC Player лучший и по-прежнему лучший. Проигрывает все и везде.
  • PSReadline в хорошем смысле делает PowerShell более запутанным.
  • Yori и все утилиты Малкольма Смита Yori это переосмысление cmd.exe!

Расширения Visual Studio Code


  • GitLens великолепен. Просто делает Git и VS радостью и добавляет тысячу крошечных прекрасных функций, которые заставят вас улыбнуться. Вы удивитесь, почему это не встроено.
  • Version Lens у вас есть последние версии пакета? Теперь узнать легко.
  • CodeSnap скриншоты, специально созданные для того, чтобы делать ваш код красивым.
  • Обозреватель тестов .NET Core делает модульное тестирование с .NET на VS Code намного приятнее.
  • Arduino для VS Code расширение Arduino упрощает разработку, построение, развертывание и отладку ваших эскизов Arduino в Visual Studio Code! Так мило.
  • Coverage Gutters это удивительное расширение показывает, какой код покрывается модульным тестом, а какой нет. Райану нужна помощь, так что узнайте, подходит ли вам этот проект OSS!
  • Docker для VS Code обозреватель контейнеров, менеджер и средство развертывания, прямо из VS.
  • GitHistory еще одно приятное дополнение для Git, которое показывает ваш журнал Git.
  • HexDump мне это нужно больше, чем я хотел бы признать.
  • LiveShare прекратите screen-sharing и code и context sharing!
  • PowerShell для VS отличная замена PowerShell ISE
  • Remote Containers это УДИВИТЕЛЬНОЕ РАСШИРЕНИЕ, которое вы должны попробовать, если у вас есть Docker, но у него ужасное неописательное имя. Но чтобы поверить, это нужно увидеть. Возможно, это Контейнеры разработки Visual Studio, я не уверен. Откройте папку и прикрепите к контейнеру разработки. Никаких установок, просто вы отлаживаете Rust, Go, C#, что угодно, НИЧЕГО не устанавливая. Удивительно.
  • Удаленный SSH еще один из семейства расширений VS Remote, он позволяет использовать любой удаленный SSH-сервер в качестве среды разработки.
  • Удаленный WSL редактируйте, отлаживайте и создавайте код из Windows используя Linux!
  • И, наконец, Yonc, моя текущая тема VS Code. Вдохновлен Бейонсе.

Несколько вещей, которые мне очень нравятся


  • RescueTime Вы продуктивны? Вы тратите время на то, что вам нужно? RescueTime отслеживает, что вы делаете, и сообщает вам об этом с помощью фантастических отчетов. Очень хороший материал, если вы пытаетесь использовать GTD и TCB.
  • Carnac эта замечательная небольшая утилита с открытым исходным кодом показывает горячие клавиши, которые вы нажимаете, при их нажатии, показывая небольшие оверлеи в углу. Я использую его во время кодирования презентаций.
  • DOSBox Когда вы плывете в мире 64-битной супер-Windows-10-Pro, иногда вы забываете, что есть некоторые старые программы, которые вы больше не можете запускать сейчас, когда DOS на самом деле нет. Войдите в DOSBox, эмулятор DOS x86! Уфф, теперь я могу играть в Bard's Tale из 1988 года на Windows 10 в 2021 году! Посетите Gog.com, чтобы найти множество классических произведений на базе DOSBox
  • Ах да, и, наконец, Windows Sandbox у вас это уже есть, но вы даже не подозреваете об этом! Вы можете за СЕКУНД запустить копию своей машины с Windows 10 в безопасной песочнице, и когда вы ее закроете, она исчезнет. Пуф. Отлично подходит для тестирования странных инструментов и утилит, которые некоторые рандомы во всяких блогах советуют вам попробовать.

Спасибо за внимание и привет из Сиэтла!
Подробнее..
Категории: Программирование , Системное администрирование , Разработка под windows , Microsoft , Разработка игр , Блог компании microsoft , Расширения , Утилиты , Утилиты для windows

Перевод 10 полезных расширений для дата-сайентистов

23.02.2021 14:15:47 | Автор: admin

Эти расширения Jupyter Notebook облегчают жизнь дата-сайентиста


Каждый специалист по Data Science тратит большую часть своего времени на визуализацию данных, их предварительную обработку и настройку модели на основе полученных результатов. Для каждого исследователя данных именно эти моменты самая сложная часть процесса, поскольку хорошую модель можно получить при условии, что вы точно выполните все эти три шага. И вот 10 очень полезных расширений Jupyter Notebook, которые помогут вам выполнить эти шаги.


1. Qgrid


Qgrid это виджет Jupyter Notebook, который использует SlickGrid, чтобы рендерить фреймы данных pandas в Jupyter Notebook. Это позволяет исследовать ваши фреймы данных с помощью интуитивно понятных элементов управления прокруткой, сортировкой и фильтрацией, а также редактировать фреймы, дважды щёлкая ячейки.


Установка


pip install qgrid #Installing with pipconda install qgrid #Installing with conda

2. itables


ITables превращает фреймы данных и серии pandas в интерактивные таблицы данных и в ваших блокнотах, и в их HTML-представлении. ITables применяет простой Javascript, из-за чего работает только в Jupyter Notebook, но не в JupyterLab.


Установка

pip install itables

Активируйте интерактивный режим для всех серий и фреймов данных вот так:

from itables import init_notebook_modeinit_notebook_mode(all_interactive=True)import world_bank_data as wbdf = wb.get_countries()df

3. Jupyter DataTables


Специалисты Data Science и многие разработчики ежедневно работают с dataframe, чтобы интерпретировать данные для обработки. Общий рабочий процесс заключается в отображении фрейма данных, взгляде на схему данных, а затем создании нескольких графиков, чтобы проверить, как распределяются данные, получив более чёткую картину, и, возможно, в том, чтобы найти новые данные в таблице и т. д.

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

Чтобы нарисовать таблицу, jupyter-datatables использует jupyter-require.



Установка

pip install jupyter-datatables

Как пользоваться расширением?


from jupyter_datatables import init_datatables_modeinit_datatables_mode()

4. ipyvolume


ipyvolume помогает в 3d-графике на Python в Jupyter, в качестве основы используя IPython и WebGL в нём.

Сегодня Ipyvolume может:

  • Сделать множественный объёмный рендеринг.
  • Отрисовать точечные диаграммы (до ~1 миллиона глифов).
  • Отрисовать графики колчана (например, разброс, но со стрелкой в определённом направлении).
  • Поддерживает произвольные области, которые вы рисуете мышью.
  • Рендерит в стереообъём для виртуальной реальности с помощью Google Cardboard.
  • Анимирует в стиле d3, например, если координаты x или цвет точечных диаграмм изменяются.
  • Анимация или последовательности, все свойства точечной диаграммы или quiver plot (векторный график) могут быть списком массивов, которые, в свою очередь, могут представлять снапшоты и т. д.



Установка

pip install ipyvolume #Installing with pipconda install -c conda-forge ipyvolume #Installing with conda

5. bqplot


bqplot это система визуализации в 2D для Jupyter, основанная на конструкциях Grammar of Graphics.



Задачи библиотеки


  • Полноценный фреймворк для 2D визуализаций с помощью API на Python.
  • Здравое API, чтобы добавлять пользовательские взаимодействия (панорамирование, масштабирование, выделение и т. д.).

Представлены два API

  • Пользователи могут создавать настраиваемые визуализации, используя внутреннюю объектную модель, которая вдохновлена конструкциями Gramamr of Graphics (рисунок, метки, оси, шкалы), и обогащать их визуализацию нашим слоем взаимодействий.
  • Или можно воспользоваться контекстным API, подобным pyplot у Matplotlib, который обеспечивает разумный выбор по умолчанию для большинства параметров.

Установка

pip install bqplot #Installing with pipconda install -c conda-forge bqplot #Installing with conda

6. livelossplot


Не обучайте модели глубокого обучения вслепую! Смотрите на каждую эпоху вашего обучения!

livelossplot предоставляет в Jupyter Notebook график потерь в реальном времени для моделей Keras, PyTorch и других фреймворков.



Установка

pip install livelossplot

Как пользоваться расширением?


from livelossplot import PlotLossesKerasmodel.fit(X_train, Y_train,epochs=10,validation_data=(X_test, Y_test),callbacks=[PlotLossesKeras()],verbose=0)

7. TensorWatch


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


Установка

pip install tensorwatch

8. Polyaxon


Polyaxon это платформа для создания, обучения и мониторинга крупномасштабных приложений глубокого обучения. Мы создаём систему для решения задач воспроизводимости, автоматизации и масштабируемости приложений машинного обучения. Polyaxon развёртывается в любом центре обработки данных, у любого облачного провайдера или может размещаться и управляться компанией Polyaxon, платформа поддерживает все основные фреймворки глубокого обучения, такие как Tensorflow, MXNet, Caffe, Torch и т. д.



Установка

pip install -U polyaxon

9. handcalcs


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



Установка

pip install handcalcs

10. jupyternotify


jupyternotify предоставляет магическое значение %%notify, которое уведомляет пользователя о завершении потенциально длительной работы ячейки с помощью push-уведомлений браузера. Примеры применения содержат модели машинного обучения, которые долго обучаются, поиск по сетке или вычисления Spark. %%notify позволяет вам перейти к другой работе и получить уведомление в момент, когда ваша ячейка завершает работу.


Установка

pip install jupyternotify


Надеемся, что данные расширения будут вам полезны. Если у вас есть на примете полезные расширения, не попавшие в данную подборку делитесь ими в комментариях!

image
Узнайте подробности, как получить Level Up по навыкам и зарплате или востребованную профессию с нуля, пройдя онлайн-курсы SkillFactory со скидкой 40% и промокодом HABR, который даст еще +10% скидки на обучение:

Подробнее..
Категории: Программирование , Лайфхаки для гиков , Искусственный интеллект , Машинное обучение , Machine learning , Data science , Блог компании skillfactory , Расширения , Jupyter notebook , Skillfactory

Много ли у вас открытых вкладок?

20.01.2021 16:09:28 | Автор: admin
У меня в браузере обычно от 50 до 120. Иногда 200, в другой раз 15.

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

Это радикально упростило поиск и чтение статей. И даже волосы мои стали шелковистей. Ну т.е. стал продуктивней.

Откуда берется столько вкладок?


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

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

Кроме того, читать сразу несколько статей по одной тематике намного легче, чем каждую статью по отдельности.

Что делает расширение?


Демо-видео вместо тысячи слов.


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

Чтобы вообще найти содержание страницы, используется адаптация Readability.js. Это версия библиотеки, которую Mozilla использует в Firefox, для показа страниц в режиме читателя.

К сожалению, Readability.js далеко не всегда находит содержание страниц. Поэтому для особо популярных ресурсов сделана отдельная предобработка.

Сейчас здесь: Reddit, HackerNews и YouTube.

Список точно не исчерпывающий. Если у кого-то появиться необходимость добавить новый ресурс, то это можно сделать через GitHub. Там же можно оставить и другую обратную связь, т.к. расширение не собирает какую либо аналитику.

Также есть отдельные ресурсы, страницы которых сортируются только по URL, если таких больше одной. Это страницы GitHub и GitLab. Т.о. вы получите группировку в соответствии с файловой структурой проектов.

Сделано специально для umputun. Ну почти.

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

В одном случае, это были две статьи, которые совместно подсказали новую идею. Тематика у них была разная, но были общие ключевые слова, поэтому Smart TabS разместил их рядом.

В другом случае, это был браузер для рабочих вопросов. После некоторых подсказок Smart TabS разместил вкладки намного удачней, чем я ожидал, так что работать стало намного проще.

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

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

Например, веб-приложения, почта, соц-сети. По умолчанию, сейчас сюда входят: Facebook, Netflix, Trello, Todoist, Inoreader, Feedly, Gmail и др. сервисы Google.

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

Поддержка браузерами


Расширение сейчас можно поставить для Firefox и Chrome.

Для Safari оно пока не доступно, не смотря на появление WebExtension API в 14-й версии. Там почему-то не добавили поддержку tabs.move(...), чтобы можно было автоматически перемещать вкладки.

Другие браузеры особе не проверялись, хотя, по идее, для Chromium-based браузеров может быть возможность поставить пакет для Chrome.

P.S.


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

В следующей части планирую рассказать о том, что остается за кулисами: о развитии идеи, управлении проектами и деталях разработки.
Подробнее..
Категории: Стартапы , Браузеры , Я пиарюсь , Расширения , Продуктивность , Чтение , Вкладки , Webextensions , Информационный дизайн

80 расширений Google Chrome для интернет-маркетологов

22.10.2020 18:09:59 | Автор: admin
80+ расширений Google Chrome для интернет-маркетологов

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


Что приятно почти все они бесплатные.


Содержание статьи
Расширения Google Chrome для поиска и хранения информации
Расширения Google Chrome для поиска и анализа конкурентов
Расширения Google Chrome для работы с текстами
Расширения Google Chrome для создания скриншотов и видеозаписей с экрана
Расширения Google Chrome для SEO и анализа семантики
Расширения Google Chrome для веб-аналитики
Расширения Google Chrome для веб-дизайна и разработки
Расширения Google Chrome для работы с соцсетями и YouTube
Расширения Google Chrome для деловой переписки и лид-менеджмента
Расширения Google Chrome для повышения производительности

Расширения Google Chrome для поиска и хранения информации


Giphy для Chrome


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


80+ расширений Google Chrome для интернет-маркетологов

Ищем гифки с эмоцией удивление


Google Results Previewer


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


80+ расширений Google Chrome для интернет-маркетологов

При наведении мыши на всплывающее окно оно разворачивается и занимает экрана, чтобы было удобнее изучать информацию


Save to Pocket


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


80+ расширений Google Chrome для интернет-маркетологов

Создавать теги заранее не нужно, вводите подходящие при сохранении страницы


Если Save to Pocket по каким-то параметрам не подошел, сохранять страницы и контент можно через Google Keep для Chrome, Evernote Web Clipper, Instapaper или OneNote Web Clipper.


Multicopy


По сути, более функциональный буфер для Google Chrome. Позволяет сохранять не один скопированный фрагмент текста, а несколько. Выручает, когда вы скопировали новый фрагмент, забыв вставить и сохранить предыдущий текст.


80+ расширений Google Chrome для интернет-маркетологов

Чтобы в расширении сохранились все скопированные фрагменты, делать это нужно через правый клик мышкой Multicopy Copy this


Расширения Google Chrome для поиска и анализа конкурентов


Similarsites


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


80+ расширений Google Chrome для интернет-маркетологов

По клику по кнопке внизу списка можно посмотреть больше сайтов схожей тематики на сайте Similarsites


После того как вы собрали конкурентов, спарсите их ключевые слова и объявления в Яндексе и Google с помощью бесплатного инструмента от Click.ru. Как им пользоваться разобрали здесь.


SimilarWeb


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


80+ расширений Google Chrome для интернет-маркетологов

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


BuiltWith Technology Profiler


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


80+ расширений Google Chrome для интернет-маркетологов

Информация о подключенных сервисах и пикселях


Если BuiltWith покажется неудобным, для тех же целей можно использовать WhatRuns, PageXray или Wappalyzer.


Data Scraper


Парсит информацию и данные с сайтов и импортирует их в электронные таблицы в форматах XLS, XLSX, CSV. Полезно, когда нужно отслеживать новые товары или изменения цен на сайтах конкурентов. Бесплатно можно сканировать до 500 страниц в месяц, платный тариф начинается от 19 долл. в месяц. Чтобы воспользоваться плагином, нужно зарегистрироваться.


80+ расширений Google Chrome для интернет-маркетологов

Есть авторизация в один клик через почту Gmail


Также для импорта данных с сайтов в таблицы можно использовать другие расширения: Instant Data Scraper, Scraper, Web Scraper.


Расширения Google Chrome для работы с текстами


Word Counter Plus


Считает количество знаков, слов, а также среднее и максимальное количество символов в одном слове для выделенного фрагмента текста на веб-странице. Работает без регистрации и авторизации. Чтобы воспользоваться, выделите нужный фрагмент, кликните правой кнопкой мыши и выберите в меню команду Word Counter Plus.


80+ расширений Google Chrome для интернет-маркетологов

С Google Документами не работает


Аналогичные плагины: Characters and words counter, Word Counter.


LanguageTool


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


80+ расширений Google Chrome для интернет-маркетологов

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


Для проверки ошибок в текстах можно использовать также расширения Яндекс.Спеллер и Проверка Правописания. Плагинов для поиска ошибок в тексте больше, но эти 3 работают с русским языком.


Главред


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


80+ расширений Google Chrome для интернет-маркетологов

Так выглядят результаты проверки через плагин


LinguaLeo English Translator


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


80+ расширений Google Chrome для интернет-маркетологов

Также можно кликнуть по иконке плагина и вставить в открывшееся окно фрагмент текста


Для перевода слов и фраз на сайтах также можно использовать расширения Google Dictionary, Mate Translate, Google Переводчик.


Расширения Google Chrome для создания скриншотов и видеозаписей с экрана


FireShot


Делает скриншоты фрагментов или целой веб-страницы и позволяет сохранять их в JPEG, PNG, PDF и других форматах. Также созданное изображение можно сразу отправить по почте, в Clipboard или Photoshop. Удобно, когда нужно быстро указать на ошибку в тексте или верстке.


80+ расширений Google Chrome для интернет-маркетологов

Можно захватить всю страницу, видимую часть или выделенную область


Аналоги: GoFullPage, Screenshot Extension.


Loom for Chrome


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


80+ расширений Google Chrome для интернет-маркетологов

Прежде чем снимать, нужно пройти простую авторизацию через Gmail или Slack и открыть доступ к камере и микрофону


Также для записи скринкастов можно использовать плагин Screen Recorder.


Awesome Screenshot


Умеет делать скриншоты и записывать видео с экрана. Записанные видео можно скачивать или быстро делиться с коллегами через уникальные ссылки. На скриншотах есть возможность делать пометки ставить стрелки, рисовать линии, выделять области, добавлять текст. Видео и изображение легко отправить в Trello, Asana и на Google Диск через прямую интеграцию.


80+ расширений Google Chrome для интернет-маркетологов

Требуется простая регистрация через Gmail и доступ к камере и микрофону


Расширения Google Chrome для SEO и подбора семантики


SEOquake


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


80+ расширений Google Chrome для интернет-маркетологов

Открыв сайт, можно просмотреть основные параметры на панели вверху страницы или кликнуть по иконке плагина, чтобы открыть окно с детальной информацией


Check My Links


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


80+ расширений Google Chrome для интернет-маркетологов

Также показывает общее количество хороших и плохих ссылок на странице


Redirect Path


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


80+ расширений Google Chrome для интернет-маркетологов

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


SEO meta in 1 click


Пригодится при SEO-аудите и анализе сайтов конкурентов, чтобы определить ключевые показатели страниц title и description, а также количество символов в них, заголовки h1-h6, URL, количество изображений с альтом и без него, данные Open Graph и многое другое.


80+ расширений Google Chrome для интернет-маркетологов

По клику на иконке плагина в браузере, открывается всплывающее окно с данными


SEO meta in 1 click далеко не единственное расширение для SEO-аудита. Ту же информацию можно получить через MozBar, Open SEO Stats, SEO Analysis & Website Review, RDS Bar.


Yandex Wordstat Assistant


Расширение для работы с Яндекс.Вордстатом в Google Chrome. Делает подбор ключевых запросов удобнее. Просматривая статистику, можно добавлять подходящие слова кликом по иконке + в список, а потом скопировать все ключи сразу вместе с частотностями или без них.


80+ расширений Google Chrome для интернет-маркетологов

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


YWA это удобный инструмент, если нужно быстро собрать ключевики руками в Вордстате по какой-то конкретной теме. Для системной работы он не подходит. Нужен уже специализированный сервис например, Медиапланер Click.ru. Он собирает ключевые слова на основе семантики сайта, из счетчиков статистики и путем углубления базовой семантики.


Keywords Everywhere


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


80+ расширений Google Chrome для интернет-маркетологов

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


Расширения Google Chrome для веб-аналитики


Яндекс.Метрика


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


80+ расширений Google Chrome для интернет-маркетологов

По клику на иконку открывается список доступных счетчиков


Page Analytics


Расширение Google Analytics, которое отображает в сайдбаре вверху страницы базовые показатели просмотры, уникальные посетители, показатель отказов, время на странице и т. д.


80+ расширений Google Chrome для интернет-маркетологов

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


Google Analytics Debugger


Пригодится веб-аналитикам, которые настраивают и следят за исправностью работы Google Analytics сразу для нескольких ресурсов. Расширение собирает данные о корректности кодов отслеживания системы аналитики, к которым у вас есть доступ.


Чтобы воспользоваться Google Analytics Debugger, установите расширение, откройте нужный сайт и нажмите Ctrl + Shift + J.


80+ расширений Google Chrome для интернет-маркетологов

Откроется консоль JavaScript с результатами проверки


Google Analytics URL Builder


Добавляет к ссылкам UTM-метки для отслеживания в Google Analytics. По клику на иконку открывается окно, в котором можно ввести значения для всех стандартных параметров UTM. Также можно выбрать один из пресетов сохраненных наборов значений.


80+ расширений Google Chrome для интернет-маркетологов

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


Расширения Google Chrome для веб-дизайна и разработки


Lighthouse


Анализирует качество и производительность страницы. Оценивает ресурс по множеству параметров, в том числе скорости загрузки и показателям SEO-оптимизации. Тестирование может занять некоторое время.


80+ расширений Google Chrome для интернет-маркетологов

Отчет открывается в новой вкладке


Похожее расширение Google PageSpeed Insights. Но тут упор на скорость загрузки. Информация сюда подтягивается как раз из Lighthouse.


Google Tag Assistant


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


80+ расширений Google Chrome для интернет-маркетологов

Так выглядят результаты проверки


WhatFont


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


80+ расширений Google Chrome для интернет-маркетологов

Так работает WhatFont


Аналоги: Font Finder, Fonts Ninja.


Eye Dropper


Определяет цвет любого фона, фрагмента изображения или элемента на странице. Чтобы воспользоваться, откройте расширение, кликните Pick color from web page, а затем на элемент страницы.


80+ расширений Google Chrome для интернет-маркетологов

Цвета сохраняются в расширении. Там же можно скопировать код нужного цвета


Определить цвета элементов сайта можно также с помощью ColorZilla и ColorPick Eyedropper.

CSS Peeper


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


80+ расширений Google Chrome для интернет-маркетологов

В отдельной вкладке отображаются все цвета, которые использованы на странице


Просматривать стили сайтов можно также с помощью CSSViewer.


Corporate Ipsum


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


80+ расширений Google Chrome для интернет-маркетологов

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


Похожее расширение: Lorem Ipsum Generator


Window Resizer


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


80+ расширений Google Chrome для интернет-маркетологов

Можно задавать произвольные значения и сохранять свои часто используемые пресеты


Расширения Google Chrome для работы с соцсетями и YouTube


Facebook Pixel Helper


Проверяет корректность работы установленного пикселя Facebook, помогает найти и устранить ошибки.


80+ расширений Google Chrome для интернет-маркетологов

Работает на любых сайтах, а не только на тех, к пикселям которых у вас есть доступ


Pablo


Позволяет захватить любой текстовый и графический контент с сайта и перенести его в онлайн-редактор для подготовки постов в соцсети Pablo. Сделать это можно через контекстное меню или кликом по кнопке рядом с изображением.


80+ расширений Google Chrome для интернет-маркетологов

Открываем баннер с Озона в редакторе


DrumUp


Плагин для расшаривания контента в соцсетях Twitter, Facebook и LinkedIn, а также для поиска похожих страниц и материалов.


80+ расширений Google Chrome для интернет-маркетологов

Для публикации постов требуется авторизация через соответствующую соцсеть


Помимо DrumUp для этих целей можно использовать расширения профессиональных инструментов для соцсетей SMMPlanner Buffer, SMMbox, Baffer. В них придется зарегистрироваться и оплатить тариф, зато такие плагины более функциональны, а некоторые из них работают и с ВКонтакте.


Pepper panel


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


80+ расширений Google Chrome для интернет-маркетологов

Для анализа не обязательно даже заходить в сообщество


Быстро спарсить тематические группы в ВК и подписчиков вы также можете с помощью бесплатных инструментов Click.ru парсера сообществ и парсера пользователей. Это не расширения, а онлайн-сервисы, тем не менее они могут быть вам полезны.


vidIQ Vision for YouTube


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


80+ расширений Google Chrome для интернет-маркетологов

Так выглядит меню vidIQ Vision


Расширения Google Chrome для деловой переписки и лид-менеджмента


IsOpened


Отслеживает открытие отправленных писем в почтовом ящике Gmail. После установки и авторизации через Google рядом с письмами появятся иконки-галочки. Если иконка поменяла цвет на зеленый, значит письмо открыли.


80+ расширений Google Chrome для интернет-маркетологов

Так выглядят галочки в почтовом ящике


Отслеживать открытие писем можно также с помощью Mailtrack, Unlimited Email Tracker и MailTracker.


Boomerang


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


80+ расширений Google Chrome для интернет-маркетологов

Ставим входящие на паузу


Gorgias Templates


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


80+ расширений Google Chrome для интернет-маркетологов

В плагине предустановлены дефолтные англоязычные фразы


Leads-in-crm


Плагин для быстрого занесения лидов в CRM. После установки плагина можно выделить номер телефона на любом сайте и кликнуть Создать контакт в контекстном меню. Всплывет форма для создания и сохранения лида. Пока расширение работает только с amoCRM и Bitrix24.


Так работает расширение: https://youtu.be/BVvx8CSzSHM.


Расширения Google Chrome для повышения производительности


RescueTime


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


Краткий обзор RescueTime: https://youtu.be/yu0hbQgwQA0.


Tomato Clock


Простой плагин для работы по технике Pomodoro короткими 25-минутными интервалами с 5-минутными перерывами. Длительность рабочих периодов и перерывов можно настраивать, а уведомления помогут не пропустить очередной помидор.


80+ расширений Google Chrome для интернет-маркетологов

Интерфейс предельно прост и лаконичен


Block Site


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


80+ расширений Google Chrome для интернет-маркетологов

При попытке зайти на заблокированный сайт появляется сообщение


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

Подробнее..
Категории: Повышение конверсии , Веб-аналитика , Интернет-маркетинг , Блог компании click.ru , Расширения , Google chrome , Плагины

7 полезных расширений для изучения английского в Google Chrome

25.06.2020 12:16:27 | Автор: admin
Мы всегда говорим, что учить английский язык нужно комплексно. Даже когда работаешь с документацией или смотришь мемасики. Если вы много работаете за компьютером, то браузерные дополнения могут сильно помочь вам в изучении английского языка.

Не будем долго рассусоливать. Вот вам 7 наиболее полезных браузерных дополнений для прокачки английского в Google Chrome. Поехали.




Ginger




Отличное расширение для тех, кто стремится работать с английскими текстами в формате экосистемы.

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

Хоть по качеству перевода расширение уступает Google Translate, оно очень удобное.

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

Grammarly




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

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

Также можно включить режим словаря и смотреть значения слов, которые вам неизвестны.

Правда, есть минус. Функционал бесплатной версии довольно сильно урезан. Экосистема языка, в которую входит и расширение, полноценно раскрывается в платной версии.

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

ED Translator




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

Расширение это часть EdTech-экосистемы, поэтому тренировать новые слова, которые вы добавили с его помощью, можно в мобильном приложении или на веб-портале.

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

EachWord Translator




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

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

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

Kypris language immersion




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

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

Чтобы увидеть оригинал слова, нужно просто кликнуть на него. Превратить в обучающий материал можно абсолютно любой текст: от мемной истории до художественной книги. Для новичков в английском просто must have.

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

ProWritingAid Grammar Checker & Writing Coach




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

Главное преимущество инструмента с его помощью можно использовать язык во всей его полноте, не ограничиваясь ученическими фразами. К примеру, фразу he walked across the room quickly система предложит заменить на he rushed across the room. Смысл фразы не поменялся, но звучать она стала более естественно.

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

Reverso Translate in Context




Расширение дублирует функционал известного сайта Reverso Context и позволяет переводить слова и фразы прямо в контексте их использования. Но расширение намного удобнее, чем веб-версия.

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

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

***

Заметили, что мы не указали Google Translate? Причина в том, что часть его функций уже вшита в браузер Google Chrome. Поэтому установка одного из тех расширений, о которых мы рассказали выше, будет куда более полезной.

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

Онлайн-школа EnglishDom.com вдохновляем выучить английский через технологии и человеческую заботу




Только для читателей Хабра первый урок с преподавателем по Skype бесплатно! А при покупке занятий получите до 3 уроков в подарок!

Получи целый месяц премиум-подписки на приложение ED Words в подарок.
Введи промокод 7chrome на этой странице или прямо в приложении ED Words. Промокод действителен до 25.06.2021.

Наши продукты:

Подробнее..
Категории: Изучение языков , Блог компании онлайн школа englishdom , Расширения для браузеров , Английский язык , Изучение английского , Расширения , Расширения chrome

Категории

Последние комментарии

  • Имя: Макс
    24.08.2022 | 11:28
    Я разраб в IT компании, работаю на арбитражную команду. Мы работаем с приламы и сайтами, при работе замечаются постоянные баны и лаги. Пацаны посоветовали сервис по анализу исходного кода,https://app Подробнее..
  • Имя: 9055410337
    20.08.2022 | 17:41
    поможем пишите в телеграм Подробнее..
  • Имя: sabbat
    17.08.2022 | 20:42
    Охренеть.. это просто шикарная статья, феноменально круто. Большое спасибо за разбор! Надеюсь как-нибудь с тобой связаться для обсуждений чего-либо) Подробнее..
  • Имя: Мария
    09.08.2022 | 14:44
    Добрый день. Если обладаете такой информацией, то подскажите, пожалуйста, где можно найти много-много материала по Yggdrasil и его уязвимостях для написания диплома? Благодарю. Подробнее..
© 2006-2024, personeltest.ru