Расширение для браузера на python

Надоело работать во фронтенд с JavaScript? Используйте Python для браузера!

“Как так?” —думаю, примерно такой будет реакция большинства на заголовок этой статьи. Что значит “Используйте Python для браузера?”. Ведь всем известно, что в браузерах может выполняться только JavaScript.

Что ж, ниже приведён скриншот исходного кода моего личного веб-сайта. Обратите внимание на его отличия:

Всё верно, это Python!

А теперь давайте поговорим о том, как он работает, и какие другие альтернативы браузерному JS существуют.

Знакомимся с Brython

Brython — это реализация Python 3, написанная на JavaSсript и позволяющая писать код для браузеров на Python. По сути, это JS библиотека, преобразующая код Python в JS-эквивалент и вычисляющая его при выполнении.

И поскольку “написание кода для браузера на Python” звучит круто, я решил эту тему осветить.

Создаём “Змейку” при помощи Brython

Вот ссылка на мой сайт , где вы можете попробовать два варианта игры “Змейка”: написанный на Brython и JavaScript. А здесь вы найдёте ссылку на Github , где размещён весь стоящий за этим код.

Расширение для Google Chrome / Пишем свой AdBlock

Чтобы испытать Brython я решил создать классическую игру “Змейка”.

Поскольку я ни специалист по HTML Canvas, ни разработчик игр, то решил использовать в качестве стартовой точки эту её реализацию на JavaScript. Я уже создавал собственную игру “Змейка” ранее, но в данном случае эта она намного симпатичней и компактней.

Итак, поверх реализации взятой “Змейки” я расширил функциональность набором очков и записью рекордного их количества, немного улучшил интерфейс, добавил кнопки паузы и инструкций. После этого я перенёс игру в Brython.

Честно говоря, я также изменил данный код так, чтобы он выполнялся в режиме strict JS, поскольку автор игры использовал такие элементы, как глобальные переменные, которые, на мой взгляд, не отражают преимущественный облик JavaScript (я нисколько его за это не критикую, так как он писал код на скорость), а я же хотел получить наглядное сравнение кода JS с кодом Brython.

В итоге JavaScript получился такой , и я не буду размещать здесь его фрагмент, потому что основная наша цель — Brython.

Несмотря на то, что некоторые части кода Brython были “прямым переводом” JS варианта, некоторые из его частей вроде функции набора очков, я создал непосредственно в Brython, а затем реализовал в JS, чтобы понять, как это всё работает. Конечный результат получился следующим:

Как отключить автоматическое воспроизведение видео в Яндексе

Теперь, исходя из этого фрагмента, давайте проясним некоторые ключевые принципы Brython:

Включение brython.js

Brython не требует установки. Достаточно импортировать скрипт внутрь :

Выполнение Brython

Для того, чтобы Brython преобразовал и вычислил код Python как обычный JS, нужно вызвать brython прямо при загрузке тела документа так:

Эта команда произведёт поиск тегов скриптов типа text/python и вычислит внутри них код.

Web API

По умолчанию JavaScript позволяет доступ к таким элементам, как объекты document и window, являющимся основополагающими в любом проекте JS. В связи с этим Brython также нужен способ включить их в процесс.

Пишем расширение для Chrome, Часть 1 (Программирование вживую)

Для решения этой задачи его создатели могли просто позволить разработчикам по умолчанию мгновенно обращаться к document и window в своём коде Python, но тогда бы упала производительность, а отладчики Python постоянно бы выдавали undefined variable.

В итоге, чтобы иметь возможность использовать эти API, нам нужно импортировать их так же, как и любой модуль Python:

from browser import document, html, window

Теперь уже не нужно выполнять для них pip install. В конце концов мы пишем это в нашем HTML. Просто включите инструкции импорта и Brython будет знать, что делать.

Чтобы на деле увидеть, насколько хорошо это работает, я решил попробовать несколько разных методов из Web API (alert , setInterval, addEventListener и т.д.). Всё сработало, как я и ожидал.

