Chrome扩展插件基础是基于前端html js开发，然后通过官方提供的项目结构进行开发，需要注意的是，目前Chrome已经支持Manifest V3，FireFox仅仅支持Manifest V2。本文介绍如何开始开发一个简单的Chrome插件，版本基于Manifest V3。

创建manifest.json文件

Chrome插件需要在根目录创建一个清单文件manifest.json文件，我们来创建一个插件的清单如下：

{
    "name": "广告过滤",
    "version": "0.0.1",
    "manifest_version": 3,
    "description": "过滤常见网页广告信息",
    "action":{
      "default_popup":"template/popup.html"
    },
    "icons":{
      "16": "icons/icon.png",
      "32": "icons/icon.png",
      "48": "icons/icon.png",
      "128":"icons/icon.png"
    }
  }

如上，配置基础的插件信息，需要注意manifest_version指定版本号，我这里设置的最新支持的v3版本，v3版本与v2版本对于配置项的设置是由区别的，具体可以参考官网：Migrating to Manifest V3。相关配置项如下：

icons：配置扩展icon
default_popup：配置弹框页面
manifest_version：manifest版本号
description：扩展描述信息
name：扩展程序名称
version：扩展版本号

创建popup.html

popup.html文件可以不用写html包裹，但是这种情况会导致中文显示乱码，所以最好还是按照完整的html写法来设置编码为utf-8。代码如下：

Title.container {
            min-width: 300px;
            padding: 10px 30px;
        }

        .settings {
            margin-top: 30px;
            font-size: 14px;
        }
        .settings .set input{
    
            float: right;
        }
        .settings .set   .set {
            margin-top: 15px;
        }过滤广告配置过滤Google Adsense
                过滤百度广告