Chrome Extension开发:最全manifest配置,你想找的这里都有

618 阅读3分钟

不多废话,给大家上一份全面的manifest配置文件的字段文档


{
  // ★★★★★ 必填字段 ★★★★★
  "manifest_version": 3,          // 必须为3,表示使用最新版本
  "name": "我的扩展",             // 扩展名称(最多45字符)
  "version": "1.0.0",            // 版本号(格式:主版本.次版本.修订号)

  // ★ 基本信息(可选但推荐) ★
  "description": "扩展的功能描述",  // 应用商店显示的简介
  "author": "开发者名称",          // 开发者信息
  "homepage_url": "https://example.com", // 官网地址

  // ★ 图标配置 ★
  "icons": {                     // 不同尺寸的图标(必须包含128x128)
    "16": "icons/icon16.png",    // 地址栏小图标
    "32": "icons/icon32.png",    // Windows任务栏图标
    "48": "icons/icon48.png",    // 扩展管理页图标
    "128": "icons/icon128.png"   // 应用商店展示图标
  },

  // ★ 用户界面配置 ★
  "action": {                    // 地址栏右侧图标的行为
    "default_icon": {            // 可选图标配置(覆盖icons中的设置)
      "16": "icons/action16.png",
      "32": "icons/action32.png"
    },
    "default_title": "点击弹出面板",  // 鼠标悬停提示文字
    "default_popup": "popup.html"    // 点击图标后弹出的页面
  },
  "options_page": "options.html",    // 扩展设置页(旧版写法)
  "options_ui": {                   // 新版设置页配置
    "page": "options.html",
    "open_in_tab": false            // 是否在新标签页打开
  },
  "devtools_page": "devtools.html", // 开发者工具面板

  // ★ 功能权限声明 ★
  "permissions": [              // 需要申请的API权限
    "storage",                  // 存储数据
    "tabs",                     // 访问标签页
    "scripting",                // 执行脚本
    "activeTab"                 // 临时访问当前标签页
  ],
  "host_permissions": [         // 需要访问的网站域名
    "https://*.example.com/*",  // 匹配所有子域名
    "*://*/*"                   // 匹配所有网站(慎用)
  ],
  "optional_permissions": [     // 可选的运行时权限
    "downloads",                // 下载文件
    "bookmarks"                 // 书签管理
  ],

  // ★ 内容脚本配置 ★
  "content_scripts": [{         // 自动注入网页的脚本
    "matches": ["https://*.google.com/*"], // 匹配的网址
    "exclude_matches": ["*://mail.google.com/*"], // 排除的网址
    "css": ["content.css"],     // 注入的样式文件
    "js": ["content.js"],       // 注入的脚本文件
    "run_at": "document_end"    // 注入时机:"document_start", "document_end"(推荐), "document_idle"
  }],

  // ★ 后台服务配置 ★
  "background": {
    "service_worker": "background.js", // 后台脚本文件
    "type": "module"           // 是否支持ES模块(推荐开启)
  },

  // ★ 扩展类型声明 ★
  "chrome_settings_overrides": { // 覆盖浏览器设置
    "homepage": "https://example.com",
    "search_provider": {        // 自定义搜索引擎
      "name": "MySearch",
      "keyword": "mysearch",
      "search_url": "https://example.com/search?q={searchTerms}"
    }
  },
  "chrome_url_overrides": {     // 覆盖内置页面
    "newtab": "newtab.html"     // 替换新标签页
  },

  // ★ 高级功能配置 ★
  "web_accessible_resources": [{ // 允许网页访问的资源
    "resources": ["images/*.png"], // 资源路径
    "matches": ["https://*.example.com/*"], // 允许访问的网站
    "use_dynamic_url": true     // 防止资源被追踪
  }],
  "externally_connectable": {   // 允许外部网站通信
    "matches": ["https://partner-site.com/*"]
  },
  "sandbox": {                 // 沙箱页面配置
    "pages": ["sandbox.html"],
    "content_security_policy": "sandbox allow-scripts"
  },

  // ★ 国际化配置 ★
  "default_locale": "en",       // 默认语言
  "incognito": "split",         // 无痕模式策略:"spanning", "split", "not_allowed"

  // ★ 应用商店优化 ★
  "short_name": "ShortName",    // 短名称(应用菜单显示)
  "version_name": "Beta 1.0",   // 用户可见的版本名称
  "offline_enabled": true,      // 声明是否支持离线使用

  // ★ 实验性功能(可能变动)★
  "side_panel": {               // 侧边栏面板
    "default_path": "sidepanel.html"
  },
  "minimum_chrome_version": "88" // 最低Chrome版本要求
}

关于manifest文件中配置信息的补充

  1. 权限清单(Chrome Extension可申请的全部权限):developer.chrome.com/docs/extens…
  2. API清单:developer.chrome.com/docs/extens…
  3. 关于Manifest V2迁移到Manifest V3:developer.chrome.com/docs/extens…

关于manifest文件配置字段的几点说明

  1. 权限最小化:如果是自己本地开发使用的话,其实这一点问题不大,但是如果要上线商店的话,需要注意不要过度申请权限,就像下面这样
// 错误示范(过度申请权限)
"permissions": ["*://*/*", "<all_urls>"]

// 正确做法
"host_permissions": ["https://target-site.com/*"]
  1. 不同尺寸的图标配置问题:必须包含 128x128 图标,否则商店审核不通过
  2. 内容脚本的注入时机问题,也就是run_at字段的配置问题,推荐配置为document_end,即页面加载完成后
  3. 版本号格式问题:必须为1~4个数字组成,如 "1.0""2.1.5"

下一篇预告:Service Workers深度介绍