Нативные объекты и методы JavaScript

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

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

На деле выяснилось, что мы можем обращаться к большей части JS, чем я думал. Смотрите:

*Очевидно, что Brython предоставляет некоторые стандартные библиотеки Python, реализованные непосредственно в JavaScript, и если у такой библиотеки нет JS версии, то у вас по-прежнему должна быть возможность импортировать модуль. В этом случае Brython извлечёт чистую версию Python и выполнит её наряду со своим кодом. Тем не менее random в моём случае не сработал, но я могу понять почему.

Отличительные принципы языка

В Python, если я хочу распаковать список, то могу выполнить list2 = [*list]. Кроме того, если я захочу определить значение переменной, основываясь на состоянии, то использую foo = 10 if condition else 20.

У этих инструкций есть эквивалент в JavaScript: оператор распространения ([. arr]) и троичный оператор ( let foo = condition ? 10 : 20 ).

Но поддерживает ли их Brython?

Я их испробовал, и сработали они прекрасно. Вы увидите, что распаковка списков и условное присваивание Python включены в мой итоговый исходный код.

Отладка

Честно говоря, я думал, что отладка Brython будет ужасной. На деле же оказалось всё не так плохо. Я, конечно, создал маленький и весьма простой проект, но ошибки, выброшенные Brython, были точны и достаточно описательны. По меньшей мере это касается синтаксиса. Импортирование же модулей Python представляет собой совсем другую историю.

Как удалить сохраненные пароли Яндекс Браузер
Источник

Можно ли создавать расширения для браузера на Python?

Ну суть вопроса понятна. Можно ли или нет? Если да, то с помощью чего ? Идея для моего расширения это изменение html кода при нажатии на ссылку, но так как js не знаю, то вряд ли смогу это сделать.

  • Вопрос задан более двух лет назад
  • 2324 просмотра

Зависит от браузера, но 99.99%, что нативно не поддерживается. Так как для реализации расширения программы пользовательскими скриптами, необходимо использовать скриптовый язык. Так как любом браузере есть необходимость в обработке js, то его и используют для создания расширений, ибо это проще.
В принципе, нет особой разницы в языке, так как это просто инструмент. При написании расширения вам нужно будет работать с WebAPI и API браузера. И даже если вы будете использовать транспилятор из ответа Сергея, то вам всё равно придётся узнавать WebApi, из которого и состоит, по большей части, клиентский js.

hottabxp

Ниже не читайте!
Нет. Python к js никакого отношения не имеет. Либо учите js(если знаете другой ЯП, то написать такое расширение можно за несколько дней), либо не учите js. Всё в ваших руках.

pro100chel

Почему же.
Написание расширений на Python — вполне возможное занятие.

Может есть смельчаки, реализовавшие в своем браузере возможность писать расширения на Python или же создали расширение, которое позволяет переводить Python код в код на JS.

wapster92

Falconer, базовые вещи возможно транспелировать, а вот методы уникальные для языка, чёт я даже не представляю. Зашёл на страницу pyjs там дока огромная. Проще на mdn искать инфу и писать нативно.

Источник

Chrome extension in python?

I would like to create a google chrome extension. Specifically, I’d like to make a packaged app, but not a hosted app. Am I correct in thinking this limits me to JavaScript (and HTML/CSS)?

Is this correct? Do I have any other options?

SciPy is mainly a native library so cross-compilation won’t help. Even if Chrome did support Python, a SciPy dependency would limit your extension’s portability.

7 Answers 7

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

There is no Python built into Chrome but I am wondering whether pyjs can help you.

You can make a standard Google Chrome extension with Python (server-less) https://pythonspot.com/en/create-a-chrome-plugin-with-python/

Источник

Надоело работать во фронтенд с JavaScript? Используйте Python для браузера!

