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