According to relevant data, Google’s Chrome browser has reached nearly 70% of the market share, becoming the “dominant” browser. We choose Chrome, in addition to the superior performance and strong compatibility, Chrome’s ample extension, can make our browser into a “treasure box”. The Google Chrome plugin is a small program designed to customize the browser experience, allowing you to customize the behavior of the browser to your personal needs. Chrome plug-in is a software developed with Web technology, it can be said that as long as the master of the “front-end three brothers” (HTML, JS, CSS), equivalent to the Chrome plug-in development of more than half.

With Chrome plugins, we can translate text on web pages, we can pick up colors on web pages, we can look up words online and we can even integrate an “Excel” into our plugins. I believe that you should be familiar with Chrome plug-in, so I will not repeat the words, we will directly open the introduction of plug-in development to share and teach you how to achieve the integration of “Excel” into Chrome plug-in.

Make your plugin say “Hello World”

1. Create manifest.json file. This file is the entry file, or config file, for the Chrome plugin, which defines all the information for the plugin. It is a JSON file.

You can see that the JSON file defines some basic fields, including the name, description, version, and so on of the plug-in.

2. Add an image to our plug-in that fits the position of the plug-in. Placed under the default_icon field, you can configure ICONS of different sizes.

3. Add a default HTML file. This is the HTML we use to pop up the content we want to display after clicking on the plug-in.

Json, hello. PNG, manifest.json folder loaded into the browser

5. Click on the custom icon to see our first custom Chrome plugin. So far, we’ve completed a brief introduction to the Chrome plugin.

Popup your plugin

Popup is a window page that pops up after we click on the plug-in for simple, temporary interaction. This is a simple example of a window that loses focus and closes when we click on a non-browser area. The declaration cycle is the process from opening to closing.

Popup is simply an HTML page. Once the corresponding HTML file is created, we specify the path of “default_popup” under the “browser_action” field, as shown in Figure 2 in the previous section.

If you want to run it for a long time, you can use Background.

Popup is a page with a relatively short life cycle. To enable the plugin to run without being clicked, use background. Its life cycle starts when the browser opens and ends when the browser page closes.

It’s easy to add a background field in manifest.json. Note that you can specify a web page with “page” or a JS file with “script”, but use either.

The ContextMenus will be very useful

For the form of a plug-in, not only the icon in the top right corner, custom browser right-click menu, is also a plug-in. Before adding, we need to declare the right menu permissions in manifest.json.

Then call the interface Chrome gives us in our JS file, for example

We can also add right-click menu ICONS that we want to implement in the icon field.

Once you’ve done that, our custom menu item will appear when you right-click in your browser.

Get your plug-ins to “speak”

Chrome provides the Chrome. notifications API, which allows us to do some desktop push. For example, when our plug-in needs to poll in the background, it can periodically push a message according to the latest status. The received message and the number of events to be processed are typical examples.

We can directly continue the right-click menu example above and make a simple combination of our push and right-click menu. You can see the following code, we in the right-click menu, click event joined the chrome provide API chrome. Notifications. Create to create a new push. At the same time, we can customize some custom information of this push, including the push type, icon, name, and display information.

After saving our above code, update our plug-in, click it through the right menu, and push it to the lower right corner.

Make your plugin “office” (embedded in Excel)

Excel is a very powerful desktop office software, but the disadvantage is that the corresponding client must be installed. If we wanted to implement our “Excel” in the browser without having to install anything, we could do it with the following:

1. We start by creating a folder for the plug-in and filling in our configuration information (manifest.json) according to actual requirements.

1. We need to download the component editor and integrate it into our Chrome plugin. You can download it at the link below, and there is an introduction to the component editor.

Once the download is complete, we can find an example of a component editor in the path below, using purejs.

SpreadJS.Com ponent. Designer. The V14.0 \ Designer Component \ samples

3. Copy this folder into our Chrome plugins folder and download the CDN reference to local reference (red box below). Create a new JS file and change the inline reference to the outer chained reference (blue box below).

4. Due to the restriction of content security policy, in order to introduce our PDF module normally, we need to add the corresponding declaration in manifest.json.

5. This is the end of the adjustment, the following is the directory structure of the plug-in, we load it into the browser and it is ready to use.

6. The effect is shown in the picture below. We have realized the Excel function in the browser without installing any content.

packaging

Once you’re done, in addition to being able to import and access it locally through folders, you can package it as a CRX file and distribute it through the Chrome Store, making your plugin available to everyone.

conclusion

That’s the introduction to Chrome plugin development and how to integrate “Excel” into our Chrome plugin. Chrome also offers a wealth of interfaces including but not limited to messaging, dynamic injection, local storage, and network requests. With these interfaces, we can implement many more interesting and useful functions. More information on Chrome plugin development can be found in the file, which will provide a more comprehensive introduction. Plug-in forms are not limited to the above description, more hands-on, you can explore more possibilities.

Think the content is good to give a thumbs-up before you go ~

The official website of Grape City, grape city for developers to provide professional development tools, solutions and services, enabling developers.