原文转载自「刘悦的技术博客」https://v3u.cn/a_id_120

就在不久之前，我们目前这个毕业班的班长那日同学和我说，他正在公司开发Chrome扩展，看起来很高大上的技术，实际开发却非常简单，这引起了我非常浓厚的兴趣，正所谓技不压身，检验自身技术的手段之一就是拥抱新事物，这一次我们尝试在半小时内开发一款Chrome扩展，因为之前我们做了一个微信小程序的在线面试题题库的项目，所以正好利用这个题库将面试题平移到Chrome扩展上面。

Chrome插件其实和一个普通web应用一样都是由html+css+js经过zip打包组成的，插件可以使用Chrome提供的浏览器API，增强浏扩展览器的功能。Chrome插件通常是.crx后缀的文件，通过谷歌网上应用商店下载或者在开发者模式中可以直接拖入到浏览器进行安装

首先建立一个项目文件夹，mkdir chrome_demo

在项目根目录下建立一个manifest.json文件，它是chrome扩展的核心配置，用来定义和配置我们的扩展

{

    "manifest_version": 2,

    "name": "v3u.cn-python_interview",

    "description": "Dotions - python面试题",

    "version": "1.0",

    "browser_action": {

        "default_icon": "icon.png",

        "default_popup": "popup.html",

        "default_title": "点这里查看面试题"

    },

    "permissions": [

        "tabs",

        "webRequest",

        "webRequestBlocking",

        "storage",

        "webNavigation",

        "tabs",

        "contextMenus",

        "http://*/",

        "https://*/",

        "notifications"

    ]

}

其中name代表应用程序名，version代表版本号，description代表功能描述。这些在安装扩展后就能看到,其他还有一些权限的设置，以及扩展图标(icon)，可以自己设计一个比较独特和醒目的图标放在项目根目录，这里推荐一款在线小图标生成工具： https://iconsflow.com

随后我们来定义扩展的页面部分，popup.html

<!DOCTYPE html>

<html lang="zh-CN" style="min-width:300px;background-color: #292a2d;color:#a9a9b3;padding:20px;">

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>python面试题</title>

        <script type="text/javascript" src="js/jquery.min.js"></script>

        <script type="text/javascript" src="js/popup.js"></script>

    </head>

    <body>

       <div id="title">

        123123

       123123

       123

    </div>

       <br />

       <button id="my">显示答案</button>

       <br /><br />

       <div id="answer" style="display: none;"></div>

    </body>

</html>

页面部分和传统的html页面并无二致，这里配色我们使用最近很流行的“暗黑模式”配色，看起来是这个样子的

这里我们的项目依赖于jquery，所以在根目录建立js文件夹，放入jquery文件以及我们自定义的js文件popup.js

$(function () {

       console.log('你好你好');

        $.ajax({url:"https://vx.weiinng.cn/chrome",data:{'word':'redis123'},contentType: "application/json",

        dataType: "json",success:function(result){

            console.log(result);

            $("#title").html(result.result[0]['title']);

            $("#answer").html(result.result[0]['desc']);

        }});

    $("#my").click(function () {

        $("#answer").show();

    });

});

我们看到，这个逻辑很简单，就是点击按钮进入扩展的时候，利用jquery往后台发送一个异步请求，用来获取一道随机面试题，接口返回数据后，前端再通过回调方法将面试题渲染到扩展的页面中，目前为止，我们的项目结构是这样的

随后我们将扩展导入到chrome浏览器中，在浏览器地址栏输入：chrome://extensions/,然后点击加载已解压的扩展程序

代码里我用console.log输出了一些信息，那么怎么调试扩展呢？只要右键点击你的扩展图标点击审查弹出就可以进行调试。

无论是修改html还是修改js文件都是实时生效的，无须重启浏览器，或者重新加载扩展，这一点无疑非常方便，那么后台怎么接收前端扩展发过来的参数呢？这里我们以tornado为例子

#查看数据

class FindComHandler(BaseHandler):

    def get(self):

        word = self.get_argument('word',None)

        print(word)

        self.write(jsonb.dumps({'result':word},ensure_ascii=False))

非常简单，可以看出来和普通的前后端分离的接口一样，没什么特别的

这里我们需要在题库中随机取一道面试题，所以需要用到mongodb的分组随机语法

#随机取一条数据

class ChromeHandler(BaseHandler):

    def get(self):

        db = mongo_client.interview

        table = db.interview

        mylist = []

        pipeline = [{ '$sample': { 'size': 2 } },{'$match':{"com":""}}]

        res = table.aggregate(pipeline)

        for result in res:

            print(result)

            mylist.append(result)

            break

        self.write(jsonb.dumps({'result':mylist},ensure_ascii=False))

至此一个简单的随机面试题扩展就开发好了，看看表，确实不到半小时就可以搞定，当我们用chrome上网的时候，只需要点击图标就可以随时查看目前市场上的常见面试题，简直太方便了

开发完毕之后，我们还可以在扩展页面对你的项目进行打包，打包好的扩展为一个crx文件，这样就可以进行拖拽安装了

最后，感谢那日同学的分享才有了这篇文章，老规矩，分享出项目地址供广大开发者交流指正

https://github.com/zcxey2911/chrome_v3u

原文转载自「刘悦的技术博客」 https://v3u.cn/a_id_120

