[{"data":1,"prerenderedAt":847},["ShallowReactive",2],{"navigation_docs":3,"-storage-typescript":127,"-storage-typescript-surround":845},[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":124,"body":129,"description":152,"extension":840,"links":841,"meta":842,"navigation":216,"path":125,"seo":843,"stem":126,"__hash__":844},"docs/storage/1.typescript.md",{"type":130,"value":131,"toc":832},"minimark",[132,137,146,345,352,478,481,685,693,706,712,720,762,770,787,828],[133,134,136],"h2",{"id":135},"adding-type-safety","Adding Type Safety",[138,139,140,141,145],"p",{},"If your project uses TypeScript, you can make your own type-safe storage by passing a schema into the first type argument of ",[142,143,144],"code",{},"defineExtensionStorage",".",[147,148,153],"pre",{"className":149,"code":150,"language":151,"meta":152,"style":152},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { defineExtensionStorage } from '@webext-core/storage';\nimport browser from 'webextension-polyfill';\n\nexport interface ExtensionStorageSchema {\n  installDate: number;\n  notificationsEnabled: boolean;\n  favoriteUrls: string[];\n}\n\nexport const extensionStorage = defineExtensionStorage\u003CExtensionStorageSchema>(\n  browser.storage.local,\n);\n","ts","",[142,154,155,191,211,218,235,250,263,279,285,290,319,337],{"__ignoreMap":152},[156,157,160,164,168,172,175,178,181,185,188],"span",{"class":158,"line":159},"line",1,[156,161,163],{"class":162},"s7zQu","import",[156,165,167],{"class":166},"sMK4o"," {",[156,169,171],{"class":170},"sTEyZ"," defineExtensionStorage",[156,173,174],{"class":166}," }",[156,176,177],{"class":162}," from",[156,179,180],{"class":166}," '",[156,182,184],{"class":183},"sfazB","@webext-core/storage",[156,186,187],{"class":166},"'",[156,189,190],{"class":166},";\n",[156,192,194,196,199,202,204,207,209],{"class":158,"line":193},2,[156,195,163],{"class":162},[156,197,198],{"class":170}," browser ",[156,200,201],{"class":162},"from",[156,203,180],{"class":166},[156,205,206],{"class":183},"webextension-polyfill",[156,208,187],{"class":166},[156,210,190],{"class":166},[156,212,214],{"class":158,"line":213},3,[156,215,217],{"emptyLinePlaceholder":216},true,"\n",[156,219,221,224,228,232],{"class":158,"line":220},4,[156,222,223],{"class":162},"export",[156,225,227],{"class":226},"spNyl"," interface",[156,229,231],{"class":230},"sBMFI"," ExtensionStorageSchema",[156,233,234],{"class":166}," {\n",[156,236,238,242,245,248],{"class":158,"line":237},5,[156,239,241],{"class":240},"swJcz","  installDate",[156,243,244],{"class":166},":",[156,246,247],{"class":230}," number",[156,249,190],{"class":166},[156,251,253,256,258,261],{"class":158,"line":252},6,[156,254,255],{"class":240},"  notificationsEnabled",[156,257,244],{"class":166},[156,259,260],{"class":230}," boolean",[156,262,190],{"class":166},[156,264,266,269,271,274,277],{"class":158,"line":265},7,[156,267,268],{"class":240},"  favoriteUrls",[156,270,244],{"class":166},[156,272,273],{"class":230}," string",[156,275,276],{"class":170},"[]",[156,278,190],{"class":166},[156,280,282],{"class":158,"line":281},8,[156,283,284],{"class":166},"}\n",[156,286,288],{"class":158,"line":287},9,[156,289,217],{"emptyLinePlaceholder":216},[156,291,293,295,298,301,304,307,310,313,316],{"class":158,"line":292},10,[156,294,223],{"class":162},[156,296,297],{"class":226}," const",[156,299,300],{"class":170}," extensionStorage ",[156,302,303],{"class":166},"=",[156,305,171],{"class":306},"s2Zo4",[156,308,309],{"class":166},"\u003C",[156,311,312],{"class":230},"ExtensionStorageSchema",[156,314,315],{"class":166},">",[156,317,318],{"class":170},"(\n",[156,320,322,325,327,329,331,334],{"class":158,"line":321},11,[156,323,324],{"class":170},"  browser",[156,326,145],{"class":166},[156,328,118],{"class":170},[156,330,145],{"class":166},[156,332,333],{"class":170},"local",[156,335,336],{"class":166},",\n",[156,338,340,343],{"class":158,"line":339},12,[156,341,342],{"class":170},")",[156,344,190],{"class":166},[138,346,347,348,351],{},"Then, when you use this ",[142,349,350],{},"extensionStorage",", not the one exported from the package, you'll get type errors when using keys not in the schema:",[147,353,355],{"className":149,"code":354,"language":151,"meta":152,"style":152},"extensionStorage.getItem('unknownKey');\n//                       ~~~~~~~~~~~~ Error: 'unknownKey' does not match `keyof LocalExtStorageSchema`\n\nconst installDate: Date = await extensionStorage.getItem('installDate');\n//    ~~~~~~~~~~~~~~~~~ Error: value of type 'number' cannot be assigned to type 'Date'\n\nawait extensionStorage.setItem('favoriteUrls', 'not-an-array');\n//                                             ~~~~~~~~~~~~~~ Error: type 'string' is not assignable to 'string[]'\n",[142,356,357,380,386,390,429,434,438,473],{"__ignoreMap":152},[156,358,359,361,363,366,369,371,374,376,378],{"class":158,"line":159},[156,360,350],{"class":170},[156,362,145],{"class":166},[156,364,365],{"class":306},"getItem",[156,367,368],{"class":170},"(",[156,370,187],{"class":166},[156,372,373],{"class":183},"unknownKey",[156,375,187],{"class":166},[156,377,342],{"class":170},[156,379,190],{"class":166},[156,381,382],{"class":158,"line":193},[156,383,385],{"class":384},"sHwdD","//                       ~~~~~~~~~~~~ Error: 'unknownKey' does not match `keyof LocalExtStorageSchema`\n",[156,387,388],{"class":158,"line":213},[156,389,217],{"emptyLinePlaceholder":216},[156,391,392,395,398,400,403,406,409,412,414,416,418,420,423,425,427],{"class":158,"line":220},[156,393,394],{"class":226},"const",[156,396,397],{"class":170}," installDate",[156,399,244],{"class":166},[156,401,402],{"class":230}," Date",[156,404,405],{"class":166}," =",[156,407,408],{"class":162}," await",[156,410,411],{"class":170}," extensionStorage",[156,413,145],{"class":166},[156,415,365],{"class":306},[156,417,368],{"class":170},[156,419,187],{"class":166},[156,421,422],{"class":183},"installDate",[156,424,187],{"class":166},[156,426,342],{"class":170},[156,428,190],{"class":166},[156,430,431],{"class":158,"line":237},[156,432,433],{"class":384},"//    ~~~~~~~~~~~~~~~~~ Error: value of type 'number' cannot be assigned to type 'Date'\n",[156,435,436],{"class":158,"line":252},[156,437,217],{"emptyLinePlaceholder":216},[156,439,440,443,445,447,450,452,454,457,459,462,464,467,469,471],{"class":158,"line":265},[156,441,442],{"class":162},"await",[156,444,411],{"class":170},[156,446,145],{"class":166},[156,448,449],{"class":306},"setItem",[156,451,368],{"class":170},[156,453,187],{"class":166},[156,455,456],{"class":183},"favoriteUrls",[156,458,187],{"class":166},[156,460,461],{"class":166},",",[156,463,180],{"class":166},[156,465,466],{"class":183},"not-an-array",[156,468,187],{"class":166},[156,470,342],{"class":170},[156,472,190],{"class":166},[156,474,475],{"class":158,"line":281},[156,476,477],{"class":384},"//                                             ~~~~~~~~~~~~~~ Error: type 'string' is not assignable to 'string[]'\n",[138,479,480],{},"When used correctly, types will be automatically inferred without having to specify the type anywhere:",[147,482,484],{"className":149,"code":483,"language":151,"meta":152,"style":152},"const installDate /*: number | null */ = await extensionStorage.getItem('installDate');\nawait extensionStorage.setItem('installDate', 123);\n\nconst notificationsEnabled /*: boolean | null */ =\n  await extensionStorage.getItem('notificationsEnabled');\n\nconst favorites /*: string[] | null */ = await extensionStorage.getItem('favoriteUrls');\nfavorites ??= [];\nfavorites.push('https://github.com');\nawait localExtSTorage.setItem('favoriteUrls', favorites);\n",[142,485,486,518,546,550,563,587,591,623,636,659],{"__ignoreMap":152},[156,487,488,490,493,496,498,500,502,504,506,508,510,512,514,516],{"class":158,"line":159},[156,489,394],{"class":226},[156,491,492],{"class":170}," installDate ",[156,494,495],{"class":384},"/*: number | null */",[156,497,405],{"class":166},[156,499,408],{"class":162},[156,501,411],{"class":170},[156,503,145],{"class":166},[156,505,365],{"class":306},[156,507,368],{"class":170},[156,509,187],{"class":166},[156,511,422],{"class":183},[156,513,187],{"class":166},[156,515,342],{"class":170},[156,517,190],{"class":166},[156,519,520,522,524,526,528,530,532,534,536,538,542,544],{"class":158,"line":193},[156,521,442],{"class":162},[156,523,411],{"class":170},[156,525,145],{"class":166},[156,527,449],{"class":306},[156,529,368],{"class":170},[156,531,187],{"class":166},[156,533,422],{"class":183},[156,535,187],{"class":166},[156,537,461],{"class":166},[156,539,541],{"class":540},"sbssI"," 123",[156,543,342],{"class":170},[156,545,190],{"class":166},[156,547,548],{"class":158,"line":213},[156,549,217],{"emptyLinePlaceholder":216},[156,551,552,554,557,560],{"class":158,"line":220},[156,553,394],{"class":226},[156,555,556],{"class":170}," notificationsEnabled ",[156,558,559],{"class":384},"/*: boolean | null */",[156,561,562],{"class":166}," =\n",[156,564,565,568,570,572,574,576,578,581,583,585],{"class":158,"line":237},[156,566,567],{"class":162},"  await",[156,569,411],{"class":170},[156,571,145],{"class":166},[156,573,365],{"class":306},[156,575,368],{"class":170},[156,577,187],{"class":166},[156,579,580],{"class":183},"notificationsEnabled",[156,582,187],{"class":166},[156,584,342],{"class":170},[156,586,190],{"class":166},[156,588,589],{"class":158,"line":252},[156,590,217],{"emptyLinePlaceholder":216},[156,592,593,595,598,601,603,605,607,609,611,613,615,617,619,621],{"class":158,"line":265},[156,594,394],{"class":226},[156,596,597],{"class":170}," favorites ",[156,599,600],{"class":384},"/*: string[] | null */",[156,602,405],{"class":166},[156,604,408],{"class":162},[156,606,411],{"class":170},[156,608,145],{"class":166},[156,610,365],{"class":306},[156,612,368],{"class":170},[156,614,187],{"class":166},[156,616,456],{"class":183},[156,618,187],{"class":166},[156,620,342],{"class":170},[156,622,190],{"class":166},[156,624,625,628,631,634],{"class":158,"line":281},[156,626,627],{"class":170},"favorites ",[156,629,630],{"class":166},"??=",[156,632,633],{"class":170}," []",[156,635,190],{"class":166},[156,637,638,641,643,646,648,650,653,655,657],{"class":158,"line":287},[156,639,640],{"class":170},"favorites",[156,642,145],{"class":166},[156,644,645],{"class":306},"push",[156,647,368],{"class":170},[156,649,187],{"class":166},[156,651,652],{"class":183},"https://github.com",[156,654,187],{"class":166},[156,656,342],{"class":170},[156,658,190],{"class":166},[156,660,661,663,666,668,670,672,674,676,678,680,683],{"class":158,"line":292},[156,662,442],{"class":162},[156,664,665],{"class":170}," localExtSTorage",[156,667,145],{"class":166},[156,669,449],{"class":306},[156,671,368],{"class":170},[156,673,187],{"class":166},[156,675,456],{"class":183},[156,677,187],{"class":166},[156,679,461],{"class":166},[156,681,682],{"class":170}," favorites)",[156,684,190],{"class":166},[133,686,688,689,692],{"id":687},"handling-null-correctly","Handling ",[142,690,691],{},"null"," Correctly",[138,694,695,696,698,699,702,703,705],{},"When using a schema, you'll notice that ",[142,697,365],{}," returns ",[142,700,701],{},"T | null",", but ",[142,704,449],{}," requires a non-null value.",[138,707,708,709,711],{},"By default, getting items from storage could always return ",[142,710,691],{}," if a value hasn't been set. But if you type the schema as required fields, you're only be allowed to set non-null values.",[138,713,714,715,717,718,145],{},"If you want a key to be \"optional\" in storage, add ",[142,716,691],{}," to it's type, then you'll be able to set the value to ",[142,719,691],{},[147,721,725],{"className":722,"code":723,"language":724,"meta":152,"style":152},"language-diff shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export interface LocalExtStorageSchema {\n  installDate: number;\n+ notificationsEnabled: boolean;\n- notificationsEnabled: boolean | null;\n  favoriteUrls: string[];\n}\n","diff",[142,726,727,732,737,745,753,758],{"__ignoreMap":152},[156,728,729],{"class":158,"line":159},[156,730,731],{"class":170},"export interface LocalExtStorageSchema {\n",[156,733,734],{"class":158,"line":193},[156,735,736],{"class":170},"  installDate: number;\n",[156,738,739,742],{"class":158,"line":213},[156,740,741],{"class":166},"+",[156,743,744],{"class":183}," notificationsEnabled: boolean;\n",[156,746,747,750],{"class":158,"line":220},[156,748,749],{"class":166},"-",[156,751,752],{"class":240}," notificationsEnabled: boolean | null;\n",[156,754,755],{"class":158,"line":237},[156,756,757],{"class":170},"  favoriteUrls: string[];\n",[156,759,760],{"class":158,"line":252},[156,761,284],{"class":170},[763,764,766,767],"h3",{"id":765},"never-use-undefined","Never Use ",[142,768,769],{},"undefined",[138,771,772,773,775,776,778,779,782,783,786],{},"Missing storage values will always be returned as ",[142,774,691],{},", never as ",[142,777,769],{},". So you shouldn't use ",[142,780,781],{},"?:"," or ",[142,784,785],{},"| undefined"," since that doesn't represent the actual type of your values.",[147,788,790],{"className":722,"code":789,"language":724,"meta":152,"style":152},"export interface LocalExtStorageSchema {\n- key1?: number;\n- key2: string | undefined;\n+ key1: number | null;\n+ key2: string | null;\n}\n",[142,791,792,796,803,810,817,824],{"__ignoreMap":152},[156,793,794],{"class":158,"line":159},[156,795,731],{"class":170},[156,797,798,800],{"class":158,"line":193},[156,799,749],{"class":166},[156,801,802],{"class":240}," key1?: number;\n",[156,804,805,807],{"class":158,"line":213},[156,806,749],{"class":166},[156,808,809],{"class":240}," key2: string | undefined;\n",[156,811,812,814],{"class":158,"line":220},[156,813,741],{"class":166},[156,815,816],{"class":183}," key1: number | null;\n",[156,818,819,821],{"class":158,"line":237},[156,820,741],{"class":166},[156,822,823],{"class":183}," key2: string | null;\n",[156,825,826],{"class":158,"line":252},[156,827,284],{"class":170},[829,830,831],"style",{},"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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}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 .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 .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":152,"searchDepth":193,"depth":193,"links":833},[834,835],{"id":135,"depth":193,"text":136},{"id":687,"depth":193,"text":836,"children":837},"Handling null Correctly",[838],{"id":765,"depth":213,"text":839},"Never Use undefined","md",null,{},{"title":124,"description":152},"Lz4C9QZkd6qRZBtk8UEzPWmaO5KUwgmw5g3PI_RKfjA",[846,841],{"title":28,"path":121,"stem":122,"description":152,"children":-1},1779312970422]