The principle of

A basic Chrome plugin simply adds a manifest.json entry file that the browser automatically recognizes. Similar to an NPM project, all you need is a package.json file. Page content front-end development write HTML, CSS, JS.

Create a Chrome plug-in project

New Project Directory

Create a new manifest entry file

Name, version, and Manifest_version are mandatory

{"name": "My Chrome Plugin", "description": "Chrome Plugin demo", "version": "1.0", "Manifest_version ": // Select version 2 or 3 "browser_action": {"default_popup": "index.html" // click the plugin icon default display interface}, "content_scripts": {/ / / for the page into the js script "matches" : [" < all_urls > "], "js" : /. / main. "js", "run_at" : "document_start"}]}Copy the code

Create a new index.html file

< HTML > <head> <title> </title> <meta charset=" utF-8 "> <meta name="viewport" content="width=device-width,initial-scale=1"> <style> .header { width: 100%; height: 30px; } .container { width: 300px; height: 400px; } </style> </head> <body> <div class="header"> This is the header content </div> <div class="container"> <span>Chrome plugin content </span> </div> </body> </html>Copy the code

Create a new main.js file

console.log('do something');
Copy the code

The introduction of the plugin

  1. Open the Chrome extension

  2. Select load the unzipped extension

3. Select the Chrome plug-in project