[Chrome] Development of Google browser plug-ins: Development Process of hellochrome plug-ins

Although there are many tutorials, most of the content on the Internet is mixed, and after Chrome is updated, many previous tutorials are no longer applicable.

The basic structure of Google browser app development and extension is similar. Here we will show you the complete plug-in development process.

Our goal is to develop a Google browser plug-in named hellochrome,

Click it to display the hellochrome text, similar to helloworld in programming.

It seems very simple, but it is actually very simple. Let's get started ~

0. Getting Started

A simple app must consist of an icon and a file named manifest. JSON. The icon 128*128 is recommended.

As for the IDE, text editor and Chrome browser.

We recommend that you use the editplus text editor, which is simple and lightweight when I write PHP, JS, and CSS.

1. Deploy the project

Create a folder named hellochrome;

Prepare an icon. We recommend that you set it to 128x128.

Create a file named manifest. JSON and open it in a text editor. Copy the following code:

[Plain]View
Plaincopy

1. {
2. "Name": "hellochrome ",
3. "Version": "1.0 ",
4. "Manifest_version": 2,
5. "Icons ":
6. {
7. "128": "icon.png"
8. },
9. "Permissions": ["communications"],
10. "Description": "Hello chrome: My first Chrome app! ",
11. "Browser_action ":
12. {
13. "Default_icon": "icon.png ",
14. "Default_popup": "popup.html"
15. }
16. }

A brief explanation:

Name is the plug-in name,

Version is the version number,

Pay attention to manifest_version. If you do not have this, you cannot install the plug-in chrome of the latest version.

Icon is an array of icons. 128 indicates the name of an icon with a size of 128,

Browser_action is related to some settings, which is also greatly changed.

Default_icon is the default icon,

Default_popup is the pop-up operation after clicking.

You can create a new HTML file named "popup.html" under the target folder.

In popup.html, only one line of code is required:

[HTML]View
Plaincopy

1. <P> hello, chrome! </P>

The complete project directory is as follows:

2. Install the plug-in

On the chrome plug-in management page, select the developer mode and click load:

Select the folder of the new project.

The pop-up window after clicking is as follows:

Aha, the first plug-in is complete.