在我们配置任何内容之前，我们需要了解 BEX 的结构。BEX 可以是以下一项（或多项）：

¥Before we can configure anything, we need to understand how the BEX is structured. A BEX can be one (or more) of the following:

1. 在浏览器的独立选项卡中运行

   ¥Runs in its own tab in the browser

2. 在 开发者工具 窗口中运行。

   ¥Runs in the Developer Tools window.

3. 在 弹出窗口 窗口中运行。

   ¥Runs in a Popup window.

4. 作为 选项 窗口运行。

   ¥Runs as Options window.

5. 在网页上下文中运行（注入网站）

   ¥Runs in the context of a web page (injected into a website)

你不需要为上述每种 BEX 类型都创建一个新的 Quasar 应用，因为单个 Quasar 应用可以在上述所有实例中运行。你可以在 类型部分 中了解更多关于这些内容的信息。

¥You do not need a new Quasar App per BEX type above as a single Quasar Application can run in all of the instances above. You can find out more about these in the types section.

quasar.config 文件(quasar.config file)

¥quasar.config file

// should you wish to change default files
sourceFiles: {
  bexManifestFile?: 'src-bex/manifest.json',
}

bex: {
  /**

   * The list of extra scripts (js/ts) not in your bex manifest that you want to

   * compile and use in your browser extension. Maybe dynamic use them?

   *    * Each entry in the list should be a relative filename to /src-bex/

   *    * @example [ 'my-script.ts', 'sub-folder/my-other-script.js' ]
   */
  extraScripts?: string[];

  /**

   * Extend the Esbuild config that is used for the bex scripts

   * (background, content scripts, dom script)
   */
  extendBexScriptsConf?: (config: EsbuildConfiguration) => void;

  /**

   * Should you need some dynamic changes to the Browser Extension manifest file

   * (/src-bex/manifest.json) then use this method to do it.
   */
  extendBexManifestJson?: (json: object) => void;
}

/src 中的 UI(UI in /src)

¥UI in /src

如果你想要篡改 /src 目录下的 Webpack UI 配置，你有两个选择：

¥Should you want to tamper with the Webpack config for UI in /src you have two options:

build: {
  extendWebpack(webpackCfg) { ... },
  chainWebpack(webpackChain) { ... }
}

当你构建（或开发）浏览器扩展时，UI 文件将被注入并作为 www 文件夹使用。

¥The UI files will be injected and available as www folder when you build (or develop) the browser extension.

Manifest.json(Manifest.json)

BEX 最重要的配置文件是 /src-bex/manifest.json。建议你在开始项目之前先安装 阅读此文件。

¥The most important config file for your BEX is /src-bex/manifest.json. It is recommended that you read up on this file before starting your project.

首次添加 BEX 模式时，你会注意到清单文件包含三个根属性：all, chrome & firefox.Chrome 的清单文件与 all+chrome 深度合并，而 Firefox 的清单文件则由 all+firefox 生成。你甚至可以为每个目标使用不同的清单版本：

¥When you first add the BEX mode, you will notice that the manifest file contains three root props: all, chrome & firefox. The manifest for chrome is deeply merged from all+chrome, while the firefox one is generated from all+firefox. You could even have different manifest versions for each target:

{
  "all": {
    "manifest_version": 3,

    "icons": {
      "16": "icons/icon-16x16.png",
      "48": "icons/icon-48x48.png",
      "128": "icons/icon-128x128.png"
    },

    "permissions": [
      "storage",
      "tabs"
    ],

    "host_permissions": [ "*://*/*" ],
    "content_security_policy": {
      "extension_pages": "script-src 'self'; object-src 'self';"
    },
    "web_accessible_resources": [
      {
        "resources": [ "*" ],
        "matches": [ "*://*/*" ]
      }
    ],

    "action": {
      "default_popup": "www/index.html"
    },

    "content_scripts": [
      {
        "matches": [ "<all_urls>" ],
        "css": [ "assets/content.css" ],
        "js": [ "my-content-script.ts" ]
      }
    ]
  },

  "chrome": {
    "background": {
      "service_worker": "background.ts"
    }
  },

  "firefox": {
    "background": {
      "scripts": [ "background.ts" ]
    }
  }
}

背景和内容脚本(Background And Content Scripts)

¥Background And Content Scripts

每个 BEX 背后都有一个 内容脚本 和一个后台脚本（manifest v2）/ service-worker（manifest v3+）。在编写第一个 BEX 之前，最好先了解这些组件的含义。

¥Behind every BEX is a content script and a background script (manifest v2) / service-worker (manifest v3+). It’s a good idea to understand what each of these are before writing your first BEX.

总结：

¥In summary:

• 背景脚本 - 在 BEX 本身的上下文中运行，并可以监听所有可用的浏览器扩展程序事件。

  ¥Background Script - runs in the context of the BEX itself and can listen to all available browser extension events.

• 内容脚本 - 在网页上下文中运行。每个运行此扩展程序的标签页都会有一个新的内容脚本实例。

  ¥Content Script - runs in the context of the web page. There will be a new content script instance per tab running the extension.

CSS(CSS)

任何你希望在网页（而非 Quasar 应用）中使用的样式都应作为文件包含在 src-bex/assets/<name>.css 中。添加此类文件时，请确保在需要它的内容脚本周围从 /src-bex/manifest.json 中引用它：

¥Any styles you want to be made available to your web page (not your Quasar App) should be included as a file in src-bex/assets/<name>.css. When adding such a file, please make sure that you reference it from your /src-bex/manifest.json around the content scripts that need it:

// example linking /src-bex/assets/content.css
"content_scripts": [
  {
    "matches": [ "<all_urls>" ],
    "css": [ "assets/content.css" ],
    "js": [ /*...*/ ]
  }
]

动态/其他脚本(Dynamic/other scripts)

¥Dynamic/other scripts

如果你需要为 BEX 动态加载或编译其他脚本，你可以通过编辑 quasar.config 文件来添加它们：

¥Should you need other scripts to be dynamically loaded or compiled for your BEX, you can add them by editing your quasar.config file:

bex: {
  /**

   * The list of extra scripts (js/ts) not in your bex manifest that you want to

   * compile and use in your browser extension. Maybe dynamic use them?

   *    * Each entry in the list should be a relative filename to /src-bex/

   *    * @example [ 'my-script.ts', 'sub-folder/my-other-script.js' ]
   */
  extraScripts?: string[];
}