text: "use strict";(globalThis["webpackChunkquasar_dev"]=globalThis["webpackChunkquasar_dev"]||[]).push([[39475],{39475:(n,s,e)=>{e.r(s),e.d(s,{default:()=>w});var a=e(83673);const o=(0,a._)("p",null,[(0,a.Uk)("允许 Quasar 应用程序与BEX的各个部分进行通信是至关重要的。Quasar使用一个 "),(0,a._)("code",{class:"doc-token"},"bridge"),(0,a.Uk)(" 来填补这一空白。")],-1),t=(0,a._)("p",null,"在一个BEX中，有4个区域需要一个通信层：",-1),c=(0,a._)("ol",null,[(0,a._)("li",null,"Quasar应用程序本身–这适用于所有类型的BEX，如弹出窗口、选项页、开发工具或网页。"),(0,a._)("li",null,"后台脚本"),(0,a._)("li",null,"内容脚本"),(0,a._)("li",null,"BEX所运行的网页")],-1),l=(0,a._)("p",null,"在 Quasar 的通信桥梁中，有一条基本规则需要理解。",-1),p=(0,a._)("p",null,[(0,a._)("strong",null,"并非所有的BEX类型都有内容脚本"),(0,a.Uk)(" - 只有在网页背景下运行的BEX才有内容脚本。这就是一般浏览器扩展的工作方式。这意味着如果你在内容脚本上添加一个事件监听器，并试图从作为开发工具、选项页或弹出式窗口运行的Quasar BEX中触发它–**它不会工作。")],-1),u=(0,a._)("p",null,"如果你想让你的开发工具、弹出窗口或选项页BEX与网页通信，你将需要使用后台脚本作为代理。你可以通过以下方式做到这一点。",-1),i=(0,a._)("ol",null,[(0,a._)("li",null,"在后台脚本上添加一个监听器，反过来发射另一个事件。"),(0,a._)("li",null,"在网页上下文中运行的 Quasar 应用程序中添加一个监听器，监听后台脚本所发出的事件。 发出"),(0,a._)("li",null,"从你的开发工具、弹出窗口或选项页面向你的后台脚本发出事件。")],-1),_=(0,a._)("p",null,"一旦你理解了这个概念，BEX与每个部分的通信方式就没有限制了。",-1),d=(0,a._)("p",null,"桥接器是一个基于承诺的事件系统，在BEX的所有部分之间共享，因此允许你在 Quasar 应用程序中监听事件，从其他部分发出事件，反之亦然。这就是Quasar BEX模式的力量所在。",-1),k=(0,a._)("p",null,[(0,a.Uk)("要从你的 Quasar 应用程序中访问该桥，你可以使用"),(0,a._)("code",{class:"doc-token"},"$q.bex"),(0,a.Uk)("。在其他地区，桥接是通过各自的钩子文件中的"),(0,a._)("code",{class:"doc-token"},"bridge"),(0,a.Uk)("参数来实现的。")],-1),r=(0,a._)("p",null,"让我们看看它是如何工作的。",-1),g=(0,a._)("pre",{class:"doc-code language-js"},[(0,a._)("code",{class:"doc-code__inner doc-code__inner--prerendered language-js"},[(0,a.Uk)("bridge"),(0,a._)("span",{class:"token punctuation"},"."),(0,a._)("span",{class:"token function"},"send"),(0,a._)("span",{class:"token punctuation"},"("),(0,a._)("span",{class:"token string"},"'some.event'"),(0,a._)("span",{class:"token punctuation"},","),(0,a.Uk)(),(0,a._)("span",{class:"token punctuation"},"{"),(0,a.Uk)(),(0,a._)("span",{class:"token literal-property property"},"someKey"),(0,a._)("span",{class:"token operator"},":"),(0,a.Uk)(),(0,a._)("span",{class:"token string"},"'aValue'"),(0,a.Uk)(),(0,a._)("span",{class:"token punctuation"},"}"),(0,a._)("span",{class:"token punctuation"},")"),(0,a._)("span",{class:"token punctuation"},"."),(0,a._)("span",{class:"token function"},"then"),(0,a._)("span",{class:"token punctuation"},"("),(0,a._)("span",{class:"token parameter"},"response"),(0,a.Uk)(),(0,a._)("span",{class:"token operator"},"=>"),(0,a.Uk)(),(0,a._)("span",{class:"token punctuation"},"{"),(0,a.Uk)("\n  console"),(0,a._)("span",{class:"token punctuation"},"."),(0,a._)("span",{class:"token function"},"log"),(0,a._)("span",{class:"token punctuation"},"("),(0,a._)("span",{class:"token string"},"'Some response from the other side'"),(0,a._)("span",{class:"token punctuation"},")"),(0,a.Uk)("\n"),(0,a._)("span",{class:"token punctuation"},"}"),(0,a._)("span",{class:"token punctuation"},")"),(0,a.Uk)("\n")])],-1),U=(0,a._)("pre",{class:"doc-code language-js"},[(0,a._)("code",{class:"doc-code__inner doc-code__inner--prerendered language-js"},[(0,a.Uk)("bridge"),(0,a._)("span",{class:"token punctuation"},"."),(0,a._)("span",{class:"token function"},"on"),(0,a._)("span",{class:"token punctuation"},"("),(0,a._)("span",{class:"token string"},"'some.event'"),(0,a._)("span",{class:"token punctuation"},","),(0,a.Uk)(),(0,a._)("span",{class:"token parameter"},"event"),(0,a.Uk)(),(0,a._)("span",{class:"token operator"},"=>"),(0,a.Uk)(),(0,a._)("span",{class:"token punctuation"},"{"),(0,a.Uk)("\n  console"),(0,a._)("span",{class:"token punctuation"},"."),(0,a._)("span",{class:"token function"},"log"),(0,a._)("span",{class:"token punctuation"},"("),(0,a._)("span",{class:"token string"},"'Event Receieved, responding ...'"),(0,a._)("span",{class:"token punctuation"},")"),(0,a.Uk)("\n  bridge"),(0,a._)("span",{class:"token punctuation"},"."),(0,a._)("span",{class:"token function"},"send"),(0,a._)("span",{class:"token punctuation"},"("),(0,a.Uk)("event"),(0,a._)("span",{class:"token punctuation"},"."),(0,a.Uk)("eventResponseKey"),(0,a._)("span",{class:"token punctuation"},")"),(0,a.Uk)("\n"),(0,a._)("span",{class:"token punctuation"},"}"),(0,a._)("span",{class:"token punctuation"},")"),(0,a.Uk)("\n")])],-1),h=(0,a._)("pre",{class:"doc-code language-js"},[(0,a._)("code",{class:"doc-code__inner doc-code__inner--prerendered language-js"},[(0,a.Uk)("bridge"),(0,a._)("span",{class:"token punctuation"},"."),(0,a._)("span",{class:"token function"},"off"),(0,a._)("span",{class:"token punctuation"},"("),(0,a._)("span",{class:"token string"},"'some.event'"),(0,a._)("span",{class:"token punctuation"},","),(0,a.Uk)(),(0,a._)("span",{class:"token keyword"},"this"),(0,a._)("span",{class:"token punctuation"},"."),(0,a.Uk)("someFunction"),(0,a._)("span",{class:"token punctuation"},")"),(0,a.Uk)("\n")])],-1),v=(0,a._)("p",null,[(0,a.Uk)("等等，什么是"),(0,a._)("code",{class:"doc-token"},"bridge.send(event.eventResponseKey)"),(0,a.Uk)("？")],-1),m=(0,a._)("p",null,[(0,a.Uk)("Quasar 桥接器在幕后做了一些工作，将正常的基于事件的通信转换为承诺，因此，为了使承诺得到解决，我们需要发送一个"),(0,a._)("em",null,"新"),(0,a.Uk)("的事件，该事件被捕获并被承诺。")],-1),b=(0,a._)("div",{class:"doc-note doc-note--warning"},[(0,a._)("p",{class:"doc-note__title"},"WARNING"),(0,a._)("p",null,[(0,a.Uk)("如果你省略了 "),(0,a._)("code",{class:"doc-token"},"bridge.send(event.eventResponseKey)"),(0,a.Uk)("，"),(0,a._)("code",{class:"doc-token"},".send()"),(0,a.Uk)(" 上的 promise 将无法解析。")])],-1),E=(0,a._)("div",{class:"doc-note doc-note--tip"},[(0,a._)("p",{class:"doc-note__title"},"TIP"),(0,a._)("p",null,"由于浏览器扩展 60mb 数据传输限制，桥接器还做了一些工作来拆分大数据，这些数据太大而无法一次性传输。为了实现这一点，有效载荷必须是一个数组。")],-1);function y(n,s,e,y,f,B){const X=(0,a.up)("doc-page");return(0,a.wg)(),(0,a.j4)(X,{"meta-title":y.metaTitle,title:"BEX通信",nav:y.nav,toc:y.toc,"meta-desc":y.metaDesc},{default:(0,a.w5)((()=>[o,t,c,(0,a._)("h2",{id:"通信规则",class:"doc-heading doc-h2",onClick:s[0]||(s[0]=n=>y.copyHeading("通信规则"))},"通信规则"),l,p,u,i,_,(0,a._)("h2",{id:"桥接器",class:"doc-heading doc-h2",onClick:s[1]||(s[1]=n=>y.copyHeading("桥接器"))},"桥接器"),d,k,r,(0,a._)("h3",{id:"触发一个事件并等待响应",class:"doc-heading doc-h3",onClick:s[2]||(s[2]=n=>y.copyHeading("触发一个事件并等待响应"))},"触发一个事件并等待响应"),g,(0,a._)("h3",{id:"监听一个事件并发送一个响应",class:"doc-heading doc-h3",onClick:s[3]||(s[3]=n=>y.copyHeading("监听一个事件并发送一个响应"))},"监听一个事件并发送一个响应"),U,(0,a._)("h3",{id:"清理你的听众",class:"doc-heading doc-h3",onClick:s[4]||(s[4]=n=>y.copyHeading("清理你的听众"))},"清理你的听众"),h,v,m,b,E])),_:1},8,["meta-title","nav","toc","meta-desc"])}var f=e(17536);const B={name:"DocMarkdownPage",setup(){return{metaTitle:"BEX通信",metaDesc:"如何在 Quasar 中的浏览器扩展(BEX)的不同部分之间进行通信。",nav:[{name:"BEX的类型",category:"开发浏览器扩展",path:"/quasar-cli/developing-browser-extensions/types-of-bex",dir:"left"},{name:"背景钩子",category:"开发浏览器扩展",path:"/quasar-cli/developing-browser-extensions/background-hooks",dir:"right"}],toc:[{id:"通信规则",title:"通信规则"},{id:"桥接器",title:"桥接器"},{id:"触发一个事件并等待响应",title:"触发一个事件并等待响应",sub:!0},{id:"监听一个事件并发送一个响应",title:"监听一个事件并发送一个响应",sub:!0},{id:"清理你的听众",title:"清理你的听众",sub:!0}],copyHeading:f.Et}}};var X=e(74260);const Q=(0,X.Z)(B,[["render",y]]),w=Q}}]);