5分钟学会开发浏览器扩展

Euphoria 发布于2019-08-02 12:07 / 1962人阅读

摘要：写在前面做开发的同学，经常会用到各种浏览器插件，那么我们寄几怎么开发一个插件呢其实是浏览器扩展其实很简单，你意想不到的简单。

写在前面

做web开发的同学，经常会用到各种chrome浏览器插件，那么我们寄几怎么开发一个插件呢（其实是浏览器扩展）？其实很简单，你意想不到的简单。只要有web开发基础，会写基本的html，css和js就可以做。
那面就跟着我一起开始吧！

1.创建项目

首先新建一个文件夹，比如叫 plugin-demo

 mkdir plugin-demo
cd plugin-demo/

2.manifest.json

chrome浏览器对插件基本要求就一个，就是要有一个manifest.json的文件。这个文件内容如下：

{
    "name": "plugin-demo",
    "version": "0.9.0",
    "manifest_version": 2,
    "description": "chrome plugin demo",
    "browser_action": {
        "default_icon": "icon.png",
        "default_title": "5分钟学会开发浏览器插件",
        "default_popup": "popup.html"
    }
}

这只是一个最基本的配置，详细的配置参看这里.

3.创建界面

我们注意到，在manifest.json的配置中，有一个default_popup的选项，它的值是 popup.html,所以我们需要新建这么一个页面。
在当前项目下新建popup.html
内容我们尽可能的简单了，如下：




    
    
    
    Document
    


    

    

        这是一个chrome 插件案例
        
        created by Davie

页面中，基本就是一个div以及内容展示，很简单，你自己写也可以。
然后我们的插件还需要一个图标，图标你可以自己制作，也可以去找一张图。比如这里.
我下载了一个苹果的图片作为我的这个插件的图标。放在项目根目录。把图标名字命名为icon.png(或者修改配置也可以)。

下面就是最激动人心的时刻了！

4、安装插件

现在我们就可以让chrome浏览器来安装我们的插件了。
点击浏览器最右侧的三个点图标，选择更多工具->k扩展程序，或者直接在地址栏输入 chrome://extensions/，打开扩展程序安装界面。

扩展界面：

打开开发者模式，然后选择 “加载已解压的扩展程序”

找到我们刚才新建的项目，打开就可以了。
如图，我们的插件已经安装好了

5、查看效果

点击苹果

GPU云服务器云服务器分钟学会python 每隔5分钟 5分钟打造webrtc 每天5分钟玩转kubernetes

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53350.html

【30分钟学会】用js玩点算法(1)：排序基础

摘要：如果今天这个比例降低了，可能的原因之一是如今的排序算法更加高效，而并非排序的重要性降低了。约定都是从小到大排序，当前项为。冒泡排序比较任何两个相邻的项，如果第一个比第二个大，则交换它们。前言前端工程师由于业务特点比较少接触算法的东西，所以本系列也不会讲太过深入的东西，更多的是作为知识扩展和思维逻辑的培养。排序就是将一组对象按照某种逻辑顺序重新排列的过程，本篇将介绍几种金典的排序...

Richard_Gao 2019-08-22 16:30 评论0 收藏0
5分钟学会Java9-Java11的七大新特性

摘要：来来来，花分钟看看的七大新特性，还有代码样例。本地是指方法内的变量声明。从开始，这个正式进入标准库包。同步请求会阻止当前线程。可喜的是，如果尝试改变不可变集合，会通过发出警告是在中引入的，增加了三个新方法。现在Java有多元化的发展趋势，既有JS又有C++还有C#的影子，不学习那是不行滴。来来来，花5分钟看看Java9-Java11的七大新特性，还有代码样例。Java11 发布了，然...

xuhong 2019-08-16 14:37 评论0 收藏0
5分钟教你学会Django系统错误监控

摘要：一监控所有的请求如何实现系统监控，自动发送错误日志的邮件呢只需配置配置文件即可。设置发送邮件配置信息邮件会发送到设定的邮件列表中。 showImg(https://segmentfault.com/img/remote/1460000015327475); 一、监控所有的request请求如何实现系统监控，自动发送错误日志的邮件呢？只需配置配置settings文件即可。 1.设置发...

Aldous 2019-07-30 16:52 评论0 收藏0
PHP扩展开发教程2 - 编写第一个扩展 hello world

摘要：二下载第一个扩展第一个扩展的源码已经在上准备好了，直接用命令克隆，或者手工下载都可以。第四步确认扩展已经安装成功使用命令可以查看目前已经安装的所有扩展。 PHP扩展是高级PHP程序员必须了解的技能之一，对于一个初入门的PHP扩展开发者，怎么才能开发一个成熟的扩展，进入PHP开发的高级领域呢？本系列开发教程将手把手带您从入门进入高级阶段。本教程系列在linux下面开发（推荐使用cento...

Berwin 2019-06-28 18:40 评论0 收藏0