空插件浏览器

步骤：

  1. 新建文件夹extension_demo

  2. 在extension_demo中新建manifest.json

{
    "manifest_version": 3,
    "name": "demo",
    "version": "1.0",
    "description": "this is a demo",
    "author": "Felix",
    "icons": {
        "16": "img/icon.png",
        "48": "img/icon.png",
        "128": "img/icon.png"
    }
}

注意：在根目录下新建img文件夹，再里面放一个icon.png

  1. 在谷歌浏览器打开插件管理，开启开发者模式，然后导入。

添加插件图标、提示和界面

说明：默认情况下，将插件固定在浏览器上时，插件图标是暗的。所以需要给它添加一个图标点亮它。

步骤：

  1. 修改manifest.json
{
    "manifest_version": 3,
    "name": "demo",
    "version": "2.0",
    "description": "this is a demo",
    "author": "Felix",
    "icons": {
        "16": "img/icon.png",
        "48": "img/icon.png",
        "128": "img/icon.png"
    },
    "action": {
        "default_icon": "img/icon.png",
        "default_title": "demo",
        "default_popup": "popup.html"
    }
}
  1. 新建popup.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            width: 500px;
            min-height: 100px;
        }
    </style>
</head>
<body>
    <div>This is a Popup Page!</div>
</body>
</html>

插件的后台页