Chrome Extension can be loaded into Chrome to do some custom work by manipulating the Chrome browser.

If you want a feature that cuts and cuts the URL and title of the current TAB when you click on a context menu item, which is not supported in Chrome itself, you can do this with a Chrome Extension.

Minimum structure

During the coding process, I often need to create placeholder images to verify the UI layout and effect. So I want to create a Chrome Extension that replaces the default new page with a PlaceHolder group of links when the user opens a new page.

The minimum required file for a Chrome Extension is manifest.json, necessary HTML optional ICONS, CSS, JS, etc. Here’s a list of the files:

Json meta file newtab. HTML HTML file 120.png icon fileCopy the code

Metafile manifect. Json

The meta file is used to describe information about a Chrome Extension and is required to create a Chrome Extension.

This file is a Json file, and the file in our demand is as follows:

{
"manifest_version": 2,
"name": "PlaceHolderImage",
"description": "Make PlaceHolder Image",
"version": "1",
"author": "Reco",
"browser_action": {
   "default_icon": "120.png",
   "default_title": "PlaceHolder Factory"
 },
"chrome_url_overrides" : {
  "newtab": "newtab.html"
},
"permissions": ["activeTab"]
}
Copy the code

Here are a few key fields:

  1. The permissions field specifies the permissions required by the application. Because we need to override the content of the default Chrome new page, we need to use the Permissions field to indicate that we need to control the activeTab permissions
  2. Chrome_url_overrides specifies the page to override the new Chrome page, in this case the newtab.html file. This file is any FAMILIAR HTML file, which can use any legal HTML tags, as well as include and import CSS, JS files
  3. The browser_action field is also critical, specifying the Chrome Extension icon and header in the Chrome toolbar. After loading any extension, the specified icon will be displayed on the Chrome toolbar, and the specified header will be displayed when the mouse moves over the icon
  4. Other fields that are used for display and comment purposes, such as author, extended name name, and so on. They are not key fields, but they need to be learned

New page files and ICONS

Newtab.html is specified in the manifest file, which is displayed when the user creates a new page, and is therefore a key file. We need to list again the common links that need to generate PlaceHolder images as follows:

<h1>Image PlaceHolder! </h1> <ul> <li><a href="https://via.placeholder.com/640X400">640X400</li> <li><a href="https://via.placeholder.com/640">640X640</li> <li><a href="https://via.placeholder.com/32">32X32</li> </ul>Copy the code

Because only the test, can generate a placeholder figure to do ICONS, we through the link https://via.placeholder.com/120 to create a breakthrough, and saved to

120.png
Copy the code

Within the file.

Now that the file is ready, you can go and see the effect.

The test results

Open the extension load link, enter the Chrome extension management page, and open the developer mode, click on the “load has extracted the add-in” button, select your development directory within the dialog, you can load extension, you can see the extension in the Chrome toolbar ICONS, can move the mouse to the icon on the title of the view extension, Click on the “newtab page” menu to see your newtab.html displayed.

If this validation is as expected, your first extension has been developed successfully.

The official launch

You can publish extensions within Chrome Dashboard by clicking in and following instructions.

further

During the development of this extension, we learned something similar

  1. permissions
  2. chrome_url_overrides
  3. browser_action

You can find more information about the API in the Chrome Developer guide.

I personally want to make a Copy of the current page Title and URL extension after the button, you can learn more development knowledge from the extension Copy URL + Title.

credits

This article is briefly translated into this article. How to Create and Publish a Chrome Extension in 20 minutes