chrome extension 系列：第三章——manifest.json

在 2024 年，谷歌浏览器将彻底弃用 manifest V2 的扩展程序，因此后续文章中我们都将以 manifest V3 来进行讲解。

developer.chrome.com/docs/extens…

这是一个详细的 manifest.json 示例，包含了大多数常用的属性：

{
  manifest_version: 3,
  default_locale: 'en',
  /**
   * if you want to support multiple languages, you can use the following reference
   * https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Internationalization
   */
  name: '__MSG_extensionName__',
  version: 1.0,
  description: '__MSG_extensionDescription__',
  // 需要的属性
  permissions: ['storage', 'sidePanel'],
  // 侧边栏应用路径
  side_panel: {
    default_path: 'src/pages/sidepanel/index.html',
  },
  // 配置页面路径
  options_page: 'src/pages/options/index.html',
  // service worker脚本路径
  background: {
    service_worker: 'src/pages/background/index.js',
    type: 'module',
  },
  // popup页面路径
  action: {
    default_popup: 'src/pages/popup/index.html',
    default_icon: 'icon-34.png',
  },
  // 新tab页面
  chrome_url_overrides: {
    newtab: 'src/pages/newtab/index.html',
  },
  // 扩展程序图标
  icons: {
    128: 'icon-128.png',
  },
  // 注入到网站中的内容脚本路径
  content_scripts: [
    {
      // 匹配上才会注入到页面中
      matches: ['http://*/*', 'https://*/*', '<all_urls>'],
      js: ['src/pages/contentInjected/index.js'],
      // KEY for cache invalidation
      css: ['assets/css/contentStyle<KEY>.chunk.css'],
    },
    {
      matches: ['http://*/*', 'https://*/*', '<all_urls>'],
      js: ['src/pages/contentUi/index.js'],
    },
  ],
  // devtool 中功能路径
  devtools_page: 'src/pages/devtools/index.html',
  web_accessible_resources: [
    {
      resources: ['assets/js/*.js', 'assets/css/*.css', 'icon-128.png', 'icon-34.png'],
      matches: ['*://*/*'],
    },
  ],
}

在 manifest V3 中，许多 API 支持了 Promise 写法，使得我们不用再使用回调方式去编写代码，而是可以使用我们常见的 async await 异步写法来编写代码。