在半小时内从无到有开发并调试一款Chrome扩展（Chrome插件/谷歌浏览器插件）的更多相关文章

  1. ORACLE 查询近一天，近半小时内的数据

    SELECT 字段  FROM 表名  WHERE 时间字段  BETWEEN SYSDATE-1 AND SYSDATE; //查询一天内的数据 sysdate+1 加一天sysdate+1/24 ...

  2. sql查询技巧，按时间分段进行分组，每半小时一组统计组内记录数量

    今天拿到一个查询需求,需要统计某一天各个时间段内的记录数量. 具体是统计某天9:00至22:00时间段,每半小时内订单的数量,最后形成的数据形式如下: 时间段          订单数 9:00~9: ...

  3. smarty半小时快速上手入门教程

    http://www.jb51.net/article/56754.htm http://www.yiibai.com/smarty/smarty_functions.html http://www. ...

  4. EgretWing链接微信开发工具调试问题

    EgretWing链接微信开发工具调试问题 EgretWing 编译器支持持三种调试模式,Node.js .Chrome .EgretWing 扩展开发. 开发过程中会遇到工具配置错误. 这就需要在E ...

  5. 使用Symfony 2在三小时内开发一个寻人平台

    简介 Symfony2是一个基于PHP语言的Web开发框架,有着开发速度快.性能高等特点.但Symfony2的学习曲线也比 较陡峭,没有经验的初学者往往需要一些练习才能掌握其特性. 本文通过一个快速开 ...

  6. Redis 在java中的使用（登录验证，5分钟内连续输错3次密码，锁住帐号，半小时后解封）（三）

    在java中使用redis,做简单的登录帐号的验证,使用string类型,使用redis的过期时间功能 1.首先进行redis的jar包的引用,因为用的是springBoot,springBoot集成 ...

  7. Asp.net Mvc模块化开发之“开启模块开发、调试的简单愉快之旅”

    整个世界林林种种,把所有的事情都划分为对立的两个面. 每个人都渴望的财富划分为富有和贫穷,身高被划分为高和矮,身材被划分为胖和瘦,等等. 我们总是感叹,有钱人的生活我不懂;有钱人又何尝能懂我们每天起早 ...

  8. 微信公众平台开放JS-SDK(微信内网页开发工具包)

    微信公众平台开放JS-SDK(微信内网页开发工具包),这次开放接口是质的飞跃,是对开发者和广大用户一个利好的消息.未来的公众号图文消息会更丰富多彩,准备脑洞大开吧!(第三方平台正式支持接入微信公众平台 ...

  9. WEB前端开发和调试的工具

    前端开发在线课程: http://yun.lu/student/course/list/8   1.HBuilder:WEB开发IDE工具 hbulider,内核是eclipse,Dcloud公司出品 ...

随机推荐

  1. 一条更新SQL的内部执行及日志模块

    一条更新SQL的内部执行 学习MySQL实战45讲,非常推荐学 还是老图: 上文复习 在执行查询语句的时候,会执行连接器(总要连上才能搞事情),然后去查询缓存(MySQL8+删除了),有数据返回,没数 ...

  2. 有趣的BUG之Stack Overflow

    今天遇到一个很有意思的bug,当程序开发完成后打包到服务器运行,总是会出现栈溢出异常,经过排查发现,问题出现在一个接口上,但这个接口逻辑并不复杂,除了几局逻辑代码外和打印语句之外也没有其他的了,但是只 ...

  3. 给IDEA道个歉，这不是它的BUG，而是反编译插件的BUG。

    你好呀,我是歪歪. 上周我不是发了<我怀疑这是IDEA的BUG,但是我翻遍全网没找到证据!>这篇文章吗. 主要描述了在 IDEA 里面反编译后的 class 文件中有这样的代码片段: 很明 ...

  4. 从零开始学YC-Framework之鉴权

    一.YC-Framework鉴权是基于哪一个开源框架做的? YC-Framework鉴权主要基于Dromara开源社区组织下的Sa-Token. 1.什么是Sa-Token? Sa-Token是一个轻 ...

  5. django框架2

    内容概要 django小白必会三板斧 静态文件及相关配置 登录功能 静态文件 request对象方法 pycharm链接MySQL django链接MySQL django orm操作 django ...

  6. 渗透测试之sql注入验证安全与攻击性能

    由于渗透测试牵涉到安全性以及攻击性,为了便于交流分享,本人这里不进行具体网址的透露了. 我们可以在网上查找一些公司官方网站如(http://www.XXXXXX.com/xxxx?id=1) 1.拿到 ...

  7. 『忘了再学』Shell基础 — 30、sed命令的使用

    目录 1.sed命令说明 2.行数据操作 (1)查看文件中的数据 (2)删除文件中的数据 (3)向文件中追加数据 (4)向文件中插入数据 (5)修改文件中的多行数据(删除,追加,插入) (6)替换文件 ...

  8. 【Java面试】请简单说一下你对受检异常和非受检异常的理解

    Hi,我是Mic 今天给大家分享一道阿里一面的面试题. 这道题目比较基础,但是确难倒了很多人. 关于"受检异常和非受检异常的理解" 我们来看看普通人和高手的回答. 普通人: 嗯.. ...

  9. python基础知识-day6（函数知识）

    1.函数的特点 函数式的编程范式 面向对象的编程范式 所谓函数,就是把重复的代码单独的分离出来,放在一个公共的地方,以后可以一只调用,这样就可以解决多次重复来编写. 2.函数的定义 1 def fun ...

  10. python线程池 ThreadPoolExecutor 的用法及实战

    写在前面的话 (https://jq.qq.com/?_wv=1027&k=rX9CWKg4) 文章来源于互联网从Python3.2开始,标准库为我们提供了 concurrent.future ...