"Open source" front end practiced hand notes, Chrome extension app (HTML+CSS+JS) (1)

Project Name: github-notification

Project Address: Https://github.com/wuchangming/github-notification

Description: I'm going to take the time to learn the front end (HTML + CSS +js) and choose the Chrome Extension app to make a simple practiced hand project. Avoid halfway away from this lizi for proof!

Do you have a brother?

Project brief: An open-source Chrome extension app for GitHub notifications and monitoring personal projects (in fact, you want to monitor the star count, number of fork, and so on for a project on GitHub. Of course, you have any ideas can also be put forward to discuss)

Similar to this:


Of course, you need to be able to pop up the box to see more detail


Publish to the Chrome store when you are done. (Excited ing~! )


Start with Hello World, and finish a Hello World version of the Chrome extension today.

First look at the development resources we can get:

Chrome Extensions Development Textbook: https://developer.chrome.com/extensions (what doesn't fq? No FQ, not a good architect.

GitHub api:https://developer.github.com/v3/

The first step: based on the instructions on the Chrome Extender Development Guide, we first need a Manifest.json file.

Manifest.json is a bit like the Package.json in the NPM project.

This file is a description of some of the basic information about the extensions that are being developed, such as:

Name, description, version number, permissions, and so on.

For more detailed information, refer to: https://developer.chrome.com/extensions/manifest

Part II: with the textbook plus several remaining files, the front-end jquery is of course important.

Finally, look at the directory structure of the project:

The installation is also very simple during the development process:

First, select the following options

Second, the folder where the project is loaded can be

At last:

Hello World is still very simple.

Project code address on github: download

"Open source" front end practiced hand notes, Chrome extension app (HTML+CSS+JS) (1)