项目名称: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上:下载

【开源】前端练手笔记,Chrome扩展应用程序(html+CSS+JS) (1)的更多相关文章

  1. web前端学习部落22群分享给需要前端练手项目

    前端学习还是很有趣的,可以较快的上手然后自己开发一些好玩的项目来练手,网上也可以一抓一大把关于前端开发的小项目,可是还是有新手在学习的时候不知道可以做什么,以及怎么做,因此,就整理了一些前端项目教程, ...

  2. 自制Chrome扩展插件:用于重定向js

    前言 作为一个前端开发, 在调试生产环境的代码时,是否苦于生产环境代码被压缩,没有sourcemap? 有没有想过将生产环境的js直接重定向为本地开发环境的js? 玩微前端时,有没有想过用本地的子应用 ...

  3. 开源一个练手小App, PrintableCheckList

    A small but powerful App, only focus on one thing, make you easy to print out your checklist. It is ...

  4. 前端练手小项目——网页版qq音乐仿写

    qq音乐网页版仿写 一些步骤与注意事项 一开始肯定就是html+css布局和页面了,这段特别耗时间,耐心写完就好了 首先要说一下大致流程: 一定要先布局html!,所以一定要先分析页面布局情况,用不同 ...

  5. 简单API练手:(1)复制自身程序到windows目录和系统目录下;(2)获得系统的相关信息。

    1.复制自身程序到windows目录和系统目录下: #include <windows.h> #include <stdio.h> #include <string.h& ...

  6. Vue练手项目(包含typescript版本)

    本项目的git仓库https://github.com/lznism/xiachufang-vue 对应的使用typescript实现的版本地址https://github.com/lznism/xi ...

  7. 认识大前端html+css+js

    认识大前端:前端就是将效果图生成网页,利用html+css+js等技术. 如果把前端比作一台汽车,那么html就是车的骨架,css就是完整的车的模型,而js就充当着车的发动机... 建议:   刚刚开 ...

  8. Web前端基础怎么学? JavaScript、html、css知识架构图

    以前开发者只要掌握 HTML.CSS.JavaScript 三驾马车就能胜任一份前端的工作了.而现在除了普通的编码以外,还要考虑如何性能优化,如何跨端.跨平台实现功能,尤其是 AI.5G 技术的来临, ...

  9. 适合前端开发的 Chrome 扩展有哪些?(十款)

    适合前端开发的 Chrome 扩展有哪些?(十款) 一.总结 好的插件或者框架对程序员的意义重大. 二.适合前端开发的 Chrome 扩展有哪些?(十款) 掘金是一个高质量的技术社区,从 ECMASc ...

随机推荐

  1. 【leetcode】com/problems/surrounded-regions/

    dfs 栈溢出,bfs超时,用dfs非递归就不溢出了,前后写了1一个星期class node { int i; int j; public node(int i1,int j1) { i=i1; j= ...

  2. tyvj P1864 [Poetize I]守卫者的挑战(DP+概率)

    P1864 [Poetize I]守卫者的挑战 时间: 1000ms / 空间: 131072KiB / Java类名: Main 描述 打开了黑魔法师Vani的大门,队员们在迷宫般的路上漫无目的地搜 ...

  3. 1‘b0 什么意思

    在看datasheet 中有类似表达式如下: 3'b000, 1'b1, 1'b0; 3'b000这个表示:b代表二進制.3代表位元數. 1'b1:宣告為一位元二進制之值為1,一般除了可以宣告b外,也 ...

  4. 让x86的android模拟器能模拟arm架构系统

    网上介绍共计三种模拟器比较常用,分别是bluestacks.andy和Genymotion,前者支持ARM架构,中者支持远程控制,后者启动速度快,各有优缺点. 如果要用genymotion模拟arm的 ...

  5. 一些收费的vpn或ssh代理

    www.expressvpn.com TorGuard:    https://help.ubuntu.com/community/Tor?action=show&redirect=TOR h ...

  6. 353. Design Snake Game

    贪食蛇. GAME OVER有2种情况,1是咬到自己,2是出界. 1)用QUEUE来保留占据的格子,每走一格就添加1个,然后POll()最后一个. 做一个一样的SET来check要走的格子是不是已经在 ...

  7. Mina学习之与Spring整合

    本章中演示在Spring中整合Mina,为了整合到Spring,需要做以下几个步骤: 1. 设置IoHandler <bean id="trapHandler" class= ...

  8. 【Android - MD】之TextInputLayout的使用

    TextInputLayout是Android 5.0新特性--Material Design中的一个布局控件,主要用来嵌套EditText,实现数据输入时的一些效果,如: 当输入框获取焦点时,输入提 ...

  9. winform渐变窗口显示/关闭

    //渐渐的消失 for (int iNum = 10; iNum >= 0; iNum --) { //变更窗体的不透明度 this.Opacity = 0.1 * iNum; //暂停 Sys ...

  10. jstree 节点拖拽保存数据库

    需要jstree具有拖拽功能需要在加载jstree时添加dnd插件,具体看代码: $('**').jstree({ //plugins-各种jstree的插件引入,展示树的多样性 'plugins' ...