Недавно я и мой брат-близнец участвовали в организованном Microsoft хакатоне под названием HackLeague. (информацию об этом событии можно найти на странице http://hackleague.io)
Мы приняли участие в дивизионе Browser-wars, в котором нам дали задание создать несколько браузерных расширений для Edge. За каждое успешное расширение нам давали баллы. Максимально можно было заработать 605 баллов (мы набрали 555, потому что, эй, это было крутое число!)
Установить шаблонное расширение в Edge (+10 баллов)
Это упражнение было продемонстрировано нам в качестве примера. в нем были рассмотрены основы установки расширения в Edge.
Конвертировать расширение Make page Red (+25 баллов)
Кто сказал, что создавать расширения Edge сложно?? Что ж, они точно были не правы! Соревнование было первым практическим испытанием для большинства бойцов, чтобы проверить, как создать новое расширение Edge. Что может быть лучше примера, чем сделать страницу красной! С помощью конвертера Chrome в Edge мы преобразовали существующее расширение Chrome.
Создать расширение страницы перевода (+100 баллов)
Это было самое интересное, наше собственное первое расширение. Путем поиска точек API нам удалось открыть новую вкладку браузера. Как только мы получили это, было так же просто, как просто добавить URL-адрес к выбранному переводчику. Присвоив ему выбранный атрибут, мы сказали, что фокусируем только что созданную вкладку напрямую.
Слушатель будет слушать, когда страница загружается, и откроет новую вкладку с переведенной текущей страницей. Мы повторно использовали кусок кода для отображения окна, в котором мы сказали, что отображается текущая страница (источник github в конце)
function onPageShow(){
browser.tabs.query({ currentWindow: true, active: true }, function(tabs){
var url = tabs[0].url;
var title = tabs[0].title;
browser.tabs.create({ url: "http://www.microsofttranslator.com/bv.aspx?from=&to=en&a=" + url, selected: true })
});
};
// Event binding.
document.addEventListener("pageshow", onPageShow());
Создайте расширение, которое подсчитывает количество слов на веб-странице. Количество должно появиться в окне предупреждения (+150 баллов)
Как уже поняли многие из нас, это вопрос написания регулярного выражения и перебора текстовых узлов. Однако настоящей проблемой, стоящей за этим заданием, было создание всплывающего окна и фактическое перемещение по DOM. Доступ к содержимому DOM можно получить с помощью сценариев, определенных в content_scripts.
function onPageShow(){
var words = document.body.textContent || document.body.innerText,
matches = words.match(/(\b[^\s]+\b)/gmi);
alert(matches.length);
};
manifest.json
"content_scripts" : [{
"js" : ["js/index.js", "js/background.js", "js/content.js"],
"matches" : ["*://*/*"]
}
],
Добавить функциональность контекстного меню для поиска слова прямо в Bing/Google (+50 баллов)
Создание контекстного меню — это небольшое развлечение, мы можем интегрировать действия, изменив контекстное меню.
Задание состояло в том, чтобы выбрать фрагмент текста, а затем через контекстное меню найти этот фрагмент в любой поисковой системе. (мы использовали гугл)
browser.contextMenus.create({
id: "searchGoogleCM",
title: "Search in Google",
contexts: ['selection']
});
browser.contextMenus.onClicked.addListener(function(info, tab) {
if (info.menuItemId == "searchGoogleCM") {
var word = info.selectionText;
browser.tabs.create({ url: "https://www.google.com/search?q="+word+"&oq="+word+"&aqs=chrome..69i57j69i60l3.1129j0j8&sourceid=chrome&ie=UTF-8", selected: true })
}
});
Пожалуйста, убедитесь, что всякий раз, когда вы добавляете контекстное меню, а затем хотите удалить его снова, вам необходимо перезапустить экземпляр браузера. Вероятно, это связано с проблемой дизайна браузера Edge. (мы также обнаружили это во время конкурса и в итоге получили список контекстных меню, накапливающихся до тех пор, пока мы не перезапустили браузер)
Впоследствии это было довольно просто, просто добавьте уважаемый слушатель onClicked и проверьте, когда был нажат ваш элемент контекста. то мы бы создали новую вкладку, в которой мы ищем выделенный текст.
Вы можете получить выбранное слово через свойство selectionText
При создании вкладок обязательно укажите Объект, browser.tabs.create ожидает Объект. Мы определяем URL и выбранный.
Внимание! Изучив страницы разработчиков Mozilla, я обнаружил, что selected selected устаревший, вместо этого используйте active! https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/tabs/create
Как описано на страницах Mozilla:
chrome.tabs.create(
createProperties, // object
function(tab) {...} // optional function
)
Создать расширение с использованием внешнего API (например, провести анализ настроений на веб-странице) (+220 баллов)
Для анализа настроений мы использовали когнитивные сервисы Microsoft. Это просто требует от нас создания ключа подписчика (скорость которого ограничена 5000 вызовами в месяц по причинам развития и, скорее всего, поможет Microsoft обучать свои модели;)).
Как только этот ключ подписки получен, мы можем вызвать их API через вызов POST, который отправляет 3 параметра в их службу (идентификатор, язык и наш текст). Затем они выполнят работу и вернут нам ответ с указанием тональности текста в нормализованном результате (значение от 0 до 1, где 0 означает грусть, а 1 — радость).
В Edge мы создали расширение, которое будет вызывать эту службу, как только мы нажмем на расширение после его загрузки. При этом будет использоваться Fetch API и отправлен вызов службам Microsoft. После этого вызова мы сообщаем нашему API-интерфейсу выборки, что результатом является текстовый объект, чтобы мы могли отобразить его в нашем окне предупреждения. Однако обратите внимание, что мы также можем автоматически анализировать этот результат, сообщая нашему API-интерфейсу выборки о преобразовании его в объект JSON с помощью .json().
Кредиты
Страница хакатона: http://hackleague.io/
Ближайший хакатон: https://www.eventbrite.com/e/coding-battle-webvr-tickets-28055603064
Крутые люди из Microsoft в Брюсселе!
https://github.com/c4d3r/HackLeague-BrowserWars
Максим Гиринк ([email protected]), https://twitter.com/maximgeerinck
Ксавье Гиринк([email protected]), https://twitter.com/XavierGeerinck
