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

Source: Internet
Author: User

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)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.