[{"data":1,"prerenderedAt":470},["ShallowReactive",2],{"navigation_docs":3,"-proxy-service-service-keys":133,"-proxy-service-service-keys-surround":467},[4,22,51,62,73,84,99,118],{"title":5,"path":6,"stem":7,"children":8,"page":21},"Get Started","/get-started","0.get-started",[9,13,17],{"title":10,"path":11,"stem":12},"Introduction","/get-started/introduction","0.get-started/0.introduction",{"title":14,"path":15,"stem":16},"Browser Support","/get-started/browser-support","0.get-started/1.browser-support",{"title":18,"path":19,"stem":20},"Contributing","/get-started/contributing","0.get-started/2.contributing",false,{"title":23,"path":24,"stem":25,"children":26,"page":21},"Fake Browser","/fake-browser","fake-browser",[27,31,35,39,43,47],{"title":28,"path":29,"stem":30},"Installation","/fake-browser/installation","fake-browser/0.installation",{"title":32,"path":33,"stem":34},"Testing Frameworks","/fake-browser/testing-frameworks","fake-browser/1.testing-frameworks",{"title":36,"path":37,"stem":38},"Triggering Events","/fake-browser/triggering-events","fake-browser/2.triggering-events",{"title":40,"path":41,"stem":42},"Resetting State","/fake-browser/reseting-state","fake-browser/3.reseting-state",{"title":44,"path":45,"stem":46},"Implemented Apis","/fake-browser/implemented-apis","fake-browser/4.implemented-apis",{"title":48,"path":49,"stem":50},"Api","/fake-browser/api","fake-browser/api",{"title":52,"path":53,"stem":54,"children":55,"page":21},"Isolated Element","/isolated-element","isolated-element",[56,59],{"title":28,"path":57,"stem":58},"/isolated-element/installation","isolated-element/0.installation",{"title":48,"path":60,"stem":61},"/isolated-element/api","isolated-element/api",{"title":63,"path":64,"stem":65,"children":66,"page":21},"Job Scheduler","/job-scheduler","job-scheduler",[67,70],{"title":28,"path":68,"stem":69},"/job-scheduler/installation","job-scheduler/0.installation",{"title":48,"path":71,"stem":72},"/job-scheduler/api","job-scheduler/api",{"title":74,"path":75,"stem":76,"children":77,"page":21},"Match Patterns","/match-patterns","match-patterns",[78,81],{"title":28,"path":79,"stem":80},"/match-patterns/installation","match-patterns/0.installation",{"title":48,"path":82,"stem":83},"/match-patterns/api","match-patterns/api",{"title":85,"path":86,"stem":87,"children":88,"page":21},"Messaging","/messaging","messaging",[89,92,96],{"title":28,"path":90,"stem":91},"/messaging/installation","messaging/0.installation",{"title":93,"path":94,"stem":95},"Protocol Maps","/messaging/protocol-maps","messaging/1.protocol-maps",{"title":48,"path":97,"stem":98},"/messaging/api","messaging/api",{"title":100,"path":101,"stem":102,"children":103,"page":21},"Proxy Service","/proxy-service","proxy-service",[104,107,111,115],{"title":28,"path":105,"stem":106},"/proxy-service/installation","proxy-service/0.installation",{"title":108,"path":109,"stem":110},"Defining Services","/proxy-service/defining-services","proxy-service/1.defining-services",{"title":112,"path":113,"stem":114},"Service Keys","/proxy-service/service-keys","proxy-service/2.service-keys",{"title":48,"path":116,"stem":117},"/proxy-service/api","proxy-service/api",{"title":119,"path":120,"stem":121,"children":122,"page":21},"Storage","/storage","storage",[123,126,130],{"title":28,"path":124,"stem":125},"/storage/installation","storage/0.installation",{"title":127,"path":128,"stem":129},"Typescript","/storage/typescript","storage/1.typescript",{"title":48,"path":131,"stem":132},"/storage/api","storage/api",{"id":134,"title":112,"body":135,"description":164,"extension":462,"links":463,"meta":464,"navigation":297,"path":113,"seo":465,"stem":114,"__hash__":466},"docs/proxy-service/2.service-keys.md",{"type":136,"value":137,"toc":460},"minimark",[138,142,357,363,366,456],[139,140,141],"p",{},"There are two ways of defining service keys:",[143,144,145,249],"ol",{},[146,147,148,152,153,157,158],"li",{},[149,150,151],"strong",{},"Using a string literal",": This is simple, but it provides no type-safety guaranteeing that the registered service is the same type as the proxy. Notice how you have to provide a type argument to the ",[154,155,156],"code",{},"createProxyService"," function.",[159,160,165],"pre",{"className":161,"code":162,"language":163,"meta":164,"style":164},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const key = 'math-service';\nregisterService(key, new MathService());\nconst proxy = createProxyService\u003CMathService>(key);\n","ts","",[154,166,167,197,221],{"__ignoreMap":164},[168,169,172,176,180,184,187,191,194],"span",{"class":170,"line":171},"line",1,[168,173,175],{"class":174},"spNyl","const",[168,177,179],{"class":178},"sTEyZ"," key ",[168,181,183],{"class":182},"sMK4o","=",[168,185,186],{"class":182}," '",[168,188,190],{"class":189},"sfazB","math-service",[168,192,193],{"class":182},"'",[168,195,196],{"class":182},";\n",[168,198,200,204,207,210,213,216,219],{"class":170,"line":199},2,[168,201,203],{"class":202},"s2Zo4","registerService",[168,205,206],{"class":178},"(key",[168,208,209],{"class":182},",",[168,211,212],{"class":182}," new",[168,214,215],{"class":202}," MathService",[168,217,218],{"class":178},"())",[168,220,196],{"class":182},[168,222,224,226,229,231,234,237,241,244,247],{"class":170,"line":223},3,[168,225,175],{"class":174},[168,227,228],{"class":178}," proxy ",[168,230,183],{"class":182},[168,232,233],{"class":202}," createProxyService",[168,235,236],{"class":182},"\u003C",[168,238,240],{"class":239},"sBMFI","MathService",[168,242,243],{"class":182},">",[168,245,246],{"class":178},"(key)",[168,248,196],{"class":182},[146,250,251,257,258],{},[149,252,253,254],{},"Cast to ",[154,255,256],{},"ProxyServiceKey",": The key is cast to a \"branded type\" that contains the service type. This guarantees you both register the expected service and create a proxy with the correct type with minimal code.",[159,259,261],{"className":161,"code":260,"language":163,"meta":164,"style":164},"import type { ProxyServiceKey } from '@webext-core/proxy-service';\n\nconst key = 'math-service' as ProxyServiceKey\u003CMathService>;\nregisterService(key, new MathService());\nconst proxy = createProxyService(key);\n",[154,262,263,293,299,325,342],{"__ignoreMap":164},[168,264,265,269,272,275,278,281,284,286,289,291],{"class":170,"line":171},[168,266,268],{"class":267},"s7zQu","import",[168,270,271],{"class":267}," type",[168,273,274],{"class":182}," {",[168,276,277],{"class":178}," ProxyServiceKey",[168,279,280],{"class":182}," }",[168,282,283],{"class":267}," from",[168,285,186],{"class":182},[168,287,288],{"class":189},"@webext-core/proxy-service",[168,290,193],{"class":182},[168,292,196],{"class":182},[168,294,295],{"class":170,"line":199},[168,296,298],{"emptyLinePlaceholder":297},true,"\n",[168,300,301,303,305,307,309,311,313,316,318,320,322],{"class":170,"line":223},[168,302,175],{"class":174},[168,304,179],{"class":178},[168,306,183],{"class":182},[168,308,186],{"class":182},[168,310,190],{"class":189},[168,312,193],{"class":182},[168,314,315],{"class":267}," as",[168,317,277],{"class":239},[168,319,236],{"class":182},[168,321,240],{"class":239},[168,323,324],{"class":182},">;\n",[168,326,328,330,332,334,336,338,340],{"class":170,"line":327},4,[168,329,203],{"class":202},[168,331,206],{"class":178},[168,333,209],{"class":182},[168,335,212],{"class":182},[168,337,215],{"class":202},[168,339,218],{"class":178},[168,341,196],{"class":182},[168,343,345,347,349,351,353,355],{"class":170,"line":344},5,[168,346,175],{"class":174},[168,348,228],{"class":178},[168,350,183],{"class":182},[168,352,233],{"class":202},[168,354,246],{"class":178},[168,356,196],{"class":182},[139,358,359,360,362],{},"Using ",[154,361,256],{}," is highly recommended. It ensures type-safety everywhere, and it usually a good idea to create a shared constant for keys like this, so just add a simple cast!",[139,364,365],{},"Just make sure wherever your store the service keys, you DO NOT IMPORT THE REAL SERVICES, just their types:",[159,367,370],{"className":161,"code":368,"filename":369,"language":163,"meta":164,"style":164},"import type { ProxyServiceKey } from '@webext-core/proxy-service';\nimport type { MathService } from './math-service';\n//     ^^^^ DO NOT FORGET THE type KEYWORD\n\nexport const MATH_SERVICE_KEY = 'math-service' as ProxyServiceKey\u003CMathService>;\n","proxy-service-keys.ts",[154,371,372,394,417,423,427],{"__ignoreMap":164},[168,373,374,376,378,380,382,384,386,388,390,392],{"class":170,"line":171},[168,375,268],{"class":267},[168,377,271],{"class":267},[168,379,274],{"class":182},[168,381,277],{"class":178},[168,383,280],{"class":182},[168,385,283],{"class":267},[168,387,186],{"class":182},[168,389,288],{"class":189},[168,391,193],{"class":182},[168,393,196],{"class":182},[168,395,396,398,400,402,404,406,408,410,413,415],{"class":170,"line":199},[168,397,268],{"class":267},[168,399,271],{"class":267},[168,401,274],{"class":182},[168,403,215],{"class":178},[168,405,280],{"class":182},[168,407,283],{"class":267},[168,409,186],{"class":182},[168,411,412],{"class":189},"./math-service",[168,414,193],{"class":182},[168,416,196],{"class":182},[168,418,419],{"class":170,"line":223},[168,420,422],{"class":421},"sHwdD","//     ^^^^ DO NOT FORGET THE type KEYWORD\n",[168,424,425],{"class":170,"line":327},[168,426,298],{"emptyLinePlaceholder":297},[168,428,429,432,435,438,440,442,444,446,448,450,452,454],{"class":170,"line":344},[168,430,431],{"class":267},"export",[168,433,434],{"class":174}," const",[168,436,437],{"class":178}," MATH_SERVICE_KEY ",[168,439,183],{"class":182},[168,441,186],{"class":182},[168,443,190],{"class":189},[168,445,193],{"class":182},[168,447,315],{"class":267},[168,449,277],{"class":239},[168,451,236],{"class":182},[168,453,240],{"class":239},[168,455,324],{"class":182},[457,458,459],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":164,"searchDepth":199,"depth":199,"links":461},[],"md",null,{},{"title":112,"description":164},"SkIbN3I65YnCkAi2SkyGULTDusTtNHNNjFoeqfyFbks",[468,469],{"title":108,"path":109,"stem":110,"description":164,"children":-1},{"title":48,"path":116,"stem":117,"description":164,"children":-1},1779305977784]