Java学习者论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

手机号码,快捷登录

恭喜Java学习者论坛(https://www.javaxxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,购买链接:点击进入购买VIP会员
JAVA高级面试进阶视频教程Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程

Go语言视频零基础入门到精通

Java架构师3期(课件+源码)

Java开发全终端实战租房项目视频教程

SpringBoot2.X入门到高级使用教程

大数据培训第六期全套视频教程

深度学习(CNN RNN GAN)算法原理

Java亿级流量电商系统视频教程

互联网架构师视频教程

年薪50万Spark2.0从入门到精通

年薪50万!人工智能学习路线教程

年薪50万!大数据从入门到精通学习路线年薪50万!机器学习入门到精通视频教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程 MySQL入门到精通教程
查看: 4085|回复: 0

[默认分类] 手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单

[复制链接]
  • TA的每日心情
    开心
    2021-12-13 21:45
  • 签到天数: 15 天

    [LV.4]偶尔看看III

    发表于 2018-7-7 14:31:55 | 显示全部楼层 |阅读模式

    手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单
    手把手教你开发Chrome扩展二:为html添加行为
    手把手教你开发Chrome扩展三:关于本地存储数据

    Chrome的更新速度可以说前无古人,现在我每天开机的第一件事就是打开Chrome检查是不是有了新版本。界面清爽、操作人性化、网络备份资料和快速的启动速度令我爱不释手,还有它拥有众多的扩展程序,相对于firefox的插件来说,数量上和质量上稍显不足,但相信chrome将会很快在扩展上超越firefox,firefox上内存占用上实在不令人满意,也许我使用firefox的一个原因就是因为firebug,不过相信chrome平台的类firebug插件也会很快出现。
    Chrome的扩展开发十分简单,我们只需要掌握web开发的htm+CSS+javascript,就能很快开发出自己的扩展。
    你需要了解的内容
    在开发前首先要掌握一些基础知识。
    1、Chrome扩展文件
    Chrome扩展文件以.crx为后缀名,在Google Chrome扩展官方网站下载扩展时,Chrome会将.crx文件下载到Chrome的Application Data文件夹的User Data\Temp下,一般是C:\Documents and Settings\User\Local Settings\Application Data\Google\Chrome\User Data\Temp,安装完成或者取消安装,该文件就会被删除。.crx实际上是一个压缩文件,使用解压文件打开这个文件就可以看到其中的文件目录,下图中是“关灯看视频”扩展的截图:

    因此可以认为,我们实际上就是写一个Web应用,然后将按照Chrome的规定将一个快捷方式放在Chrome工具栏上。
    2、Browser Actions(扩展图标)
    把Browser Actions翻译成扩展图标不是很准确,但它的功能就是把你的应用显示在Chrome工具栏上。我们在上面看到一个文件manifest.json,就是使用这个文件来把相应的图标和其他参数注册到Browser Actions。比如下图中就是EverNote的扩展图标。

    3、Page Actions(地址栏图标)
    如果你熟悉一些Chrome插件的话,你一定会发现有些扩展的图标不是显示在地址栏的右边,而是显示在地址内部右方,这就是Page Actions地址栏图标。

    可以看出上面中有三个Page Actions,图中我标出的是Chrome添加书签,现在你就会发现其实这个也是Chrome的扩展,只不是它是直接内置在Chrome的。
    Page Actions与Browser Actions的区别就是Page Actions不是随时都是显示的,必须在特定的页面中这个功能才能使用。因此在开发中注意:如果不是全部页面中都能使用的功能请使用Page Actions方式。
    4、popup弹出窗口
    popup属于Browser Actions,当点击图标时出现这个窗口,可以在里面放置任何HTML元素,它的宽度是自适应的。当然,这个弹出窗口不会被Chrome拦截的:)
    如下图中是evernote的popup窗口:

    5、Background Pages后台页面
    这个窗口不会显示,它是扩展程序的后台服务,它会一直保持运行。比如在一些需要数据保存程序中,如果当前用户关闭popup,就需要Background Pages来进行相应的操作。
    自己动手做一个
    我们以一个简单的任务管理程序来一步步讲解。

    上图是界面实现,我们首先完成界面的显示部分,首先建立一个新文件夹,以扩展应用的名称为标题,我们这里的应用叫做MyTaskList。然后把找一个图标文件,放到文件夹中,也可直接右键下载我的这个图标:

    图标文件不要小于19px*19px,但最好也不要超过这个尺寸,虽然大图它会自适应,但会使得应用文件变大。然后完成和未完成状态的两个图标放到资源文件中,可以建立任意文件夹放进去,因为CSS文件把定义它们的路径。
    建立manifest.json来定义我们程序配置:

    1. {  
    2.   "name": "MyTaskList",  
    3.   "version": "0.9.0",  
    4.   "description": "Management my everyday"s task lists.",  
    5.   "browser_action": {  
    6.     "default_icon": "icon.png" ,
    7.     "default_title": "My Task List",
    8.     "default_popup": "popup.html"
    9.   }  
    10. }
    复制代码

    其中name代表应用程序名,version代表版本号,description代表功能描述。这些在安装扩展后就能看到,见下图:

    browser_action代表扩展图标段显示,它会定义图标地址、标题(也就是鼠标悬停提示)和默认的popup页面。我们这里定义的popup页面为popup.html。
    接下来开始定义popup.html显示,它不需要使用<html>、<head>和<body>标签,可以直接写上样式、脚本和html。我们的popup.html源码为:

    1. <style type="text/css">
    2. *{margin:0;padding:0;}
    3. body{color:#333;overflow: hidden;margin: 0px;padding:5px;background: white;font-size:12px;}
    4. img{margin:0 4px;}
    5. #addItemDiv{color:#ccc;}
    6. .hide{display:none;}
    7. .show{display:block;}
    8. .taskItem{cursor:pointer;}
    9. input{width:100%;}
    10. label.on{width:12px; display:inline-block; height:12px; background:url(images/bg_task_on.gif) no-repeat 0px 2px;}
    11. label.off{width:12px; display:inline-block; height:12px; background:url(images/bg_task_off.gif) no-repeat 0px 2px;}
    12. </style>
    13. <div id="newItem" class="gray">添加新项</div>
    14. <div id="addDiv" class="hide"><input type="text" id="txtTitle" /></div>
    15. <div id="taskItemList">
    16.         <div class="taskItem">
    17.                 <label class="on"></label><span class="taskTitle">新任务</span>
    18.         </div>
    19.         <div class="taskItem">
    20.                 <label class="off"></label><span class="taskTitle">已完成任务</span>
    21.         </div>
    22. </div>
    复制代码

    打开预览,样子就已经出来了:

    这样我们文件就已经建立完成,文件列表如下:

    现在就可以先尝试把它打包装到自己的Chrome里。
    首先打开Chrome-工具-扩展程序,展开开发人员模式,打到“打包扩展程序”按钮:

    点击“打包扩展程序…”,弹出打包选择文件窗口,在扩展程序根目标中找到我们建立的文件夹,私有密码文件第一次不用选择:

    点击确定,它会在根文件夹同一级生成MyTaskList.crx和MyTaskList.pem,MyTaskList.pem是程序签名文件,以新版本的开发中还需要这个文件,不要删除它。把MyTaskList.crx拖进Chrome窗体内,就会把这个应用MyTaskList安装在Chrome里。

    我们的这个简单的模型就能看到效果了,下一节我们就会完善其中的代码。
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    .

    QQ|手机版|Java学习者论坛 ( 声明:本站资料整理自互联网,用于Java学习者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2022-12-8 10:33 , Processed in 0.409772 second(s), 48 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表