DevGang
Авторизоваться

Как создать плагин Chrome с помощью Python 

Расширение Google Chrome, созданное с помощью Python (бессерверный, метод B). _ (click to zoom)_Google Chrome плагин написан на HTML, JavaScript и CSS. Если вы никогда не писали плагин Chrome, я предлагаю ознакомиться с документацией по расширениям Chrome.

Вы можете использовать Python вместо JavaScript, и в этом руководстве мы покажем вам, как это сделать.

Создать подключаемый модуль Google Chrome

Для начала нам нужно создать файл манифеста: manifest.json.

{
  "manifest_version": 2,

  "name": "Python Chrome Plugin",
  "description": "This extension runs Python code.",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab",
    "https://ajax.googleapis.com/"
  ]
}

Создайте файл с именем popup.html

<!doctype html>
<!--
 This page is shown when the extension button is clicked, because the
 "browser_action" field in manifest.json contains the "default_popup" key with
 value "popup.html".
 -->
<html>
  <head>
    <title>Getting Started Extension's Popup</title>
    <style>
      body {
        font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
        font-size: 100%;
      }
      #status {
        /* avoid an excessively wide status text */
        white-space: pre;
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: 400px;
      }
    </style>

    <!--
      - JavaScript and HTML must be in separate files: see our Content Security
      - Policy documentation[1] for details and explanation.
      -
      - [1]: https://developer.chrome.com/extensions/contentSecurityPolicy
     -->
    <script src="popup.js"></script>
  </head>
  <body>
    <div id="status"></div>
    <img id="image-result" hidden>
  </body>
</html>

Наконец, получите иконку и сохраните ее как icon.png. Откройте chrome://extensions и нажмите режим разработчика. Нажмите «загрузить распакованное расширение», выберите свой каталог и нажмите ок.

Добавление Python в расширение Chrome

У нас есть два варианта добавления Python в расширение Chrome:

  1. Метод A: включить Brython в iframe (требуется сервер)
  2. Метод B: скомпилируйте Python в Javascript с помощью Rapydscript (лучше всего, бессерверное, чистое расширение).

Метод A: Python (Brython) в iframe

Теперь, когда у вас есть основы, мы можем добавить Python в код. Для запуска Python в браузере у вас есть несколько вариантов, включая Brython и emcascripten. Мы решили попробовать Brython. Мы запустим сценарий Brython с сервера. Измените popup.html на:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="iso-8859-1">
<style>
body {    
    margin: 0 !important;
    padding: 0 !important;
    width: 800;
}

#frame {
    overflow: hidden;
    width:790;
    height:324;
}
</style>
</head>
<body onLoad="">
<iframe src=http://brython.info/console.html id="frame" seamless="seamless" scrolling="no"></iframe>
</body>
</html>

После перезапуска плагина у вас будет интерпретатор Python (Brython) внутри вашего Google Chrome.

Запуск собственных скриптов

Чтобы запустить собственный скрипт, просто измените URL-адрес во фрейме popup.html:

<iframe src="BRYTHON SCRIPT URL" id="frame" seamless="seamless" scrolling="no"></iframe>

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

Метод Б. Скомпилируйте Python в Javascript.&nbsp;(без сервера, чистое расширение)

Есть несколько инструментов для компиляции Python в Javascript. Rapydscript работает нормально, Pyjs плохо работает с хромом (требуется специальный параметр при запуске).

Установите Rapydscript с помощью:

sudo apt-get install npm
sudo ln -s /usr/bin/nodejs /usr/bin/node
sudo npm install rapydscript

Измените файл /src/hello.py:

Example Python script 
# (for rapydscript, a python to javascript compiler)

#def doHelloMessage():
#    alert('hello')
#doHelloMessage()

# modify html page
document.getElementById("result").innerHTML = 'Compiled Python script in Chrome' 

# write into log 
console.log('hello from python')

Выполните:

./make.sh

Вы можете найти свое расширение в /compiledpythonextension/. Загрузите его в хроме как распакованное расширение и посмотрите, как оно работает :-)

Заключение:

Плагины Chrome создаются с использованием HTML, JavaScript и CSS. Мы можем использовать Python для создания обычных расширений Chrome с помощью компилятора Python в Javascript (Rapydscript).

Источник:

#JavaScript #Python
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

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

Попробовать

Оплатив хостинг 25$ в подарок вы получите 100$ на счет

Получить