【开源】前端练手笔记,Chrome扩展应用程序(html+CSS+JS) (1)
项目名称:github-notification
项目地址:https://github.com/WQTeam/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上:下载
2LDT7L5LPNFDJ3(1BH.png)
2LDT7L5LPNFDJ3(1BH.png)
2LDT7L5LPNFDJ3(1BH.png)
【开源】前端练手笔记,Chrome扩展应用程序(html+CSS+JS) (1)的更多相关文章
- web前端学习部落22群分享给需要前端练手项目
前端学习还是很有趣的,可以较快的上手然后自己开发一些好玩的项目来练手,网上也可以一抓一大把关于前端开发的小项目,可是还是有新手在学习的时候不知道可以做什么,以及怎么做,因此,就整理了一些前端项目教程, ...
- 自制Chrome扩展插件:用于重定向js
前言 作为一个前端开发, 在调试生产环境的代码时,是否苦于生产环境代码被压缩,没有sourcemap? 有没有想过将生产环境的js直接重定向为本地开发环境的js? 玩微前端时,有没有想过用本地的子应用 ...
- 开源一个练手小App, PrintableCheckList
A small but powerful App, only focus on one thing, make you easy to print out your checklist. It is ...
- 前端练手小项目——网页版qq音乐仿写
qq音乐网页版仿写 一些步骤与注意事项 一开始肯定就是html+css布局和页面了,这段特别耗时间,耐心写完就好了 首先要说一下大致流程: 一定要先布局html!,所以一定要先分析页面布局情况,用不同 ...
- 简单API练手:(1)复制自身程序到windows目录和系统目录下;(2)获得系统的相关信息。
1.复制自身程序到windows目录和系统目录下: #include <windows.h> #include <stdio.h> #include <string.h& ...
- Vue练手项目(包含typescript版本)
本项目的git仓库https://github.com/lznism/xiachufang-vue 对应的使用typescript实现的版本地址https://github.com/lznism/xi ...
- 认识大前端html+css+js
认识大前端:前端就是将效果图生成网页,利用html+css+js等技术. 如果把前端比作一台汽车,那么html就是车的骨架,css就是完整的车的模型,而js就充当着车的发动机... 建议: 刚刚开 ...
- Web前端基础怎么学? JavaScript、html、css知识架构图
以前开发者只要掌握 HTML.CSS.JavaScript 三驾马车就能胜任一份前端的工作了.而现在除了普通的编码以外,还要考虑如何性能优化,如何跨端.跨平台实现功能,尤其是 AI.5G 技术的来临, ...
- 适合前端开发的 Chrome 扩展有哪些?(十款)
适合前端开发的 Chrome 扩展有哪些?(十款) 一.总结 好的插件或者框架对程序员的意义重大. 二.适合前端开发的 Chrome 扩展有哪些?(十款) 掘金是一个高质量的技术社区,从 ECMASc ...
随机推荐
- 龙芯8089_D安装debian 8 iessie
参考官方文档:https://wiki.debian.org/DebianYeeloong/HowTo/Install 下载网络引导文件后使用tftpd建立ftfp服务器,然后使用PMON tftp来 ...
- if form1.showmodal:=mrok then 什么意思
if form1.showmodal:=mrok then 这句话什么意思? 最佳答案 这个问题说来话长,且听我慢慢道来... 首先,你仔细看一看,所有的命令按钮(不论是Button还是BitBtn) ...
- [git] git 分支管理和工作流程
分支管理 列举本地分支.下面的 * 是 HEAD 所指向的分支,标识当前工作目录所用的分支.其他分支隐藏在 git 仓库中,通过 git checkout 命令才能访问和修改. $ git branc ...
- [git] git 分支( branch ) 的基本使用
分支( branches ) 是指在开发主线中分离出来,做进一步开发而不影响到原来主线. Git 存储的不是一系列的更改集( changeset ),而是一系列快照.当你执行一次 commit 时, ...
- 代码编写横屏的UIView
- (id )initWithFrame:(CGRect )frame { if (self = [super initWithFrame :frame]) { // Important here, ...
- JavaEE中遗漏的10个最重要的安全控制
本文由码农网 – 小峰原创翻译,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! JavaEE有一些超赞的内置安全机制,但它们远远不能覆盖应用程序要面临的所有威胁.很多常见攻击,例如跨站点脚本攻 ...
- 在world2013中插入GB_2312
文字添加方法: 1.下载字体并解压 2.开始中打开控制面板 3.在控制面板中打开字体文件夹 4.把下载的字体复制到此文件下 5.文字添加完成.
- SQL 查询条件放在LEFT OUTER JOIN 的ON语句后与放在WHERE中的区别
这两种条件放置的位置不同很容易让人造成混淆,以致经常查询出莫名其妙的结果出来,特别是副本的条件与主表不匹配时,下面以A,B表为例简单说下我的理解. 首先要明白的是: 跟在ON 后面的条件是对参与左联接 ...
- html或jsp实现打印三种方法
1.使用window.print()方法 优点:支持多浏览器 缺点:取消打印,隐藏打印不必要的信息后再显示比较麻烦 如下实现,可以打印当前页面 <input name ="Button ...
- Linux下对后台进程通过kill传递信号不起作用的问题
在阅读APUE信号一章时,我遇到Linux下对后台进程通过kill传递信号不起作用的问题 具体情形与如下链接中的老兄一致: http://bbs.csdn.net/topics/390335913?p ...