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

Time:2019-10-8

cause

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.

Achievements

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
        "page":"background.html"
        // "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": [
          "js/background.js"
        ]
     },
    • 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
        "http://*/", 
        "bookmarks", 
        "tabs", 
        "history" 
    ], 
    // Actual code
    "permissions": [
        "notifications"
     ],
  • 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.

epilogue

Interested plug-ins can be downloaded for use

  • Plug-in address
  • Source address

Recommended Today

Details of multi-path and large capacity hard disk mount under CentOS

I. application environment and requirementsBlade servers connect HP storage through fiber switches, forming a 2×2 link The storage capacity of the operating system for CentOS 6.4 64 bit mount is 2.5t Based on this application environment, two problems need to be solved: In order to ensure the stability and transmission performance of the link, multi-path […]