“Как так?” —думаю, примерно такой будет реакция большинства на заголовок этой статьи. Что значит “Используйте Python для браузера?”. Ведь всем известно, что в браузерах может выполняться только JavaScript.

Как заблокировать Яндекс Дзен на странице Яндекса

Что ж, ниже приведён скриншот исходного кода моего личного веб-сайта. Обратите внимание на его отличия:

Всё верно, это Python!

А теперь давайте поговорим о том, как он работает, и какие другие альтернативы браузерному JS существуют.

Знакомимся с Brython

Brython — это реализация Python 3, написанная на JavaSсript и позволяющая писать код для браузеров на Python. По сути, это JS библиотека, преобразующая код Python в JS-эквивалент и вычисляющая его при выполнении.

И поскольку “написание кода для браузера на Python” звучит круто, я решил эту тему осветить.

Создаём “Змейку” при помощи Brython

Вот ссылка на мой сайт, где вы можете попробовать два варианта игры “Змейка”: написанный на Brython и JavaScript. А здесь вы найдёте ссылку на Github, где размещён весь стоящий за этим код.

Чтобы испытать Brython я решил создать классическую игру “Змейка”.

Поскольку я ни специалист по HTML Canvas, ни разработчик игр, то решил использовать в качестве стартовой точки эту её реализацию на JavaScript. Я уже создавал собственную игру “Змейка” ранее, но в данном случае эта она намного симпатичней и компактней.

Итак, поверх реализации взятой “Змейки” я расширил функциональность набором очков и записью рекордного их количества, немного улучшил интерфейс, добавил кнопки паузы и инструкций. После этого я перенёс игру в Brython.

Честно говоря, я также изменил данный код так, чтобы он выполнялся в режиме strict JS, поскольку автор игры использовал такие элементы, как глобальные переменные, которые, на мой взгляд, не отражают преимущественный облик JavaScript (я нисколько его за это не критикую, так как он писал код на скорость), а я же хотел получить наглядное сравнение кода JS с кодом Brython.

В итоге JavaScript получился такой, и я не буду размещать здесь его фрагмент, потому что основная наша цель — Brython.

Несмотря на то, что некоторые части кода Brython были “прямым переводом” JS варианта, некоторые из его частей вроде функции набора очков, я создал непосредственно в Brython, а затем реализовал в JS, чтобы понять, как это всё работает. Конечный результат получился следующим:

Теперь, исходя из этого фрагмента, давайте проясним некоторые ключевые принципы Brython:

Включение brython.js

Brython не требует установки. Достаточно импортировать скрипт внутрь :

Выполнение Brython

Для того, чтобы Brython преобразовал и вычислил код Python как обычный JS, нужно вызвать brython прямо при загрузке тела документа так:

Эта команда произведёт поиск тегов скриптов типа text/python и вычислит внутри них код.

Web API

По умолчанию JavaScript позволяет доступ к таким элементам, как объекты document и window , являющимся основополагающими в любом проекте JS. В связи с этим Brython также нужен способ включить их в процесс.

Для решения этой задачи его создатели могли просто позволить разработчикам по умолчанию мгновенно обращаться к document и window в своём коде Python, но тогда бы упала производительность, а отладчики Python постоянно бы выдавали undefined variable .

Удаленная автоматизация в safari что это

В итоге, чтобы иметь возможность использовать эти API, нам нужно импортировать их так же, как и любой модуль Python:

Теперь уже не нужно выполнять для них pip install . В конце концов мы пишем это в нашем HTML. Просто включите инструкции импорта и Brython будет знать, что делать.

Чтобы на деле увидеть, насколько хорошо это работает, я решил попробовать несколько разных методов из Web API ( alert , setInterval , addEventListener и т.д.). Всё сработало, как я и ожидал.

Нативные объекты и методы JavaScript

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

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

На деле выяснилось, что мы можем обращаться к большей части JS, чем я думал. Смотрите:

