Remind me of the Drinking Water Chroome Plug-in Development Guide



Because of the busy work recently, I often forget to drink water. As a front-end developer, browser work is the norm. So in order to solve this pain point, a browser plug-in is written for front-end developers. His function is to remind people to drink water.
Here we set half an hour as a cycle, which is roughly the same as how tomatoes work. Basically, people get tired after concentrating for half an hour. Take a drink of water at this time to relieve nervous tension. It also serves as a rest cycle. It has laid a rhythm for our work to continue to carry out efficiently.


This is the browser plug-in I made.
Plug-in Download Address

Development thinking

The following passage introduces the browser plug-in development ideas, programming not only requires theory but also practice, and directly dry sleeves.

  • Github started to find a browser plug-in code to download locally.
  • Cooperate with this article on segmentfault
  • Contrast the exercises.
  • Analysis of their own needs, that is, half an hour to inform me, then the simplest is a background timer, every half an hour to run.
  • The key point is the background operation and notification.
  • Code must be the simplest timer, for front-end developers certainly need not say much, so easy!
  • This is mainly configurable in manifest. JSON

    • Background running, key code
    // Reference Code
    "Background": {//background script is the environment in which plug-ins run
        // "scripts": ["js/jquery-1.9.1.min.js", "js/background.js"]// array. chrome automatically creates a page containing all specified scripts at extension startup
    // Actual code
    "background": {
        "scripts": [
    • Notification, that requires the browser’s notification authority, look at the words, guess that is permissions.
    // Reference Code
    "Permissions": [//url that allows plug-in access
    // Actual code
    "permissions": [
  • The notifucations parameter here is found by referring to the plug-in written by others. At present, I am a quick one.
  • Formal development learning can refer to official documents
  • If you are not good at English, you can take a look at this.
  • 360 Translated Documents

You can refer to this.


Interested plug-ins can be downloaded for use

  • Plug-in address
  • Source address