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

项目名称:github-notification

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

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

有一起的兄弟吗?

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

类似这样:


当然还需要可以弹出框看更细致的内容
【开源】前端练手笔记,Chrome扩展应用程序(html+CSS+JS) (1)_第1张图片

完成后发布到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这么重要的当然也少不了。

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

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

 

 

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

一、选择下面选项

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

 

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

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

 

最后效果图:

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

Hello World还是很简单的。

 

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

 

你可能感兴趣的:(【开源】前端练手笔记,Chrome扩展应用程序(html+CSS+JS) (1))