Collate Chrome plugins have what ability, plug-in development primer, collate documentation.

Chrome Google browser plug-in development, sounds very lofty, in fact, as long as you are familiar with HTML, CSS, JS can be developed, plug-in is also the HTML page rendering out and execute JS scripts.

What can plug-ins do?

  • Bookmark control;
  • Download control;
  • Window control;
  • Label control;
  • Network request control,
  • Monitoring of various events;
  • Custom native menu;
  • Perfect communication mechanism;

Introduction to the

Extension program main noun

  • Manifest file
  • Background Script
  • UI Elements
  • Content Script
  • Options Page

Introduction to the development of

1. Create a folder with the following structure:

Chrome - Plugin - ├── images │ ├─ 07.png │ ├── 07.png │ ├── manifest.json ├ ─ ─ popup. HTML └ ─ ─ popup. JsCopy the code

2. To createmanifest.jsonThe configuration file

{
    "name": "chrome-plugin-demo"."version": "1.0"."description": "Build an Extension!"."manifest_version": 2 // Note that this must be written 2
}
Copy the code

3. Create apopup.htmlfile

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        #content{color: red; }</style>
</head>
<body>
    <h1>chrome-plugin-test</h1>
    <p id="content"></p>
    <script src="popup.js"></script>
</body>
</html>
Copy the code

4. Createpopup.jsfile

document.getElementById('content').innerText = 'Hello world! ';
Copy the code

5. Install the extension in Chrome

  • Top right corner of Chrome: More buttons -> More Tools -> Extensions
  • Click on theLoad the unzipped extension, select the folder you just created
  • Click on the jigsaw icon in the upper right corner of Google Chrome to see your plugin.

Easy to use plug-ins recommended

The current page link becomes a QR code

Want to see the computer access to the link on the phone, do not need to manually knock or copy the link through QQ and other tools forward to the phone, just this plug-in can scan the TWO-DIMENSIONAL code access.

  • Chrome Web app store

ColorZilla (Web color Extractor)

Can absorb the font, background, element color value of the web page

  • Chrome Web app store

Markdown Preview Plus (Visual Markdown)

Optional theme, supports custom CSS theme

  • Chrome Web app store
  • Used to introduce

Json-viewer (Visual JSON)

Optional theme, support for custom CSS theme, shrinkable expansion, editable

  • Chrome Web app store
  • github

Beautifier JavaScript and CSS Code Beautifier

Optional theme, supports custom CSS theme

  • Chrome Web app store

Please refer to

  • Chrome Web store official website
  • Getting started: Create a Chrome extension
  • Chrome Extensions – Developer’s Guide
  • Chrome extension – JavaScript API
  • Chrome Extension – Develop Documentation – GitBook
  • How to develop a Chrome extension