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