使用Python开发chrome插件

本文由 伯乐在线 - xianhu 翻译，Daetalus 校稿。未经许可，禁止转载！
英文出处：pythonspot.com。欢迎加入翻译小组。

谷歌Chrome插件是使用HTML、JavaScript和CSS编写的。如果你之前从来没有写过Chrome插件，我建议你读一下这个。在这篇教程中，我们将教你如何使用Python代替JavaScript。

创建一个谷歌Chrome插件

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


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

{

  "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的文件：


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

<!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，点击开发者模式。点击“加载未打包扩展程序”，选择文件夹，点击OK。

为Chrome扩展程序添加Python

现在你拥有了最基本的权利，我们可以在代码中添加Python。为了能在一个浏览器中运行Python，你有很多个选择，包括Brython和emcascripten。我们决定使用Brython。我们将从一个服务器运行Brython脚本。改变popup.html的内容：


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<!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>

重启下你的插件，你就会在你的谷歌Chrome浏览器中得到一个Python（Brython）解释器。

运行你自己的脚本

为了能够运行你自己的脚本，简单地修改一下popup.html框架中的url即可：


1

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

这个脚本应该运行在你自己的服务器上。你可以从网上运行任意的Brython脚本。利用Brython，你可以简单地在脚本标签中输入Python代码。看一下这个Brython的例子，或者简单地浏览下这个网站。

总结：

Chrome插件是使用HTML、JavaScript和CSS创建的。我们想知道在谷歌Chrome插件中能否使用Python代码。我们最终得到了一个浏览器中的Python解释器和执行Python脚本的能力。记住，这只是个实现性的结果，只是一个玩具，在这一点上，我不建议你将所有的插件都移植或建立在Brython上。

关于作者： xianhu

时间： 2024-10-10 17:58:01

使用Python开发chrome插件的相关文章

使用Vuejs 开发chrome 插件的注意事项

chrome 插件的开发其实并不难,web开发者可以使用 html, css, javascript 轻松的开发实用的 chrome 插件. 一个好的 chrome 插件可以提高我们的开发效率,甚至方便我们的生活.例如 Vue-devtools ,是 Vuejs 的开发者不可或缺的利器,再如最常见的谷歌翻译插件,可以翻译整个网页中的英文内容,可以很方便的帮助我们查阅英文文档. chrome 插件使用前端技术开发,但是提供了一些高级的接口(文件操作,操作USB设备,系统信息等),所以可以开发出一些

[Misc] python 开发vim 插件初步测试

[Misc] python 开发vim 插件初步测试 今日雨夹雪, 晚上闲来没事突然想了解下用python试试VIM插件开发. 于是写了个初步测试. 总体来说相当简单, 几个相当设置语法后, import vim 后就进入python世界了. (相当操作命令vim内:help py了解更多) 测试代码, 放到.vim/plugin目录下, *.vim vim内: Helloworld 和 : Helloname abeen 调用测试方法. 测试如下: 1 " vim plugin test 2

自己开发chrome插件生成二维码

摘要: 最近在开发微信项目时,需要在微信调试,所以经常会在微信中输入本地服务地址,输入起来特别麻烦,所以自己就想了想微信中的扫一扫,然后开发了这款chrome插件,将当前url生成二维码,用微信扫一扫就可以看效果了.在公司里面已经使用起来了,屡试不爽. 代码地址:https://github.com/baixuexiyang/qrcode 欢迎star和fork

iconfont 批量添加购物车 及自开发chrome插件

起因 iconfont非常好用,但是如果要批量的添加icon到自己的购物车简直就是噩梦,一个一个点击太扯蛋,只有自己想办法了. 思路 打开列表详情页,例如随便一个包, 右键-> 开发者工具 -> console 运行如下代码,选取所有icon下的购物车按钮,触发点击. 1 document.querySelectorAll('.icon-gouwuche1').forEach(item=>item.click()); 这里iconfont网站有个bug,超过一定数量(MACPRO chr

试着开发chrome插件

我的第一个chrome插件,是app形式的 代码如下 创建一个文件: 1.manifest.json 1 { 2 "version": "1.0", 3 "manifest_version": 2, 4 "app":{ 5 "launch":{ 6 "web_url":"http://www.cnblogs.com/zzzzw" 7 }, 8 "urls&q

Web前端开发Chrome插件

参考:http://www.cnblogs.com/sosoft/p/3490481.html 越来越多的前端开发人员喜欢在Chrome里开发调试代码,Chrome有许多优秀的插件可以帮助前端开发人员极大的提高工作效率.尤其Chrome本身是可以登录的,登录后你所有的插件都会自动同步到每一个登录后的Chrome的,非常方便啊. Postman - REST Client Postman是Ajax开发的神器,对于Restful开发方式特别有帮助,可以用来模拟各种请求来测试API的正确性,比如用来模

Eclipse下配置python开发环境插件

1,需要安装Eclipse,可以去官网http://www.eclipse.org/downloads/上下载 2,启动Eclipse,到Help菜单上,点击Install New SofeWare 3,点击Add,在弹出窗口中输入你的插件名称,一般取名PyDev,地址:http://pydev.sf.net/updates/ 如图所示: 接下来如图: 下一步: 下一步同意,完成. 重新打开Eclipse,新建项目里面会出现python项目,新建.py文件.

开发chrome 插件， background.js中 console log 看不到解决方法

http://stackoverflow.com/questions/10257301/where-to-read-console-messages-from-background-js-in-a-chrome-extension

sublime text 3 为配置Python开发环境所做的一些个人设置

我们都知道,ST3(Sublime Text 3)自带的build python可以直接运行.py文件,但是若涉及input()函数需要输入时,就不能用这个了. 下面是我个人所作的一些对我来说算是够用的配置,由于本人还处于初学python的阶段,所以相关配置比较基础与简单. 第一步:下载Sublime Text 下载请去官网下载,下载请视自己的操作系统而定,由于鄙人的系统是Windows,以下皆是以Windows为例展开介绍的. 第二步:Windows 下安装Sublime Text 1. 64