原文： https://pythonspot.com/create-a-chrome-plugin-with-python/

使用 Python 创建 Chrome 插件 - 图1

使用 Python 创建的 Google Chrome 扩展程序（无服务器，方法 B）。

Google Chrome 插件使用 HTML，JavaScript 和 CSS 编写。 如果您以前从未编写过 Chrome 插件，我推荐 chrome 扩展程序文档。

您可以使用 Python 代替 JavaScript，在本教程中，我们将向您展示如何做到这一点。

很忙？从此站点下载代码：

下载扩展代码（并向下滚动到方法 B）

创建一个 Google Chrome 插件

首先，我们必须创建一个清单文件：manifest.json。

  1. {
  2.   "manifest_version": 2,
  4.   "name": "Python Chrome Plugin",
  5.   "description": "This extension runs Python code.",
  6.   "version": "1.0",
  8.   "browser_action": {
  9.     "default_icon": "icon.png",
  10.     "default_popup": "popup.html"
  11.   },
  12.   "permissions": [
  13.     "activeTab",
  14.     "https://ajax.googleapis.com/"
  15.   ]
  16. }

创建一个名为popup.html的文件

  1. <!doctype html>
  2. <!--
  3.  This page is shown when the extension button is clicked, because the
  4.  "browser_action" field in manifest.json contains the "default_popup" key with
  5.  value "popup.html".
  6.  -->
  7. <html>
  8.   <head>
  9.     <title>Getting Started Extension's Popup</title>
  10.     <style>
  11.       body {
  12.         font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
  13.         font-size: 100%;
  14.       }
  15.       #status {
  16.         /* avoid an excessively wide status text */
  17.         white-space: pre;
  18.         text-overflow: ellipsis;
  19.         overflow: hidden;
  20.         max-width: 400px;
  21.       }
  22.     </style>
  24.     <!--
  25.       - JavaScript and HTML must be in separate files: see our Content Security
  26.       - Policy documentation[1] for details and explanation.
  27.       -
  28.       - [1]: https://developer.chrome.com/extensions/contentSecurityPolicy
  29.      -->
  30.     <script src="popup.js"></script>
  31.   </head>
  32.   <body>
  33.     <div id="status"></div>
  34.     <img id="image-result" hidden>
  35.   </body>
  36. </html>

最后得到一个图标，并将其另存为icon.png。 打开 docs_chrome:_extensions，然后按开发人员模式。 按“加载解压的扩展”，选择目录，然后按 OK。

将 Python 添加到 Chrome 扩展程序

我们有两个选项可将 Python 添加到 chrome 扩展中：

  • 方法 A：将 Brython 包含在iframe中（需要服务器）

  • 方法 B：使用 Rapydscript（最佳，无服务器，纯扩展）将 Python 编译为 Javascript。

方法 A：iframe中的 Python（Brython）

既然您已经掌握了基本知识，我们就可以将 Python 添加到代码中。要在浏览器中运行 Python，您可以使用多个选项，包括 Brython 和 emcascripten。我们决定尝试 Brython。 我们将从服务器运行 Brython 脚本。将popup.html更改为：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <meta charset="iso-8859-1">
  5. <style>
  6. body {    
  7.     margin: 0 !important;
  8.     padding: 0 !important;
  9.     width: 800;
  10. }
  12. #frame {
  13.     overflow: hidden;
  14.     width:790;
  15.     height:324;
  16. }
  17. </style>
  18. </head>
  19. <body onLoad="">
  20. <iframe src=http://brython.info/console.html id="frame" seamless="seamless" scrolling="no"></iframe>
  21. </body>
  22. </html>

重新启动插件后，您的 Google Chrome 浏览器中将包含一个 Python（Brython）解释器。

使用 Python 创建 Chrome 插件 - 图2

Google Chrome 中的 Python

运行您自己的脚本

要运行您自己的脚本，只需更改popup.html框架内的 url：

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

该脚本应在您自己的服务器上运行。 您可以从网络运行任何 Brython 脚本。 使用 Brython，您只需在script标签内键入 Python 代码。 看看这个 Brython 示例，或者只是浏览图库。

方法 B：将 Python 编译为 Javascript（无服务器，纯扩展）

有几种工具可以将 Python 编译为 Javascript。Rapydscript 可以正常工作，Pyjs 在 chrome 上无法正常使用（启动时需要特殊参数）。

使用以下命令安装 Rapydscript：

  2. sudo apt-get install npm
  3. sudo ln -s /usr/bin/nodejs /usr/bin/node
  4. sudo npm install rapydscript

从此站点下载代码：

下载扩展代码

将文件/src/hello.py更改为所需的文件：

  2. # Example Python script 
  3. # (for rapydscript, a python to javascript compiler)
  5. #def doHelloMessage():
  6. #    alert('hello')
  7. #doHelloMessage()
  9. # modify html page
  10. document.getElementById("result").innerHTML = 'Compiled Python script in Chrome' 
  12. # write into log 
  13. console.log('hello from python')

运行：

  2. ./make.sh

您可以在/compiledpythonextension/中找到您的扩展。 将其作为未打包的扩展程序加载到 chrome 中，并查看其工作情况 :-)

结论：

Chrome 插件是使用 HTML，JavaScript 和 CSS 创建的。我们可以使用 Python 创建 Python 到 Javascript 编译器（Rapydscript）的常规 Chrome 扩展。