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