[{"data":1,"prerenderedAt":1790},["ShallowReactive",2],{"navigation_docs":3,"-proxy-service-installation":127,"-proxy-service-installation-surround":1787},[4,22,51,62,73,84,99,115],{"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 Reference","/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],{"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":116,"path":117,"stem":118,"children":119,"page":21},"Storage","/storage","storage",[120,123],{"title":28,"path":121,"stem":122},"/storage/installation","storage/0.installation",{"title":124,"path":125,"stem":126},"Typescript","/storage/typescript","storage/1.typescript",{"id":128,"title":28,"body":129,"description":175,"extension":1782,"links":1783,"meta":1784,"navigation":334,"path":105,"seo":1785,"stem":106,"__hash__":1786},"docs/proxy-service/0.installation.md",{"type":130,"value":131,"toc":1777},"minimark",[132,153,158,165,606,609,614,632,661,665,684,761,765,768,771,1257,1265,1268,1512,1531,1534,1773],[133,134,135,140,141,140,144,140,147,140,150],"p",{},[136,137,139],"badge",{"type":138},"success","MV2"," ",[136,142,143],{"type":138},"MV3",[136,145,146],{"type":138},"Chrome",[136,148,149],{"type":138},"Firefox",[136,151,152],{"type":138},"Safari",[154,155,157],"h2",{"id":156},"overview","Overview",[133,159,160,164],{},[161,162,163],"code",{},"@webext-core/proxy-service"," provides a simple, type-safe way to execute code in the extension's background.",[166,167,168,263,374,501],"code-group",{},[169,170,176],"pre",{"className":171,"code":172,"filename":173,"language":174,"meta":175,"style":175},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","// 1. Define your service\nexport class MathService {\n  async fibonacci(number: number): Promise\u003Cnumber> {\n    ...\n  }\n}\n","MathService.ts","ts","",[161,177,178,187,206,245,251,257],{"__ignoreMap":175},[179,180,183],"span",{"class":181,"line":182},"line",1,[179,184,186],{"class":185},"sHwdD","// 1. Define your service\n",[179,188,190,194,198,202],{"class":181,"line":189},2,[179,191,193],{"class":192},"s7zQu","export",[179,195,197],{"class":196},"spNyl"," class",[179,199,201],{"class":200},"sBMFI"," MathService",[179,203,205],{"class":204},"sMK4o"," {\n",[179,207,209,212,216,219,223,226,229,232,235,238,240,243],{"class":181,"line":208},3,[179,210,211],{"class":196},"  async",[179,213,215],{"class":214},"swJcz"," fibonacci",[179,217,218],{"class":204},"(",[179,220,222],{"class":221},"sHdIc","number",[179,224,225],{"class":204},":",[179,227,228],{"class":200}," number",[179,230,231],{"class":204},"):",[179,233,234],{"class":200}," Promise",[179,236,237],{"class":204},"\u003C",[179,239,222],{"class":200},[179,241,242],{"class":204},">",[179,244,205],{"class":204},[179,246,248],{"class":181,"line":247},4,[179,249,250],{"class":204},"    ...\n",[179,252,254],{"class":181,"line":253},5,[179,255,256],{"class":204},"  }\n",[179,258,260],{"class":181,"line":259},6,[179,261,262],{"class":204},"}\n",[169,264,267],{"className":171,"code":265,"filename":266,"language":174,"meta":175,"style":175},"import type { ProxyServiceKey } from '@webext-core/proxy-service';\nimport type { MathService } from './MathService';\n//     ^^^^ IMPORTANT: do not import the math service's value, just it's type.\n\n// 2. [Optional] Define a key with a branded type to ensure type-safety\nexport const MATH_SERVICE_KEY = 'math-service' as ProxyServiceKey\u003CMathService>;\n","proxy-service-keys.ts",[161,268,269,302,325,330,336,341],{"__ignoreMap":175},[179,270,271,274,277,280,284,287,290,293,296,299],{"class":181,"line":182},[179,272,273],{"class":192},"import",[179,275,276],{"class":192}," type",[179,278,279],{"class":204}," {",[179,281,283],{"class":282},"sTEyZ"," ProxyServiceKey",[179,285,286],{"class":204}," }",[179,288,289],{"class":192}," from",[179,291,292],{"class":204}," '",[179,294,163],{"class":295},"sfazB",[179,297,298],{"class":204},"'",[179,300,301],{"class":204},";\n",[179,303,304,306,308,310,312,314,316,318,321,323],{"class":181,"line":189},[179,305,273],{"class":192},[179,307,276],{"class":192},[179,309,279],{"class":204},[179,311,201],{"class":282},[179,313,286],{"class":204},[179,315,289],{"class":192},[179,317,292],{"class":204},[179,319,320],{"class":295},"./MathService",[179,322,298],{"class":204},[179,324,301],{"class":204},[179,326,327],{"class":181,"line":208},[179,328,329],{"class":185},"//     ^^^^ IMPORTANT: do not import the math service's value, just it's type.\n",[179,331,332],{"class":181,"line":247},[179,333,335],{"emptyLinePlaceholder":334},true,"\n",[179,337,338],{"class":181,"line":253},[179,339,340],{"class":185},"// 2. [Optional] Define a key with a branded type to ensure type-safety\n",[179,342,343,345,348,351,354,356,359,361,364,366,368,371],{"class":181,"line":259},[179,344,193],{"class":192},[179,346,347],{"class":196}," const",[179,349,350],{"class":282}," MATH_SERVICE_KEY ",[179,352,353],{"class":204},"=",[179,355,292],{"class":204},[179,357,358],{"class":295},"math-service",[179,360,298],{"class":204},[179,362,363],{"class":192}," as",[179,365,283],{"class":200},[179,367,237],{"class":204},[179,369,370],{"class":200},"MathService",[179,372,373],{"class":204},">;\n",[169,375,378],{"className":171,"code":376,"filename":377,"language":174,"meta":175,"style":175},"import { registerService } from '@webext-core/proxy-service';\nimport { MathService } from './MathService';\nimport { MATH_SERVICE_KEY } from './proxy-service-keys';\n\n// 3. Instantiate your service\nconst mathService = new MathService();\n\n// 4. Register the service BEFORE awaiting anything\nregisterService(MATH_SERVICE_KEY, mathService);\n","background.ts",[161,379,380,401,421,443,447,452,473,478,484],{"__ignoreMap":175},[179,381,382,384,386,389,391,393,395,397,399],{"class":181,"line":182},[179,383,273],{"class":192},[179,385,279],{"class":204},[179,387,388],{"class":282}," registerService",[179,390,286],{"class":204},[179,392,289],{"class":192},[179,394,292],{"class":204},[179,396,163],{"class":295},[179,398,298],{"class":204},[179,400,301],{"class":204},[179,402,403,405,407,409,411,413,415,417,419],{"class":181,"line":189},[179,404,273],{"class":192},[179,406,279],{"class":204},[179,408,201],{"class":282},[179,410,286],{"class":204},[179,412,289],{"class":192},[179,414,292],{"class":204},[179,416,320],{"class":295},[179,418,298],{"class":204},[179,420,301],{"class":204},[179,422,423,425,427,430,432,434,436,439,441],{"class":181,"line":208},[179,424,273],{"class":192},[179,426,279],{"class":204},[179,428,429],{"class":282}," MATH_SERVICE_KEY",[179,431,286],{"class":204},[179,433,289],{"class":192},[179,435,292],{"class":204},[179,437,438],{"class":295},"./proxy-service-keys",[179,440,298],{"class":204},[179,442,301],{"class":204},[179,444,445],{"class":181,"line":247},[179,446,335],{"emptyLinePlaceholder":334},[179,448,449],{"class":181,"line":253},[179,450,451],{"class":185},"// 3. Instantiate your service\n",[179,453,454,457,460,462,465,468,471],{"class":181,"line":259},[179,455,456],{"class":196},"const",[179,458,459],{"class":282}," mathService ",[179,461,353],{"class":204},[179,463,464],{"class":204}," new",[179,466,201],{"class":467},"s2Zo4",[179,469,470],{"class":282},"()",[179,472,301],{"class":204},[179,474,476],{"class":181,"line":475},7,[179,477,335],{"emptyLinePlaceholder":334},[179,479,481],{"class":181,"line":480},8,[179,482,483],{"class":185},"// 4. Register the service BEFORE awaiting anything\n",[179,485,487,490,493,496,499],{"class":181,"line":486},9,[179,488,489],{"class":467},"registerService",[179,491,492],{"class":282},"(MATH_SERVICE_KEY",[179,494,495],{"class":204},",",[179,497,498],{"class":282}," mathService)",[179,500,301],{"class":204},[169,502,505],{"className":171,"code":503,"filename":504,"language":174,"meta":175,"style":175},"import { createProxyService } from './MathService';\nimport { MATH_SERVICE_KEY } from './proxy-service-keys';\n\n// 5. Get a proxy of your service\nconst mathService = createProxyService(MATH_SERVICE_KEY);\n\n// 6. Call methods like normal, they will execute in the background\nawait mathService.fibonacci(100);\n","anywhere-else.ts",[161,506,507,528,548,552,557,572,576,581],{"__ignoreMap":175},[179,508,509,511,513,516,518,520,522,524,526],{"class":181,"line":182},[179,510,273],{"class":192},[179,512,279],{"class":204},[179,514,515],{"class":282}," createProxyService",[179,517,286],{"class":204},[179,519,289],{"class":192},[179,521,292],{"class":204},[179,523,320],{"class":295},[179,525,298],{"class":204},[179,527,301],{"class":204},[179,529,530,532,534,536,538,540,542,544,546],{"class":181,"line":189},[179,531,273],{"class":192},[179,533,279],{"class":204},[179,535,429],{"class":282},[179,537,286],{"class":204},[179,539,289],{"class":192},[179,541,292],{"class":204},[179,543,438],{"class":295},[179,545,298],{"class":204},[179,547,301],{"class":204},[179,549,550],{"class":181,"line":208},[179,551,335],{"emptyLinePlaceholder":334},[179,553,554],{"class":181,"line":247},[179,555,556],{"class":185},"// 5. Get a proxy of your service\n",[179,558,559,561,563,565,567,570],{"class":181,"line":253},[179,560,456],{"class":196},[179,562,459],{"class":282},[179,564,353],{"class":204},[179,566,515],{"class":467},[179,568,569],{"class":282},"(MATH_SERVICE_KEY)",[179,571,301],{"class":204},[179,573,574],{"class":181,"line":259},[179,575,335],{"emptyLinePlaceholder":334},[179,577,578],{"class":181,"line":475},[179,579,580],{"class":185},"// 6. Call methods like normal, they will execute in the background\n",[179,582,583,586,589,592,595,597,601,604],{"class":181,"line":480},[179,584,585],{"class":192},"await",[179,587,588],{"class":282}," mathService",[179,590,591],{"class":204},".",[179,593,594],{"class":467},"fibonacci",[179,596,218],{"class":282},[179,598,600],{"class":599},"sbssI","100",[179,602,603],{"class":282},")",[179,605,301],{"class":204},[154,607,28],{"id":608},"installation",[610,611,613],"h6",{"id":612},"npm","NPM",[169,615,619],{"className":616,"code":617,"language":618,"meta":175,"style":175},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm i @webext-core/proxy-service\n","bash",[161,620,621],{"__ignoreMap":175},[179,622,623,626,629],{"class":181,"line":182},[179,624,625],{"class":200},"pnpm",[179,627,628],{"class":295}," i",[179,630,631],{"class":295}," @webext-core/proxy-service\n",[169,633,635],{"className":171,"code":634,"language":174,"meta":175,"style":175},"import { createProxyService, registerService } from '@webext-core/proxy-service';\n",[161,636,637],{"__ignoreMap":175},[179,638,639,641,643,645,647,649,651,653,655,657,659],{"class":181,"line":182},[179,640,273],{"class":192},[179,642,279],{"class":204},[179,644,515],{"class":282},[179,646,495],{"class":204},[179,648,388],{"class":282},[179,650,286],{"class":204},[179,652,289],{"class":192},[179,654,292],{"class":204},[179,656,163],{"class":295},[179,658,298],{"class":204},[179,660,301],{"class":204},[610,662,664],{"id":663},"cdn","CDN",[169,666,668],{"className":616,"code":667,"language":618,"meta":175,"style":175},"curl -o proxy-service.js https://cdn.jsdelivr.net/npm/@webext-core/proxy-service/lib/index.global.js\n",[161,669,670],{"__ignoreMap":175},[179,671,672,675,678,681],{"class":181,"line":182},[179,673,674],{"class":200},"curl",[179,676,677],{"class":295}," -o",[179,679,680],{"class":295}," proxy-service.js",[179,682,683],{"class":295}," https://cdn.jsdelivr.net/npm/@webext-core/proxy-service/lib/index.global.js\n",[169,685,689],{"className":686,"code":687,"language":688,"meta":175,"style":175},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript src=\"/proxy-service.js\">\u003C/script>\n\u003Cscript>\n  const { createProxyService, registerService } = webExtCoreProxyService;\n\u003C/script>\n","html",[161,690,691,719,727,752],{"__ignoreMap":175},[179,692,693,695,698,701,703,706,709,711,714,716],{"class":181,"line":182},[179,694,237],{"class":204},[179,696,697],{"class":214},"script",[179,699,700],{"class":196}," src",[179,702,353],{"class":204},[179,704,705],{"class":204},"\"",[179,707,708],{"class":295},"/proxy-service.js",[179,710,705],{"class":204},[179,712,713],{"class":204},">\u003C/",[179,715,697],{"class":214},[179,717,718],{"class":204},">\n",[179,720,721,723,725],{"class":181,"line":189},[179,722,237],{"class":204},[179,724,697],{"class":214},[179,726,718],{"class":204},[179,728,729,732,734,736,738,741,744,747,750],{"class":181,"line":208},[179,730,731],{"class":196},"  const",[179,733,279],{"class":204},[179,735,515],{"class":282},[179,737,495],{"class":204},[179,739,740],{"class":282}," registerService ",[179,742,743],{"class":204},"}",[179,745,746],{"class":204}," =",[179,748,749],{"class":282}," webExtCoreProxyService",[179,751,301],{"class":204},[179,753,754,757,759],{"class":181,"line":247},[179,755,756],{"class":204},"\u003C/",[179,758,697],{"class":214},[179,760,718],{"class":204},[154,762,764],{"id":763},"usage","Usage",[133,766,767],{},"Lets look at a more realistic example, IndexedDB! Since the same IndexedDB database is not available in every JS context of an extension, it's common to use the IndexedDB instance in the background script as a database for web extensions.",[133,769,770],{},"First, we need to implement our service. In this case, the service will contain CRUD operations for todos in the database:",[166,772,773],{},[169,774,777],{"className":171,"code":775,"filename":776,"language":174,"meta":175,"style":175},"import { IDBPDatabase } from 'idb';\n\nexport function createTodosRepo(idbPromise: Promise\u003CIDBPDatabase>) {\n  return {\n    async create(todo: Todo): Promise\u003Cvoid> {\n      const idb = await idbPromise;\n      await idb.add('todos', todo);\n    },\n    async getOne(id: Pick\u003CTodo, 'id'>): Promise\u003CTodo> {\n      const idb = await idbPromise;\n      return await idb.get('todos', id);\n    },\n    async getAll(): Promise\u003CTodo[]> {\n      const idb = await idbPromise;\n      return await idb.getAll('todos');\n    },\n    async update(todo: Todo): Promise\u003Cvoid> {\n      const idb = await idbPromise;\n      await idb.put('todos', todo);\n    },\n    async delete(todo: Todo): Promise\u003Cvoid> {\n      const idb = await idbPromise;\n      await idb.delete('todos', todo.id);\n    },\n  };\n}\n","todos-repo.ts",[161,778,779,801,805,834,841,872,890,920,925,968,983,1015,1020,1044,1059,1085,1090,1118,1133,1161,1166,1194,1209,1241,1246,1252],{"__ignoreMap":175},[179,780,781,783,785,788,790,792,794,797,799],{"class":181,"line":182},[179,782,273],{"class":192},[179,784,279],{"class":204},[179,786,787],{"class":282}," IDBPDatabase",[179,789,286],{"class":204},[179,791,289],{"class":192},[179,793,292],{"class":204},[179,795,796],{"class":295},"idb",[179,798,298],{"class":204},[179,800,301],{"class":204},[179,802,803],{"class":181,"line":189},[179,804,335],{"emptyLinePlaceholder":334},[179,806,807,809,812,815,817,820,822,824,826,829,832],{"class":181,"line":208},[179,808,193],{"class":192},[179,810,811],{"class":196}," function",[179,813,814],{"class":467}," createTodosRepo",[179,816,218],{"class":204},[179,818,819],{"class":221},"idbPromise",[179,821,225],{"class":204},[179,823,234],{"class":200},[179,825,237],{"class":204},[179,827,828],{"class":200},"IDBPDatabase",[179,830,831],{"class":204},">)",[179,833,205],{"class":204},[179,835,836,839],{"class":181,"line":247},[179,837,838],{"class":192},"  return",[179,840,205],{"class":204},[179,842,843,846,849,851,854,856,859,861,863,865,868,870],{"class":181,"line":253},[179,844,845],{"class":196},"    async",[179,847,848],{"class":214}," create",[179,850,218],{"class":204},[179,852,853],{"class":221},"todo",[179,855,225],{"class":204},[179,857,858],{"class":200}," Todo",[179,860,231],{"class":204},[179,862,234],{"class":200},[179,864,237],{"class":204},[179,866,867],{"class":200},"void",[179,869,242],{"class":204},[179,871,205],{"class":204},[179,873,874,877,880,882,885,888],{"class":181,"line":259},[179,875,876],{"class":196},"      const",[179,878,879],{"class":282}," idb",[179,881,746],{"class":204},[179,883,884],{"class":192}," await",[179,886,887],{"class":282}," idbPromise",[179,889,301],{"class":204},[179,891,892,895,897,899,902,904,906,909,911,913,916,918],{"class":181,"line":475},[179,893,894],{"class":192},"      await",[179,896,879],{"class":282},[179,898,591],{"class":204},[179,900,901],{"class":467},"add",[179,903,218],{"class":214},[179,905,298],{"class":204},[179,907,908],{"class":295},"todos",[179,910,298],{"class":204},[179,912,495],{"class":204},[179,914,915],{"class":282}," todo",[179,917,603],{"class":214},[179,919,301],{"class":204},[179,921,922],{"class":181,"line":480},[179,923,924],{"class":204},"    },\n",[179,926,927,929,932,934,937,939,942,944,947,949,951,953,955,958,960,962,964,966],{"class":181,"line":486},[179,928,845],{"class":196},[179,930,931],{"class":214}," getOne",[179,933,218],{"class":204},[179,935,936],{"class":221},"id",[179,938,225],{"class":204},[179,940,941],{"class":200}," Pick",[179,943,237],{"class":204},[179,945,946],{"class":200},"Todo",[179,948,495],{"class":204},[179,950,292],{"class":204},[179,952,936],{"class":295},[179,954,298],{"class":204},[179,956,957],{"class":204},">):",[179,959,234],{"class":200},[179,961,237],{"class":204},[179,963,946],{"class":200},[179,965,242],{"class":204},[179,967,205],{"class":204},[179,969,971,973,975,977,979,981],{"class":181,"line":970},10,[179,972,876],{"class":196},[179,974,879],{"class":282},[179,976,746],{"class":204},[179,978,884],{"class":192},[179,980,887],{"class":282},[179,982,301],{"class":204},[179,984,986,989,991,993,995,998,1000,1002,1004,1006,1008,1011,1013],{"class":181,"line":985},11,[179,987,988],{"class":192},"      return",[179,990,884],{"class":192},[179,992,879],{"class":282},[179,994,591],{"class":204},[179,996,997],{"class":467},"get",[179,999,218],{"class":214},[179,1001,298],{"class":204},[179,1003,908],{"class":295},[179,1005,298],{"class":204},[179,1007,495],{"class":204},[179,1009,1010],{"class":282}," id",[179,1012,603],{"class":214},[179,1014,301],{"class":204},[179,1016,1018],{"class":181,"line":1017},12,[179,1019,924],{"class":204},[179,1021,1023,1025,1028,1031,1033,1035,1037,1040,1042],{"class":181,"line":1022},13,[179,1024,845],{"class":196},[179,1026,1027],{"class":214}," getAll",[179,1029,1030],{"class":204},"():",[179,1032,234],{"class":200},[179,1034,237],{"class":204},[179,1036,946],{"class":200},[179,1038,1039],{"class":214},"[]",[179,1041,242],{"class":204},[179,1043,205],{"class":204},[179,1045,1047,1049,1051,1053,1055,1057],{"class":181,"line":1046},14,[179,1048,876],{"class":196},[179,1050,879],{"class":282},[179,1052,746],{"class":204},[179,1054,884],{"class":192},[179,1056,887],{"class":282},[179,1058,301],{"class":204},[179,1060,1062,1064,1066,1068,1070,1073,1075,1077,1079,1081,1083],{"class":181,"line":1061},15,[179,1063,988],{"class":192},[179,1065,884],{"class":192},[179,1067,879],{"class":282},[179,1069,591],{"class":204},[179,1071,1072],{"class":467},"getAll",[179,1074,218],{"class":214},[179,1076,298],{"class":204},[179,1078,908],{"class":295},[179,1080,298],{"class":204},[179,1082,603],{"class":214},[179,1084,301],{"class":204},[179,1086,1088],{"class":181,"line":1087},16,[179,1089,924],{"class":204},[179,1091,1093,1095,1098,1100,1102,1104,1106,1108,1110,1112,1114,1116],{"class":181,"line":1092},17,[179,1094,845],{"class":196},[179,1096,1097],{"class":214}," update",[179,1099,218],{"class":204},[179,1101,853],{"class":221},[179,1103,225],{"class":204},[179,1105,858],{"class":200},[179,1107,231],{"class":204},[179,1109,234],{"class":200},[179,1111,237],{"class":204},[179,1113,867],{"class":200},[179,1115,242],{"class":204},[179,1117,205],{"class":204},[179,1119,1121,1123,1125,1127,1129,1131],{"class":181,"line":1120},18,[179,1122,876],{"class":196},[179,1124,879],{"class":282},[179,1126,746],{"class":204},[179,1128,884],{"class":192},[179,1130,887],{"class":282},[179,1132,301],{"class":204},[179,1134,1136,1138,1140,1142,1145,1147,1149,1151,1153,1155,1157,1159],{"class":181,"line":1135},19,[179,1137,894],{"class":192},[179,1139,879],{"class":282},[179,1141,591],{"class":204},[179,1143,1144],{"class":467},"put",[179,1146,218],{"class":214},[179,1148,298],{"class":204},[179,1150,908],{"class":295},[179,1152,298],{"class":204},[179,1154,495],{"class":204},[179,1156,915],{"class":282},[179,1158,603],{"class":214},[179,1160,301],{"class":204},[179,1162,1164],{"class":181,"line":1163},20,[179,1165,924],{"class":204},[179,1167,1169,1171,1174,1176,1178,1180,1182,1184,1186,1188,1190,1192],{"class":181,"line":1168},21,[179,1170,845],{"class":196},[179,1172,1173],{"class":214}," delete",[179,1175,218],{"class":204},[179,1177,853],{"class":221},[179,1179,225],{"class":204},[179,1181,858],{"class":200},[179,1183,231],{"class":204},[179,1185,234],{"class":200},[179,1187,237],{"class":204},[179,1189,867],{"class":200},[179,1191,242],{"class":204},[179,1193,205],{"class":204},[179,1195,1197,1199,1201,1203,1205,1207],{"class":181,"line":1196},22,[179,1198,876],{"class":196},[179,1200,879],{"class":282},[179,1202,746],{"class":204},[179,1204,884],{"class":192},[179,1206,887],{"class":282},[179,1208,301],{"class":204},[179,1210,1212,1214,1216,1218,1221,1223,1225,1227,1229,1231,1233,1235,1237,1239],{"class":181,"line":1211},23,[179,1213,894],{"class":192},[179,1215,879],{"class":282},[179,1217,591],{"class":204},[179,1219,1220],{"class":467},"delete",[179,1222,218],{"class":214},[179,1224,298],{"class":204},[179,1226,908],{"class":295},[179,1228,298],{"class":204},[179,1230,495],{"class":204},[179,1232,915],{"class":282},[179,1234,591],{"class":204},[179,1236,936],{"class":282},[179,1238,603],{"class":214},[179,1240,301],{"class":204},[179,1242,1244],{"class":181,"line":1243},24,[179,1245,924],{"class":204},[179,1247,1249],{"class":181,"line":1248},25,[179,1250,1251],{"class":204},"  };\n",[179,1253,1255],{"class":181,"line":1254},26,[179,1256,262],{"class":204},[1258,1259,1260,1261,1264],"alert",{},"In this example, we're using a plain object instead of a class as the service. See the ",[1262,1263,108],"a",{"href":109}," docs for examples of all the different ways to create a proxy service.",[133,1266,1267],{},"Now that you have a service implemented, we need to register it in the background so it starts listening for messages from other parts of the extension.",[166,1269,1270,1354],{},[169,1271,1273],{"className":171,"code":1272,"filename":266,"language":174,"meta":175,"style":175},"import type { ProxyServiceKey } from '@webext-core/proxy-service';\nimport type { TodosRepo } from './todos-repo';\n\nexport const TODOS_REPO_KEY = 'todos-repo' as ProxyServiceKey\u003CTodosRepo>;\n",[161,1274,1275,1297,1321,1325],{"__ignoreMap":175},[179,1276,1277,1279,1281,1283,1285,1287,1289,1291,1293,1295],{"class":181,"line":182},[179,1278,273],{"class":192},[179,1280,276],{"class":192},[179,1282,279],{"class":204},[179,1284,283],{"class":282},[179,1286,286],{"class":204},[179,1288,289],{"class":192},[179,1290,292],{"class":204},[179,1292,163],{"class":295},[179,1294,298],{"class":204},[179,1296,301],{"class":204},[179,1298,1299,1301,1303,1305,1308,1310,1312,1314,1317,1319],{"class":181,"line":189},[179,1300,273],{"class":192},[179,1302,276],{"class":192},[179,1304,279],{"class":204},[179,1306,1307],{"class":282}," TodosRepo",[179,1309,286],{"class":204},[179,1311,289],{"class":192},[179,1313,292],{"class":204},[179,1315,1316],{"class":295},"./todos-repo",[179,1318,298],{"class":204},[179,1320,301],{"class":204},[179,1322,1323],{"class":181,"line":208},[179,1324,335],{"emptyLinePlaceholder":334},[179,1326,1327,1329,1331,1334,1336,1338,1341,1343,1345,1347,1349,1352],{"class":181,"line":247},[179,1328,193],{"class":192},[179,1330,347],{"class":196},[179,1332,1333],{"class":282}," TODOS_REPO_KEY ",[179,1335,353],{"class":204},[179,1337,292],{"class":204},[179,1339,1340],{"class":295},"todos-repo",[179,1342,298],{"class":204},[179,1344,363],{"class":192},[179,1346,283],{"class":200},[179,1348,237],{"class":204},[179,1350,1351],{"class":200},"TodosRepo",[179,1353,373],{"class":204},[169,1355,1357],{"className":171,"code":1356,"filename":377,"language":174,"meta":175,"style":175},"import { registerService } from '@webext-core/proxy-service';\nimport { openDB } from 'idb';\nimport { createTodosRepo } from './todos-repo';\nimport { TODOS_REPO_KEY } from './proxy-service-keys';\n\n// DO NOT await the promise here. registerService must be called synchronously.\nconst idbPromise = openDB(\"todos\", ...);\n\nconst todosRepo = createTodosRepo(idbPromise);\nregisterService(TODOS_REPO_KEY, todosRepo);\n",[161,1358,1359,1379,1400,1420,1441,1445,1450,1478,1482,1498],{"__ignoreMap":175},[179,1360,1361,1363,1365,1367,1369,1371,1373,1375,1377],{"class":181,"line":182},[179,1362,273],{"class":192},[179,1364,279],{"class":204},[179,1366,388],{"class":282},[179,1368,286],{"class":204},[179,1370,289],{"class":192},[179,1372,292],{"class":204},[179,1374,163],{"class":295},[179,1376,298],{"class":204},[179,1378,301],{"class":204},[179,1380,1381,1383,1385,1388,1390,1392,1394,1396,1398],{"class":181,"line":189},[179,1382,273],{"class":192},[179,1384,279],{"class":204},[179,1386,1387],{"class":282}," openDB",[179,1389,286],{"class":204},[179,1391,289],{"class":192},[179,1393,292],{"class":204},[179,1395,796],{"class":295},[179,1397,298],{"class":204},[179,1399,301],{"class":204},[179,1401,1402,1404,1406,1408,1410,1412,1414,1416,1418],{"class":181,"line":208},[179,1403,273],{"class":192},[179,1405,279],{"class":204},[179,1407,814],{"class":282},[179,1409,286],{"class":204},[179,1411,289],{"class":192},[179,1413,292],{"class":204},[179,1415,1316],{"class":295},[179,1417,298],{"class":204},[179,1419,301],{"class":204},[179,1421,1422,1424,1426,1429,1431,1433,1435,1437,1439],{"class":181,"line":247},[179,1423,273],{"class":192},[179,1425,279],{"class":204},[179,1427,1428],{"class":282}," TODOS_REPO_KEY",[179,1430,286],{"class":204},[179,1432,289],{"class":192},[179,1434,292],{"class":204},[179,1436,438],{"class":295},[179,1438,298],{"class":204},[179,1440,301],{"class":204},[179,1442,1443],{"class":181,"line":253},[179,1444,335],{"emptyLinePlaceholder":334},[179,1446,1447],{"class":181,"line":259},[179,1448,1449],{"class":185},"// DO NOT await the promise here. registerService must be called synchronously.\n",[179,1451,1452,1454,1457,1459,1461,1463,1465,1467,1469,1471,1474,1476],{"class":181,"line":475},[179,1453,456],{"class":196},[179,1455,1456],{"class":282}," idbPromise ",[179,1458,353],{"class":204},[179,1460,1387],{"class":467},[179,1462,218],{"class":282},[179,1464,705],{"class":204},[179,1466,908],{"class":295},[179,1468,705],{"class":204},[179,1470,495],{"class":204},[179,1472,1473],{"class":204}," ...",[179,1475,603],{"class":282},[179,1477,301],{"class":204},[179,1479,1480],{"class":181,"line":480},[179,1481,335],{"emptyLinePlaceholder":334},[179,1483,1484,1486,1489,1491,1493,1496],{"class":181,"line":486},[179,1485,456],{"class":196},[179,1487,1488],{"class":282}," todosRepo ",[179,1490,353],{"class":204},[179,1492,814],{"class":467},[179,1494,1495],{"class":282},"(idbPromise)",[179,1497,301],{"class":204},[179,1499,1500,1502,1505,1507,1510],{"class":181,"line":970},[179,1501,489],{"class":467},[179,1503,1504],{"class":282},"(TODOS_REPO_KEY",[179,1506,495],{"class":204},[179,1508,1509],{"class":282}," todosRepo)",[179,1511,301],{"class":204},[1258,1513,1514,1524],{},[133,1515,1516,1517,1520,1521,1523],{},"Here, even though ",[161,1518,1519],{},"openDB"," returns a promise, we're not awaiting it because ",[161,1522,489],{}," must be called synchronously on service worker/background script startup. Otherwise, the message listeners might not be setup by the time a content script tries to proxy a function call.",[133,1525,1526,1527,1530],{},"You can follow the pattern of passing ",[161,1528,1529],{},"Promise\u003CDependency>"," into your services and awaiting them internally to stay synchronous.",[133,1532,1533],{},"And that's it. You can now access your IndexedDB database from any JS context inside your extension:",[166,1535,1536,1671],{},[169,1537,1540],{"className":686,"code":1538,"filename":1539,"language":688,"meta":175,"style":175},"\u003Cscript type=\"module\">\n  import { TODOS_REPO_KEY } from './proxy-service-keys';\n  import { createProxyService } from '@webext-core/proxy-service';\n\n  // On your UIs\n  const todosRepo = createProxyService(TODOS_REPO_KEY);\n  const todos = await todosRepo.getAll();\n  console.log(todos);\n\u003C/script>\n","extension-page.html",[161,1541,1542,1561,1582,1602,1606,1611,1626,1648,1663],{"__ignoreMap":175},[179,1543,1544,1546,1548,1550,1552,1554,1557,1559],{"class":181,"line":182},[179,1545,237],{"class":204},[179,1547,697],{"class":214},[179,1549,276],{"class":196},[179,1551,353],{"class":204},[179,1553,705],{"class":204},[179,1555,1556],{"class":295},"module",[179,1558,705],{"class":204},[179,1560,718],{"class":204},[179,1562,1563,1566,1568,1570,1572,1574,1576,1578,1580],{"class":181,"line":189},[179,1564,1565],{"class":192},"  import",[179,1567,279],{"class":204},[179,1569,1428],{"class":282},[179,1571,286],{"class":204},[179,1573,289],{"class":192},[179,1575,292],{"class":204},[179,1577,438],{"class":295},[179,1579,298],{"class":204},[179,1581,301],{"class":204},[179,1583,1584,1586,1588,1590,1592,1594,1596,1598,1600],{"class":181,"line":208},[179,1585,1565],{"class":192},[179,1587,279],{"class":204},[179,1589,515],{"class":282},[179,1591,286],{"class":204},[179,1593,289],{"class":192},[179,1595,292],{"class":204},[179,1597,163],{"class":295},[179,1599,298],{"class":204},[179,1601,301],{"class":204},[179,1603,1604],{"class":181,"line":247},[179,1605,335],{"emptyLinePlaceholder":334},[179,1607,1608],{"class":181,"line":253},[179,1609,1610],{"class":185},"  // On your UIs\n",[179,1612,1613,1615,1617,1619,1621,1624],{"class":181,"line":259},[179,1614,731],{"class":196},[179,1616,1488],{"class":282},[179,1618,353],{"class":204},[179,1620,515],{"class":467},[179,1622,1623],{"class":282},"(TODOS_REPO_KEY)",[179,1625,301],{"class":204},[179,1627,1628,1630,1633,1635,1637,1640,1642,1644,1646],{"class":181,"line":475},[179,1629,731],{"class":196},[179,1631,1632],{"class":282}," todos ",[179,1634,353],{"class":204},[179,1636,884],{"class":192},[179,1638,1639],{"class":282}," todosRepo",[179,1641,591],{"class":204},[179,1643,1072],{"class":467},[179,1645,470],{"class":282},[179,1647,301],{"class":204},[179,1649,1650,1653,1655,1658,1661],{"class":181,"line":480},[179,1651,1652],{"class":282},"  console",[179,1654,591],{"class":204},[179,1656,1657],{"class":467},"log",[179,1659,1660],{"class":282},"(todos)",[179,1662,301],{"class":204},[179,1664,1665,1667,1669],{"class":181,"line":486},[179,1666,756],{"class":204},[179,1668,697],{"class":214},[179,1670,718],{"class":204},[169,1672,1675],{"className":171,"code":1673,"filename":1674,"language":174,"meta":175,"style":175},"import { TODOS_REPO_KEY } from './proxy-service-keys';\nimport { createProxyService } from '@webext-core/proxy-service';\n\n// Inside content scripts\nconst todosRepo = createProxyService(TODOS_REPO_KEY);\nconst todos = await todosRepo.getAll();\nconsole.log(todos);\n","content-script.ts",[161,1676,1677,1697,1717,1721,1726,1740,1760],{"__ignoreMap":175},[179,1678,1679,1681,1683,1685,1687,1689,1691,1693,1695],{"class":181,"line":182},[179,1680,273],{"class":192},[179,1682,279],{"class":204},[179,1684,1428],{"class":282},[179,1686,286],{"class":204},[179,1688,289],{"class":192},[179,1690,292],{"class":204},[179,1692,438],{"class":295},[179,1694,298],{"class":204},[179,1696,301],{"class":204},[179,1698,1699,1701,1703,1705,1707,1709,1711,1713,1715],{"class":181,"line":189},[179,1700,273],{"class":192},[179,1702,279],{"class":204},[179,1704,515],{"class":282},[179,1706,286],{"class":204},[179,1708,289],{"class":192},[179,1710,292],{"class":204},[179,1712,163],{"class":295},[179,1714,298],{"class":204},[179,1716,301],{"class":204},[179,1718,1719],{"class":181,"line":208},[179,1720,335],{"emptyLinePlaceholder":334},[179,1722,1723],{"class":181,"line":247},[179,1724,1725],{"class":185},"// Inside content scripts\n",[179,1727,1728,1730,1732,1734,1736,1738],{"class":181,"line":253},[179,1729,456],{"class":196},[179,1731,1488],{"class":282},[179,1733,353],{"class":204},[179,1735,515],{"class":467},[179,1737,1623],{"class":282},[179,1739,301],{"class":204},[179,1741,1742,1744,1746,1748,1750,1752,1754,1756,1758],{"class":181,"line":259},[179,1743,456],{"class":196},[179,1745,1632],{"class":282},[179,1747,353],{"class":204},[179,1749,884],{"class":192},[179,1751,1639],{"class":282},[179,1753,591],{"class":204},[179,1755,1072],{"class":467},[179,1757,470],{"class":282},[179,1759,301],{"class":204},[179,1761,1762,1765,1767,1769,1771],{"class":181,"line":475},[179,1763,1764],{"class":282},"console",[179,1766,591],{"class":204},[179,1768,1657],{"class":467},[179,1770,1660],{"class":282},[179,1772,301],{"class":204},[1774,1775,1776],"style",{},"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}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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":175,"searchDepth":189,"depth":189,"links":1778},[1779,1780,1781],{"id":156,"depth":189,"text":157},{"id":608,"depth":189,"text":28},{"id":763,"depth":189,"text":764},"md",null,{},{"title":28,"description":175},"0-omoFz4_5lLiEVhvDaO2QMGeT0AnkRhSHB2i9RJ-Uw",[1788,1789],{"title":48,"path":97,"stem":98,"description":175,"children":-1},{"title":108,"path":109,"stem":110,"description":175,"children":-1},1780345580294]