Day 29: Write your first Google Chrome extender _ one months

Today's 30-day study of 30 new technologies, I decided to learn how to write a Chrome extender. After doing some searching, I found that a yeoman generator could be used to write the Chrome extender. The extension we're going to write is a plugin that can be used to screen out Facebook, Twitter, LinkedIn, and so on during working hours. This article will not talk about the basics of yeoman, you can read the 24th day of content to understand yeoman.
Chrome Extender use case

We're going to write a simple plugin for social networking sites like Facebook and Twitter during office hours (9 to 6 o'clock in the afternoon in the morning). If a user visits Facebook or Twitter, he will see the following page:

I did not block Google +:) Install Yeoman

Perform the following command to install the Yeoman. This command defaults to having Node and NPM installed:

$ NPM Install-g Yeoman

The above command will install yeoman globally. The-G option indicates the meaning of the global installation. If you don't have grunt and bower installed on your machine, this command will automatically help you install both software. GitHub

Today's demo application code can be obtained on GitHub: Github:day29-chrome-extension. Create a Chrome Extender

Now, after you've said the basics, let's start the development of the Chrome extender.

In a convenient location on your file system, create a directory for your extender, and then move the working directory to the Extender directory.

$ mkdir no-socializing
$ cd no-socializing

Then run the Yo chrome-extension command, which will ask you a few questions as shown below.

Let's take a look at these questions:
1. It first asks how we want to name the Extender, and the default name is the folder name.
2. Then it asks about the utility of the Extender.
3. Then, it asks us if we want to use the UI Action. We use the Browser UI Action. The Browser Action allows us to put a clickable icon next to the Chrome Omnibox. Click on this icon to open an HTML file.
4. Next, it will ask if we need to add more UI functionality. We add the Options page (option pages) and the Omnibox feature.
5. Finally, it asks us what permissions we want to give to this extension. Please read the documentation for more details.

You can install an unpacked extender to Chrome as follows. Check the developer mode (Developer mode) and then click Load on the unpacked extensions (load unpackaged extension) and give it the app directory in the No-socializing directory.

After installation, you can see the following:
Update Background.js

The behavior of this Chrome Extender is controlled by the Background.js under the folder app/scripts. Copy the following code, and then replace the background.js source code.

 ' use strict ';
        Chrome.webRequest.onBeforeRequest.addListener (function (details) {var currenttime = new Date (); if (Isofficetime (currenttime) && isweekday (currenttime)) {return {RedirectUrl:chrome.extension.getURL (    
        ' index.html ')};
    return details.url; {URLs: ["*://*.facebook.com/*", "*://*.twitter.com/*", "*://*.gmail.c Om/* ",], types: [" Main_frame "," Sub_frame "," stylesheet "," script "," image "," Object "," XMLHttpRequest ",

"Other"]}, ["Blocking"]);
    function Isofficetime (currenttime) {var hour = currenttime.gethours ();
Return hour > 9 && hour < 18;
    function Isweekday (currenttime) {var dayofweek = Currenttime.getday ();
return DayOfWeek >= 1 && dayofweek <= 5; }

The above code does the following things:
It listens for the Onbeforerequest event, which triggers the request that will appear. The AddListener function accepts three parameters:
1. A callback (callback) function that executes when an event is triggered.
2. The Requestfilter object is a filter that filters the WebRequest event. We will list a series of URL patterns to be filtered out.
3. An array that contains blocking strings that allow only specific events, and callback functions are processed at the same time.

We also define a number of functions to query the current time and the current date on which day of the week. It will only screen out social networking sites between nine o'clock in the morning and six o'clock in the afternoon on weekdays.

The above code uses the WebRequest API. We need to get this extender to access the Chrome.webrequest API. This will use the WebRequest permission. Because this extender uses the Chrome.webrequest API in the shielding module, we also have to give webrequestblocking permissions. Open the Manifest.json file in the app directory and update the permissions module:

"Permissions": [
    "WebRequest",
    "tabs",
    "http://*/*",
    "https://*/*",
    "webrequestblocking"
  ]

The last thing we have to do is add a index.html. This is when users visit Facebook, Twitter, and so on, to render the display.

<! DOCTYPE html>
 
You can download pictures in the GitHub warehouse.

Now, reload the extension, and then open http://facebook.com or http://twitter.com. If the current time is between nine o'clock in the morning and six o'clock in the afternoon on weekdays, you will see the following page:

That's the content of today, keep feedback.

Source: Day 29:yeoman Chrome generator--write Your Google Chrome Extension
Translation: Segmentfault