preface

😋😋😋 Hey everyone ~~

Doing b-side development in the company all the time can be more or less boring. While most of you were working on components and UIs, I thought I’d find something interesting to focus on for the last three months of 2019.

At the beginning, in order to train my programming ability and accumulate test case writing, I made some questions on CodeWar website, but I was too stupid to write, and my English was not good, so I needed to see the answers from the community for many questions. All of a sudden, all of a sudden, all of a sudden a lot of answers are so simple, a few lines of code to solve a complicated problem. On closer inspection, it turned out to be regular. At the same time, some regular clients are more or less used in the market, but they are not very easy to use. Therefore, Electron is also one of the learning goals. I plan to write a regular software using Electron and regular expression

As for the inspiration of chrome plug-in development is from the small program, when the small program brings great value to the business, and the ordinary use of Chrome plug-in also brings the ultimate experience in the process of using the browser. I wanted to do something interesting for open source with the Chrome plugin, and I hope to do something even more interesting in the last three months of 2019. keep going~

Quickly develop an instance of Hello Extension to take the first step in developing the plug-in

Find an appropriate folder and create hello-extension, CD hello-*

manifest.json

When we download any Chrome plugin, we are downloading a Web application, and manifest.json is the introduction of the application. It is necessary because manifest.json tells Chrome important information about the plugin. This is similar to a package.json file for a Node project.

Create the manifest.json file and add the following code:

{"name": "Hello Extensions", // Name "version": "1.0", // version" description": "Step 1 to plug-in, hello" // description}Copy the code

Each plug-in needs onemanifest.jsonDocuments, althoughmanifestThere are many configurations, but most of them we don’t use.

popup.html

Go ahead. We add the broswer_action field in manifest.json

{"name": "Hello Extensions", // Name "version": "1.0", // version" description": "First step towards the plugin, hello", // describe "browser_action": {// identify the plugin "default_icon" in the upper right corner of the browser: "./icon/16.png", // in the upper right corner of the plugin icon "default_popup": "./popup.html" // click the plugin, popup page (popup-> popup)}}Copy the code

Create a popup.html page under hello-* and add the following

<html>

<body>
    <h1> Hello Extensions </h1>
    <p>Take the first step in plug-in development</p>
</body>

</html>
Copy the code

Icon directory creation and icon introduction, the writer will not describe, you can add their favorite icon.

Above all, we’ve already developed a Hello Extensions plug-in, but wait, we could do better, like try shortcuts?? Just try…

Add commands field to manifest.json:

{"name": "Hello Extensions", // Name "version": "1.0", // version" description": "First step towards the plugin, hello", // describe "browser_action": {// identify the plugin "default_icon" in the upper right corner of the browser: "./icon/16.png", // In the upper right corner of the plugin icon "default_popup": "./popup. HTML "// click the plugin, popup page (popup-> popup)}," Commands ": { "_execute_browser_action": { "suggested_key": { "default": "Ctrl+Shift+F", "mac": "MacCtrl+Shift+F" }, "description": "Opens hello.html" } } }Copy the code

The installation

With the plug-in code ready, the next step is to quickly install the plug-in and see if the code has any problems.

  1. To open the Extensions page, navigate to the Chrome: Extensions page or click on the browser to select an extension.
  2. Select Developer mode in the upper right corner.
  3. Click load the unzipped extension, and then upload the folder where the above program is stored.

A: congratulations! You can now pop up the plug-in page by clicking on the custom plug-in icon or by using shortcuts.

When we change the code inside the plugin, just click the Plugin Refresh button and Chrome will reload the plugin.

Good night ~