*Очевидно, что Brython предоставляет некоторые стандартные библиотеки Python, реализованные непосредственно в JavaScript, и если у такой библиотеки нет JS версии, то у вас по-прежнему должна быть возможность импортировать модуль. В этом случае Brython извлечёт чистую версию Python и выполнит её наряду со своим кодом. Тем не менее random в моём случае не сработал, но я могу понять почему.

Отличительные принципы языка

В Python, если я хочу распаковать список, то могу выполнить list2 = [*list] . Кроме того, если я захочу определить значение переменной, основываясь на состоянии, то использую foo = 10 if condition else 20 .

У этих инструкций есть эквивалент в JavaScript: оператор распространения ( [. arr] ) и троичный оператор ( let foo = condition ? 10 : 20 ).

Но поддерживает ли их Brython?

Я их испробовал, и сработали они прекрасно. Вы увидите, что распаковка списков и условное присваивание Python включены в мой итоговый исходный код.

Отладка

Честно говоря, я думал, что отладка Brython будет ужасной. На деле же оказалось всё не так плохо. Я, конечно, создал маленький и весьма простой проект, но ошибки, выброшенные Brython, были точны и достаточно описательны. По меньшей мере это касается синтаксиса. Импортирование же модулей Python представляет собой совсем другую историю.

Анализ производительности

Как и ожидалось, скорость вычисления кода Brython при выполнении ниже, чем у JavaScript. Конкретно в моём случае отличие в 1,7 раза.

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

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

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

Проблемы с видео в Яндекс Браузере

Выводы по использованию Brython

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

Плюсы👍

  • Мне удалось создать “Змейку” без лишних хлопот и при этом я получил позитивный опыт отладки.
  • В моём простом проекте Brython легко взаимодействовал с нативными объектами JS доступными на странице.
  • Я ценю тот факт, что мой код выглядит чище, чем в Python, а также, что я могу использовать полезный синтаксис Python в написании кода для браузера.
  • Что касается “Змейки, то несмотря на её более долгую загрузку по сравнению с чистым JS, для пользователя эта разница заметна не будет.
  • Меня порадовало видеть Python в исходном коде моего сайта 🙂

Минусы👎

  • При выполнении Brython намного медленнее чистого JS.
  • Разработчику для удобства работы с Brython необходимо в некоторой степени знать JavaScript.
  • Неизбежно большее число ошибок.
  • Документация Brython и его веб-сайт неудобен в навигации и обучения.
  • Brython недостаёт развитой экосистемы и инструментов для разработки.

Закончив в итоге свой первый проект Brython, я могу с уверенностью сказать, что однажды вернусь к этому языку ещё.

Тем не менее я считаю, что в своём текущем состоянии Brython больше подходит JS разработчикам, знающим Python и уставшим от JavaScript, нежели Python разработчикам, желающим заниматься веб-разработкой, не изучая при этом JavaScript.

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

Другие альтернативы браузерному JS

Я выбрал Brython по причине того, что среди всех альтернатив JS на основе Python, с которыми я познакомился, только эта по-прежнему активно дорабатывается на GitHub. Большинство известных мне транспиляторов Python -> JavaScript не видели коммитов уже на протяжении нескольких лет. Тем не менее другие альтернативы существуют.

Достаточно интересно выглядит в этом плане Pyodide. Он компилирует Python (вместе с его библиотеками для обработки данных) в WebAssembly, который позволяет выполнять код Python в браузере.

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

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

Это амбициозный и многообещающий проект, который скорее всего приведёт к росту объёмов веб-разработки без применения JavaScript.

Тем не менее он по-прежнему пребывает на начальной стадии (около 3 лет) развития, поэтому пройдёт ещё, вероятно, немало времени, прежде чем JavaScript будет повсеместно замещён другим языком.

И пока этот день не настанет, разработчики будут вынуждены прибегать к использованию инструментов вроде Brython, если уж работать с JavaScript очень надоест.

Источник
Рейтинг
Загрузка ...