[{"data":1,"prerenderedAt":728},["ShallowReactive",2],{"navigation_docs":3,"-get-started-introduction":127,"-get-started-introduction-surround":725},[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":10,"body":129,"description":719,"extension":720,"links":721,"meta":722,"navigation":269,"path":11,"seo":723,"stem":12,"__hash__":724},"docs/0.get-started/0.introduction.md",{"type":130,"value":131,"toc":714},"minimark",[132,137,146,166,169,179,207,210,225,310,313,316,340,349,359,367,370,400,403,409,419,424,555,559,641,645,699,703,710],[133,134,136],"h2",{"id":135},"overview","Overview",[138,139,140,141,145],"p",{},"All of ",[142,143,144],"code",{},"@webext-core","'s packages are provided via NPM. Depending on your project's setup, you can consume them in 2 different ways:",[147,148,149,159],"ol",{},[150,151,152,153,158],"li",{},"If your project uses a bundler or framework (like Vite, Webpack, WXT, or Plasmo), see ",[154,155,157],"a",{"href":156},"#bundler-setup","Bundler Setup",".",[150,160,161,162],{},"If your project does not use a bundler, see ",[154,163,165],{"href":164},"#non-bundler-setup","Non-bundler Setup",[133,167,157],{"id":168},"bundler-setup",[138,170,171,172,178],{},"If you haven't setup a bundler yet, I recommend using ",[154,173,177],{"href":174,"rel":175},"https://wxt.dev/",[176],"nofollow","WXT"," for the best DX and to support all browsers.",[180,181,186],"pre",{"className":182,"code":183,"language":184,"meta":185,"style":185},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm dlx wxt@latest init\n","bash","",[142,187,188],{"__ignoreMap":185},[189,190,193,197,201,204],"span",{"class":191,"line":192},"line",1,[189,194,196],{"class":195},"sBMFI","pnpm",[189,198,200],{"class":199},"sfazB"," dlx",[189,202,203],{"class":199}," wxt@latest",[189,205,206],{"class":199}," init\n",[138,208,209],{},"Install any of the packages and use them normally. Everything will just work 👍",[180,211,213],{"className":182,"code":212,"language":184,"meta":185,"style":185},"pnpm i @webext-core/storage\n",[142,214,215],{"__ignoreMap":185},[189,216,217,219,222],{"class":191,"line":192},[189,218,196],{"class":195},[189,220,221],{"class":199}," i",[189,223,224],{"class":199}," @webext-core/storage\n",[180,226,230],{"className":227,"code":228,"language":229,"meta":185,"style":185},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { localExtStorage } from '@webext-core/storage';\n\nconst value = await localExtStorage.getItem('some-key');\n","ts",[142,231,232,264,271],{"__ignoreMap":185},[189,233,234,238,242,246,249,252,255,258,261],{"class":191,"line":192},[189,235,237],{"class":236},"s7zQu","import",[189,239,241],{"class":240},"sMK4o"," {",[189,243,245],{"class":244},"sTEyZ"," localExtStorage",[189,247,248],{"class":240}," }",[189,250,251],{"class":236}," from",[189,253,254],{"class":240}," '",[189,256,257],{"class":199},"@webext-core/storage",[189,259,260],{"class":240},"'",[189,262,263],{"class":240},";\n",[189,265,267],{"class":191,"line":266},2,[189,268,270],{"emptyLinePlaceholder":269},true,"\n",[189,272,274,278,281,284,287,289,291,295,298,300,303,305,308],{"class":191,"line":273},3,[189,275,277],{"class":276},"spNyl","const",[189,279,280],{"class":244}," value ",[189,282,283],{"class":240},"=",[189,285,286],{"class":236}," await",[189,288,245],{"class":244},[189,290,158],{"class":240},[189,292,294],{"class":293},"s2Zo4","getItem",[189,296,297],{"class":244},"(",[189,299,260],{"class":240},[189,301,302],{"class":199},"some-key",[189,304,260],{"class":240},[189,306,307],{"class":244},")",[189,309,263],{"class":240},[133,311,165],{"id":312},"non-bundler-setup",[138,314,315],{},"If you're not using a bundler, you'll have to download each package and put it inside your project.",[317,318,319,323,326,328,329,334,335,337,339],"note",{},[320,321,322],"strong",{},"Why download them?",[324,325],"br",{},[324,327],{},"\nWith Manifest V3, ",[154,330,333],{"href":331,"rel":332},"https://developer.chrome.com/docs/extensions/mv3/intro/mv3-overview/#remotely-hosted-code",[176],"Google doesn't approve of extensions using CDN URLs directly",", considering it \"remotely hosted code\" and a security risk. So you will need to download each package and ship them with your extension.\n",[324,336],{},[324,338],{},"\nIf you're not on MV3 yet, you could use the CDN, but it's still recommended to download it so it loads faster.",[138,341,140,342,344,345,348],{},[142,343,144],{}," NPM packages include a minified, ",[142,346,347],{},"lib/index.global.js"," file that will create a global variable you can use to access the package's APIs.",[138,350,351,352,355,356,358],{},"Lets say you've put all your third-party JS files inside a ",[142,353,354],{},"vendor/"," directory, and want to install the ",[142,357,257],{}," package.",[180,360,365],{"className":361,"code":363,"language":364},[362],"language-text",".\n├─ vendor\n│  └─ jquery.min.js\n└─ manifest.json\n","text",[142,366,363],{"__ignoreMap":185},[138,368,369],{},"You can download the package like so:",[180,371,373],{"className":182,"code":372,"language":184,"meta":185,"style":185},"mkdir -p vendor/webext-core\ncurl -o vendor/webext-core/storage.js https://cdn.jsdelivr.net/npm/@webext-core/storage/lib/index.global.js\n",[142,374,375,386],{"__ignoreMap":185},[189,376,377,380,383],{"class":191,"line":192},[189,378,379],{"class":195},"mkdir",[189,381,382],{"class":199}," -p",[189,384,385],{"class":199}," vendor/webext-core\n",[189,387,388,391,394,397],{"class":191,"line":266},[189,389,390],{"class":195},"curl",[189,392,393],{"class":199}," -o",[189,395,396],{"class":199}," vendor/webext-core/storage.js",[189,398,399],{"class":199}," https://cdn.jsdelivr.net/npm/@webext-core/storage/lib/index.global.js\n",[138,401,402],{},"You project should now look like this:",[180,404,407],{"className":405,"code":406,"language":364},[362],".\n├─ vendor\n│  ├─ jquery.min.js\n│  └─ webext-core\n│     └─ storage.js\n└─ manifest.json\n",[142,408,406],{"__ignoreMap":185},[138,410,411,412,415,416,158],{},"Now you can include the ",[142,413,414],{},"vendor/webext-core/storage.js"," file in your extension! Each package sets up it's own global variable, so refer to the individual docs for that variable's name. In this case, it's ",[142,417,418],{},"webExtCoreStorage",[420,421,423],"h6",{"id":422},"html-files","HTML Files",[180,425,429],{"className":426,"code":427,"language":428,"meta":185,"style":185},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Chead>\n  \u003Cscript src=\"/vendor/webext-core/storage.js\">\u003C/script>\n  \u003Cscript>\n    const { localExtStorage } = webExtCoreStorage;\n\n    const value = await localExtStorage.getItem('some-key');\n  \u003C/script>\n\u003C/head>\n","html",[142,430,431,443,471,479,501,506,535,545],{"__ignoreMap":185},[189,432,433,436,440],{"class":191,"line":192},[189,434,435],{"class":240},"\u003C",[189,437,439],{"class":438},"swJcz","head",[189,441,442],{"class":240},">\n",[189,444,445,448,451,454,456,459,462,464,467,469],{"class":191,"line":266},[189,446,447],{"class":240},"  \u003C",[189,449,450],{"class":438},"script",[189,452,453],{"class":276}," src",[189,455,283],{"class":240},[189,457,458],{"class":240},"\"",[189,460,461],{"class":199},"/vendor/webext-core/storage.js",[189,463,458],{"class":240},[189,465,466],{"class":240},">\u003C/",[189,468,450],{"class":438},[189,470,442],{"class":240},[189,472,473,475,477],{"class":191,"line":273},[189,474,447],{"class":240},[189,476,450],{"class":438},[189,478,442],{"class":240},[189,480,482,485,487,490,493,496,499],{"class":191,"line":481},4,[189,483,484],{"class":276},"    const",[189,486,241],{"class":240},[189,488,489],{"class":244}," localExtStorage ",[189,491,492],{"class":240},"}",[189,494,495],{"class":240}," =",[189,497,498],{"class":244}," webExtCoreStorage",[189,500,263],{"class":240},[189,502,504],{"class":191,"line":503},5,[189,505,270],{"emptyLinePlaceholder":269},[189,507,509,511,513,515,517,519,521,523,525,527,529,531,533],{"class":191,"line":508},6,[189,510,484],{"class":276},[189,512,280],{"class":244},[189,514,283],{"class":240},[189,516,286],{"class":236},[189,518,245],{"class":244},[189,520,158],{"class":240},[189,522,294],{"class":293},[189,524,297],{"class":244},[189,526,260],{"class":240},[189,528,302],{"class":199},[189,530,260],{"class":240},[189,532,307],{"class":244},[189,534,263],{"class":240},[189,536,538,541,543],{"class":191,"line":537},7,[189,539,540],{"class":240},"  \u003C/",[189,542,450],{"class":438},[189,544,442],{"class":240},[189,546,548,551,553],{"class":191,"line":547},8,[189,549,550],{"class":240},"\u003C/",[189,552,439],{"class":438},[189,554,442],{"class":240},[420,556,558],{"id":557},"content-scripts","Content Scripts",[180,560,564],{"className":561,"code":562,"language":563,"meta":185,"style":185},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\"content_scripts\": [{\n  \"matches\": [...],\n  \"js\": [\"vendor/webext-core/storage.js\", \"your-content-script.js\"]\n}]\n","json",[142,565,566,581,603,636],{"__ignoreMap":185},[189,567,568,570,573,575,578],{"class":191,"line":192},[189,569,458],{"class":240},[189,571,572],{"class":199},"content_scripts",[189,574,458],{"class":240},[189,576,577],{"class":244},": ",[189,579,580],{"class":240},"[{\n",[189,582,583,586,589,591,594,597,600],{"class":191,"line":266},[189,584,585],{"class":240},"  \"",[189,587,588],{"class":276},"matches",[189,590,458],{"class":240},[189,592,593],{"class":240},":",[189,595,596],{"class":240}," [",[189,598,599],{"class":244},"...",[189,601,602],{"class":240},"],\n",[189,604,605,607,610,612,614,616,618,620,622,625,628,631,633],{"class":191,"line":273},[189,606,585],{"class":240},[189,608,609],{"class":276},"js",[189,611,458],{"class":240},[189,613,593],{"class":240},[189,615,596],{"class":240},[189,617,458],{"class":240},[189,619,414],{"class":199},[189,621,458],{"class":240},[189,623,624],{"class":240},",",[189,626,627],{"class":240}," \"",[189,629,630],{"class":199},"your-content-script.js",[189,632,458],{"class":240},[189,634,635],{"class":240},"]\n",[189,637,638],{"class":191,"line":481},[189,639,640],{"class":240},"}]\n",[420,642,644],{"id":643},"mv2-background","MV2 Background",[180,646,648],{"className":561,"code":647,"language":563,"meta":185,"style":185},"\"background\": {\n  \"scripts\": [\"vendor/webext-core/storage.js\", \"your-background-script.js\"]\n}\n",[142,649,650,664,694],{"__ignoreMap":185},[189,651,652,654,657,659,661],{"class":191,"line":192},[189,653,458],{"class":240},[189,655,656],{"class":199},"background",[189,658,458],{"class":240},[189,660,577],{"class":244},[189,662,663],{"class":240},"{\n",[189,665,666,668,671,673,675,677,679,681,683,685,687,690,692],{"class":191,"line":266},[189,667,585],{"class":240},[189,669,670],{"class":276},"scripts",[189,672,458],{"class":240},[189,674,593],{"class":240},[189,676,596],{"class":240},[189,678,458],{"class":240},[189,680,414],{"class":199},[189,682,458],{"class":240},[189,684,624],{"class":240},[189,686,627],{"class":240},[189,688,689],{"class":199},"your-background-script.js",[189,691,458],{"class":240},[189,693,635],{"class":240},[189,695,696],{"class":191,"line":273},[189,697,698],{"class":240},"}\n",[420,700,702],{"id":701},"mv3-background","MV3 Background",[138,704,705,706,709],{},"For MV3 background scripts, you need to use a bundler since ",[142,707,708],{},"background.service_worker"," only accepts a single script.",[711,712,713],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}",{"title":185,"searchDepth":266,"depth":266,"links":715},[716,717,718],{"id":135,"depth":266,"text":136},{"id":168,"depth":266,"text":157},{"id":312,"depth":266,"text":165},"Use packages from NPM or download them from a CDN.","md",null,{},{"title":10,"description":719},"PUXhhwzhCDK_RlHR_EjQx_MCkREM9iB_QFjWIqBFLfk",[721,726],{"title":14,"path":15,"stem":16,"description":727,"children":-1},"What browsers do WebExt Core's packages support? All of them.",1779312967449]