text: "use strict";(globalThis["webpackChunkquasar_dev"]=globalThis["webpackChunkquasar_dev"]||[]).push([[82066],{82066:(e,n,s)=>{s.r(n),s.d(n,{default:()=>q});var a=s(83673);const o=(0,a._)("p",null,"构建SPA、Mobile App、Electron App、BEX或SSR之间的区别只是由 “quasar dev” 和 “quasar build” 命令中的 “mode” 参数决定。",-1),c=(0,a._)("p",null,"为了构建一个BEX，我们首先需要在 Quasar 项目中添加BEX模式。",-1),t=(0,a._)("pre",{class:"doc-code language-bash"},[(0,a._)("code",{class:"doc-code__inner doc-code__inner--prerendered language-bash"},[(0,a.Uk)("$ quasar mode "),(0,a._)("span",{class:"token function"},"add"),(0,a.Uk)(" bex\n")])],-1),l=(0,a._)("p",null,'如果你想直接进入并开始开发，你可以跳过 "Quasar 模式 "命令并发出。',-1),r=(0,a._)("pre",{class:"doc-code language-bash"},[(0,a._)("code",{class:"doc-code__inner doc-code__inner--prerendered language-bash"},"$ quasar dev -m bex\n")],-1),d=(0,a._)("p",null,[(0,a.Uk)("这将自动添加BEX模式，如果缺少的话，在你的项目中添加一个"),(0,a._)("code",{class:"doc-token"},"src-bex"),(0,a.Uk)("文件夹。")],-1),p={class:"doc-note doc-note--tip"},k=(0,a._)("p",{class:"doc-note__title"},"TIP",-1),i=(0,a._)("p",null,[(0,a._)("code",{class:"doc-token"},"src-bex"),(0,a.Uk)("文件夹只是一个标准的浏览器扩展文件夹，所以你可以像使用其他浏览器扩展项目文件夹一样自由使用它。请参考支持的浏览器扩展文档以了解更多。")],-1),_=(0,a.Uk)("Mozilla FireFox 浏览器扩展文档"),u=(0,a.Uk)("Google Chrome 浏览器扩展文档"),m=(0,a._)("li",null,[(0,a._)("strong",null,"其他基于Chromium的浏览器"),(0,a.Uk)(" - 请参考它们的具体文档。")],-1),g=(0,a.Uk)("2. 了解 "),U=(0,a._)("code",{class:"doc-token"},"src-bex",-1),b=(0,a.Uk)(" 的解剖结构"),x=[g,U,b],h=(0,a._)("p",null,"新的文件夹有如下结构：",-1),E=(0,a._)("pre",{class:"doc-code language-bash"},[(0,a._)("code",{class:"doc-code__inner doc-code__inner--prerendered language-bash"},[(0,a._)("span",{class:"token builtin class-name"},"."),(0,a.Uk)("\n└── src-bex/\n    ├── css                    "),(0,a._)("span",{class:"token comment"},"# 在浏览器上下文中使用的CSS"),(0,a.Uk)("\n          "),(0,a._)("span",{class:"token operator"},"|"),(0,a.Uk)("   ├── content-css.css       "),(0,a._)("span",{class:"token comment"},"# CSS文件，该文件通过manifest.json自动注入到消费的网页中。"),(0,a.Uk)("\n    ├── icons/                 "),(0,a._)("span",{class:"token comment"},"# 适用于所有平台的应用程序图标"),(0,a.Uk)("\n           "),(0,a._)("span",{class:"token operator"},"|"),(0,a.Uk)("   ├── icon-16x16.png         "),(0,a._)("span",{class:"token comment"},"# Icon file at 16px x 16px"),(0,a.Uk)("\n           "),(0,a._)("span",{class:"token operator"},"|"),(0,a.Uk)("   ├── icon-48x48.png         "),(0,a._)("span",{class:"token comment"},"# Icon file at 48px x 48px"),(0,a.Uk)("\n           "),(0,a._)("span",{class:"token operator"},"|"),(0,a.Uk)("   └── icon-128x128.png       "),(0,a._)("span",{class:"token comment"},"# Icon file at 128px x 128px"),(0,a.Uk)("\n    ├── js/                    "),(0,a._)("span",{class:"token comment"},"# 在BEX上下文中使用的Javascript文件。"),(0,a.Uk)("\n          "),(0,a._)("span",{class:"token operator"},"|"),(0,a.Uk)("   ├── background.js         "),(0,a._)("span",{class:"token comment"},"# 标准后台脚本 BEX 文件 - 通过 manifest.json 自动注入"),(0,a.Uk)("\n          "),(0,a._)("span",{class:"token operator"},"|"),(0,a.Uk)("   ├── background-hooks.js   "),(0,a._)("span",{class:"token comment"},"# 后台脚本与BEX通信层的挂钩"),(0,a.Uk)("\n          "),(0,a._)("span",{class:"token operator"},"|"),(0,a.Uk)("   ├── content-hooks.js      "),(0,a._)("span",{class:"token comment"},"# 内容脚本，带有BEX通信层的挂钩"),(0,a.Uk)("\n          "),(0,a._)("span",{class:"token operator"},"|"),(0,a.Uk)("   ├── content-script.js     "),(0,a._)("span",{class:"token comment"},"# 标准内容脚本 BEX 文件 - 通过 manifest.json 自动注入"),(0,a.Uk)("\n          "),(0,a._)("span",{class:"token operator"},"|"),(0,a.Uk)("   └── dom-hooks.js          "),(0,a._)("span",{class:"token comment"},"# JS文件，该文件通过一个钩子注入到BEX通信层的DOM中"),(0,a.Uk)("\n          └── www/                   "),(0,a._)("span",{class:"token comment"},"# 编译的 BEX 源代码 - 从 /src 编译（Quasar 应用程序）"),(0,a.Uk)("\n          └── manifest.json          "),(0,a._)("span",{class:"token comment"},"# 用于生产的主线程代码"),(0,a.Uk)("\n")])],-1),v=(0,a._)("p",null,"下一节将更详细地讨论这些。",-1);function B(e,n,s,g,U,b){const B=(0,a.up)("doc-link"),X=(0,a.up)("doc-page");return(0,a.wg)(),(0,a.j4)(X,{"meta-title":g.metaTitle,title:"准备参加BEX",nav:g.nav,toc:g.toc,"meta-desc":g.metaDesc},{default:(0,a.w5)((()=>[o,(0,a._)("h2",{id:"1-添加quasar-bex模式",class:"doc-heading doc-h2",onClick:n[0]||(n[0]=e=>g.copyHeading("1-添加quasar-bex模式"))},"1. 添加Quasar BEX模式"),c,t,l,r,d,(0,a._)("div",p,[k,i,(0,a._)("ul",null,[(0,a._)("li",null,[(0,a.Wm)(B,{to:"https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions"},{default:(0,a.w5)((()=>[_])),_:1})]),(0,a._)("li",null,[(0,a.Wm)(B,{to:"https://developer.chrome.com/extensions"},{default:(0,a.w5)((()=>[u])),_:1})]),m])]),(0,a._)("h2",{id:"2-了解-src-bex-的解剖结构",class:"doc-heading doc-h2",onClick:n[1]||(n[1]=e=>g.copyHeading("2-了解-src-bex-的解剖结构"))},x),h,E,v])),_:1},8,["meta-title","nav","toc","meta-desc"])}var X=s(17536);const f={name:"DocMarkdownPage",setup(){return{metaTitle:"准备参加BEX",metaDesc:"如何将浏览器扩展(BEX)模式添加到 Quasar 应用程序中。",nav:[{name:"简介",category:"开发浏览器扩展",path:"/quasar-cli/developing-browser-extensions/introduction",dir:"left"},{name:"配置BEX",category:"开发浏览器扩展",path:"/quasar-cli/developing-browser-extensions/configuring-bex",dir:"right"}],toc:[{id:"1-添加quasar-bex模式",title:"1. 添加Quasar BEX模式"},{id:"2-了解-src-bex-的解剖结构",title:"2. 了解 src-bex 的解剖结构"}],copyHeading:X.Et}}};var w=s(74260);const j=(0,w.Z)(f,[["render",B]]),q=j}}]);