码迷,mamicode.com
首页 > Web开发 > 详细

【开源】前端练手笔记,Chrome扩展应用程序(html+CSS+JS) (1)

时间:2015-10-19 19:02:15      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:

项目名称:github-notification

项目地址:https://github.com/wuchangming/github-notification

说明:本人打算抽时间学习前端(html + css +js),选择Chrome扩展应用程序制作一个简单练手的项目。避免中途放弃在此立字为证!

有一起的兄弟吗?

项目简介:一款开源的,关于Github通知和监控个人项目的Chrome扩展应用程序(其实就是想监控下github上某个项目的star数,fork数等等。当然大家有什么想法也可以一起提出来讨论)

类似这样:
技术分享

当然还需要可以弹出框看更细致的内容
技术分享

完成后发布到chrome 商店中。(激动ING~!)


千里之行始于Hello World,今天先完成一个hello world版的chrome扩展程序。

先看看我们能获取的开发资源

chrome extensions的开发教材:https://developer.chrome.com/extensions (什么不会FQ?  不会FQ的码农不是好架构师技术分享

github API : https://developer.github.com/v3/

第一步:根据chrome扩展程序开发指南上的说明,我们首先需要一个manifest.json的文件。

manifest.json 有点类似于npm项目里的package.json

这个文件是说明所开发的扩展程序的一些基本信息,如:

名称,说明,版本号,权限等等。

更详细的说明参考:https://developer.chrome.com/extensions/manifest

第二部:按照教材加上剩下几个文件,前端jquery这么重要的当然也少不了。

最后看下项目的目录结构:

技术分享

 

 

开发过程中安装也非常简单:

一、选择下面选项

技术分享

 

二、加载项目所在的文件夹即可

技术分享

 

最后效果图:

技术分享

Hello World还是很简单的。

 

项目代码地址在github上:下载

 

技术分享
技术分享
技术分享

【开源】前端练手笔记,Chrome扩展应用程序(html+CSS+JS) (1)

标签:

原文地址:http://www.cnblogs.com/wuchangming/p/4892425.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!