Can talk and love office-how to do "other people's home" Chrome plug-in

According to relevant data, Google's Chrome browser currently has a market share of nearly 70%, becoming the browser's "overlord." Everyone chooses Chrome, in addition to its superior performance and strong compatibility, Chrome's sufficient extension plug-ins can make our browser a "treasure box". The Google Chrome plug-in is a small program used to customize the browser experience. Through the plug-in, we can customize the behavior of the browser according to personal needs. The Chrome plug-in is a software developed with web technology. It can be said that as long as you master the "three front-end brothers" (html, js, css), it is equivalent to knowing more than half of the Chrome plug-in development.

Through the Chrome plug-in, we can translate the text on the web page, we can pick up the color on the web page, we can look up the word online, and we can even integrate an "Excel" into our plug-in.
I believe that everyone should be familiar with the Chrome plug-in. If it is superfluous, I won't repeat it. We will directly open the introductory sharing of plug-in development and teach you how to integrate "Excel" into the Chrome plug-in.

Let your plugin say "Hello world"

1. Create the manifest.json file. This file is the entry file of the Chrome plug-in, that is, the configuration file, which defines all the information of the plug-in. This is a json file.

We can see that this json file defines some basic fields, including the name, description, and version of the plug-in.

 

2. Add a picture that matches the positioning of the plug-in to our plug-in. Placed under the default_icon field, you can configure icons of different sizes.

3. Add a default html file. We use this html to pop up the content to be displayed after clicking the plug-in.

4. After completion, we will load the folder with hello.json, hello.png, manifest.json into the browser

5. Click on the custom icon to see the birth of our first custom Chrome plug-in. At this point, we have completed a simple introduction to the Chrome plug-in.

Open "a window" (Popup) for your plug-in

Popup is a window webpage that pops up after we click on the plug-in, which is used for simple temporary interaction. When we click on a non-browser area, the window loses focus and closes. The above description is a simple example. Its life cycle is the process from opening to closing.

Popup is simply an html page. After creating the corresponding html file, we will specify the path of "default_popup" under the "browser_action" field, just like Figure 2 in the previous part.

 

If you want to run for a long time, you can use the "Background" (Background)

We know from popup that it is a page with a short life cycle. If you want the plug-in to run without being clicked, you can use the background. His life cycle is from the browser opened until the browser page is closed.

The way to add is also very simple, we only need to add the background field in manifest.json. Note that you can specify a web page by "page", or you can specify a js file by "script", you can use one of the two.

ContextMenus will be very useful

For the form of plug-ins, it is not only the icon in the upper right corner, but also the right-click menu of the customized browser, which is also a kind of plug-in. Before adding, we need to declare the right-click menu permissions in manifest.json.

Then call the interface provided by Chrome to us in our js file, for example

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

After completing the above operations, when you right-click in the browser, our customized menu items will appear.

Let your plug-in "speak" (notifications)

Chrome provides the chrome.notifications API, which allows us to perform some desktop pushes. For example, when our plug-in needs to poll in the background, it can periodically push based on the latest status. The received messages and how many events are pending are typical examples.

We can directly continue the example of the right-click menu above, and make a simple combination of our push and right-click menu. You can see the code below. In the click event of the right-click menu, we added the API chrome.notifications.create provided by chrome to create a new push. At the same time, we can customize some customized information of this push, including push type, icon, name, and displayed information.

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

Make your plug-in "office" (embedded in Excel)

Excel is a very powerful desktop office software, the disadvantage is that the corresponding client must be installed. If we want to implement our "Excel" in the browser without installing any content, we can achieve it through the following:

 

1. At the beginning, we create the plugin folder and fill in our configuration information (manifest.json) according to actual needs.

1. We need to download the component version editor and integrate it into our Chrome plug-in. We can go to the link below to download. The component edition editor is also introduced.

After the download is complete, we can find an example of the component version editor in the path below, we can use purejs.

SpreadJS.Component.Designer.Release.V14.0\Designer Component\samples

3. Copy this folder to our Chrome plug-in folder, then download the cdn reference and change it to a local reference (red box in the figure below). And create a new js file, change the embedded reference to the external chain reference (blue box in the figure below).

4. Due to the restriction of content security policy, in order to import our pdf and other modules normally, we need to add the corresponding statement in manifest.json.

5. At this point, the relevant content we want to adjust is over. The following figure shows the directory structure of the entire plug-in. After we load it into the browser, it can be used normally.

6. The effect is shown in the figure below. We have realized that Excel function can be realized in the browser without installing any content.

Pack

After the development is completed, we can not only import and access it locally through the folder, but also package it as a crx file and publish it through the Chrome store, so that everyone can use the plug-in you developed.

Summarize

The above is the introduction to Chrome plug-in development and the implementation of integrating "Excel" into our Chrome
Plug-in. Chrome also provides us with a wealth of interfaces including but not limited to message communication, dynamic injection, local storage, and network requests. Through these interfaces, we can achieve more interesting and useful functions. For more information about Chrome plug-in development , you can view the file, which will have a more detailed and comprehensive introduction. The form of the plug-in is not limited to the above description, more hands-on, you can explore more possibilities.

I think the content is good, just like it before leaving~

Please indicate the source for reprinting: Grape City official website , Grape City provides developers with professional development tools, solutions and services, and empowers developers.