[{"data":1,"prerenderedAt":862},["ShallowReactive",2],{"navigation_docs":3,"-isolated-element-installation":133,"-isolated-element-installation-surround":859},[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":203,"extension":854,"links":855,"meta":856,"navigation":446,"path":57,"seo":857,"stem":58,"__hash__":858},"docs/isolated-element/0.installation.md",{"type":136,"value":137,"toc":846},"minimark",[138,159,164,182,189,192,197,222,260,264,283,363,367,373,389,392,690,695,700,766,770,842],[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,171,181],{},[167,168,169],"code",{},"@webext-core/isolated-element"," uses the ",[172,173,177,180],"a",{"href":174,"rel":175},"https://developer.mozilla.org/en-US/docs/Web/API/Element/shadowRoot",[176],"nofollow",[167,178,179],{},"ShadowRoot"," API"," to create a custom element who's CSS is completely separate from the page it's injected into. It also allows controlling event bubbling from the isolated element to the host page.",[139,183,184,185,188],{},"It will let you load UIs from content scripts without worrying about the page's CSS effecting your UI or events interfering with the host page, no ",[167,186,187],{},"iframe"," needed!",[160,190,28],{"id":191},"installation",[193,194,196],"h6",{"id":195},"npm","NPM",[198,199,204],"pre",{"className":200,"code":201,"language":202,"meta":203,"style":203},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm i @webext-core/isolated-element\n","bash","",[167,205,206],{"__ignoreMap":203},[207,208,211,215,219],"span",{"class":209,"line":210},"line",1,[207,212,214],{"class":213},"sBMFI","pnpm",[207,216,218],{"class":217},"sfazB"," i",[207,220,221],{"class":217}," @webext-core/isolated-element\n",[198,223,227],{"className":224,"code":225,"language":226,"meta":203,"style":203},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { createIsolatedElement } from '@webext-core/isolated-element';\n","ts",[167,228,229],{"__ignoreMap":203},[207,230,231,235,239,243,246,249,252,254,257],{"class":209,"line":210},[207,232,234],{"class":233},"s7zQu","import",[207,236,238],{"class":237},"sMK4o"," {",[207,240,242],{"class":241},"sTEyZ"," createIsolatedElement",[207,244,245],{"class":237}," }",[207,247,248],{"class":233}," from",[207,250,251],{"class":237}," '",[207,253,169],{"class":217},[207,255,256],{"class":237},"'",[207,258,259],{"class":237},";\n",[193,261,263],{"id":262},"cdn","CDN",[198,265,267],{"className":200,"code":266,"language":202,"meta":203,"style":203},"curl -o isolated-element.js https://cdn.jsdelivr.net/npm/@webext-core/isolated-element/lib/index.global.js\n",[167,268,269],{"__ignoreMap":203},[207,270,271,274,277,280],{"class":209,"line":210},[207,272,273],{"class":213},"curl",[207,275,276],{"class":217}," -o",[207,278,279],{"class":217}," isolated-element.js",[207,281,282],{"class":217}," https://cdn.jsdelivr.net/npm/@webext-core/isolated-element/lib/index.global.js\n",[198,284,288],{"className":285,"code":286,"language":287,"meta":203,"style":203},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript src=\"/isolated-element.js\">\u003C/script>\n\u003Cscript>\n  const { createIsolatedElement } = webExtCoreIsolatedElement;\n\u003C/script>\n","html",[167,289,290,322,331,353],{"__ignoreMap":203},[207,291,292,295,299,303,306,309,312,314,317,319],{"class":209,"line":210},[207,293,294],{"class":237},"\u003C",[207,296,298],{"class":297},"swJcz","script",[207,300,302],{"class":301},"spNyl"," src",[207,304,305],{"class":237},"=",[207,307,308],{"class":237},"\"",[207,310,311],{"class":217},"/isolated-element.js",[207,313,308],{"class":237},[207,315,316],{"class":237},">\u003C/",[207,318,298],{"class":297},[207,320,321],{"class":237},">\n",[207,323,325,327,329],{"class":209,"line":324},2,[207,326,294],{"class":237},[207,328,298],{"class":297},[207,330,321],{"class":237},[207,332,334,337,339,342,345,348,351],{"class":209,"line":333},3,[207,335,336],{"class":301},"  const",[207,338,238],{"class":237},[207,340,341],{"class":241}," createIsolatedElement ",[207,343,344],{"class":237},"}",[207,346,347],{"class":237}," =",[207,349,350],{"class":241}," webExtCoreIsolatedElement",[207,352,259],{"class":237},[207,354,356,359,361],{"class":209,"line":355},4,[207,357,358],{"class":237},"\u003C/",[207,360,298],{"class":297},[207,362,321],{"class":237},[160,364,366],{"id":365},"usage","Usage",[139,368,369,372],{},[167,370,371],{},"createIsolatedElement"," returns two elements:",[374,375,376,383],"ul",{},[377,378,379,382],"li",{},[167,380,381],{},"parentElement"," needs to be added to the DOM where you want your UI to show up.",[377,384,385,388],{},[167,386,387],{},"isolatedElement"," is where you should mount your UI.",[139,390,391],{},"Here, we're creating the UI using vanilla JS.",[198,393,395],{"className":224,"code":394,"language":226,"meta":203,"style":203},"// content-script.ts\nimport { createIsolatedElement } from '@webext-core/isolated-element';\nimport browser from 'webextension-polyfill';\n\nconst { parentElement, isolatedElement } = await createIsolatedElement({\n  name: 'some-name',\n  css: {\n    url: browser.runtime.getURL('/path/to/styles.css'),\n  },\n  isolateEvents: true, // or array of event names to isolate, e.g., ['click', 'keydown']\n});\n\n// Mount our UI inside the isolated element\nconst ui = document.createElement('div');\nui.textContent = 'Isolated text';\nisolatedElement.appendChild(ui);\n\n// Add the UI to the DOM\ndocument.body.append(parentElement);\n",[167,396,397,403,423,442,448,481,500,511,547,553,570,579,584,590,621,643,658,663,669],{"__ignoreMap":203},[207,398,399],{"class":209,"line":210},[207,400,402],{"class":401},"sHwdD","// content-script.ts\n",[207,404,405,407,409,411,413,415,417,419,421],{"class":209,"line":324},[207,406,234],{"class":233},[207,408,238],{"class":237},[207,410,242],{"class":241},[207,412,245],{"class":237},[207,414,248],{"class":233},[207,416,251],{"class":237},[207,418,169],{"class":217},[207,420,256],{"class":237},[207,422,259],{"class":237},[207,424,425,427,430,433,435,438,440],{"class":209,"line":333},[207,426,234],{"class":233},[207,428,429],{"class":241}," browser ",[207,431,432],{"class":233},"from",[207,434,251],{"class":237},[207,436,437],{"class":217},"webextension-polyfill",[207,439,256],{"class":237},[207,441,259],{"class":237},[207,443,444],{"class":209,"line":355},[207,445,447],{"emptyLinePlaceholder":446},true,"\n",[207,449,451,454,456,459,462,465,467,469,472,475,478],{"class":209,"line":450},5,[207,452,453],{"class":301},"const",[207,455,238],{"class":237},[207,457,458],{"class":241}," parentElement",[207,460,461],{"class":237},",",[207,463,464],{"class":241}," isolatedElement ",[207,466,344],{"class":237},[207,468,347],{"class":237},[207,470,471],{"class":233}," await",[207,473,242],{"class":474},"s2Zo4",[207,476,477],{"class":241},"(",[207,479,480],{"class":237},"{\n",[207,482,484,487,490,492,495,497],{"class":209,"line":483},6,[207,485,486],{"class":297},"  name",[207,488,489],{"class":237},":",[207,491,251],{"class":237},[207,493,494],{"class":217},"some-name",[207,496,256],{"class":237},[207,498,499],{"class":237},",\n",[207,501,503,506,508],{"class":209,"line":502},7,[207,504,505],{"class":297},"  css",[207,507,489],{"class":237},[207,509,510],{"class":237}," {\n",[207,512,514,517,519,522,525,528,530,533,535,537,540,542,545],{"class":209,"line":513},8,[207,515,516],{"class":297},"    url",[207,518,489],{"class":237},[207,520,521],{"class":241}," browser",[207,523,524],{"class":237},".",[207,526,527],{"class":241},"runtime",[207,529,524],{"class":237},[207,531,532],{"class":474},"getURL",[207,534,477],{"class":241},[207,536,256],{"class":237},[207,538,539],{"class":217},"/path/to/styles.css",[207,541,256],{"class":237},[207,543,544],{"class":241},")",[207,546,499],{"class":237},[207,548,550],{"class":209,"line":549},9,[207,551,552],{"class":237},"  },\n",[207,554,556,559,561,565,567],{"class":209,"line":555},10,[207,557,558],{"class":297},"  isolateEvents",[207,560,489],{"class":237},[207,562,564],{"class":563},"sfNiH"," true",[207,566,461],{"class":237},[207,568,569],{"class":401}," // or array of event names to isolate, e.g., ['click', 'keydown']\n",[207,571,573,575,577],{"class":209,"line":572},11,[207,574,344],{"class":237},[207,576,544],{"class":241},[207,578,259],{"class":237},[207,580,582],{"class":209,"line":581},12,[207,583,447],{"emptyLinePlaceholder":446},[207,585,587],{"class":209,"line":586},13,[207,588,589],{"class":401},"// Mount our UI inside the isolated element\n",[207,591,593,595,598,600,603,605,608,610,612,615,617,619],{"class":209,"line":592},14,[207,594,453],{"class":301},[207,596,597],{"class":241}," ui ",[207,599,305],{"class":237},[207,601,602],{"class":241}," document",[207,604,524],{"class":237},[207,606,607],{"class":474},"createElement",[207,609,477],{"class":241},[207,611,256],{"class":237},[207,613,614],{"class":217},"div",[207,616,256],{"class":237},[207,618,544],{"class":241},[207,620,259],{"class":237},[207,622,624,627,629,632,634,636,639,641],{"class":209,"line":623},15,[207,625,626],{"class":241},"ui",[207,628,524],{"class":237},[207,630,631],{"class":241},"textContent ",[207,633,305],{"class":237},[207,635,251],{"class":237},[207,637,638],{"class":217},"Isolated text",[207,640,256],{"class":237},[207,642,259],{"class":237},[207,644,646,648,650,653,656],{"class":209,"line":645},16,[207,647,387],{"class":241},[207,649,524],{"class":237},[207,651,652],{"class":474},"appendChild",[207,654,655],{"class":241},"(ui)",[207,657,259],{"class":237},[207,659,661],{"class":209,"line":660},17,[207,662,447],{"emptyLinePlaceholder":446},[207,664,666],{"class":209,"line":665},18,[207,667,668],{"class":401},"// Add the UI to the DOM\n",[207,670,672,675,677,680,682,685,688],{"class":209,"line":671},19,[207,673,674],{"class":241},"document",[207,676,524],{"class":237},[207,678,679],{"class":241},"body",[207,681,524],{"class":237},[207,683,684],{"class":474},"append",[207,686,687],{"class":241},"(parentElement)",[207,689,259],{"class":237},[139,691,692,693,489],{},"Here's a couple of other ways to mount your UI inside the ",[167,694,387],{},[696,697,699],"h3",{"id":698},"vue","Vue",[198,701,703],{"className":224,"code":702,"language":226,"meta":203,"style":203},"import { createApp } from 'vue';\nimport App from './App.vue';\n\ncreateApp(App).mount(isolatedElement);\n",[167,704,705,726,744,748],{"__ignoreMap":203},[207,706,707,709,711,714,716,718,720,722,724],{"class":209,"line":210},[207,708,234],{"class":233},[207,710,238],{"class":237},[207,712,713],{"class":241}," createApp",[207,715,245],{"class":237},[207,717,248],{"class":233},[207,719,251],{"class":237},[207,721,698],{"class":217},[207,723,256],{"class":237},[207,725,259],{"class":237},[207,727,728,730,733,735,737,740,742],{"class":209,"line":324},[207,729,234],{"class":233},[207,731,732],{"class":241}," App ",[207,734,432],{"class":233},[207,736,251],{"class":237},[207,738,739],{"class":217},"./App.vue",[207,741,256],{"class":237},[207,743,259],{"class":237},[207,745,746],{"class":209,"line":333},[207,747,447],{"emptyLinePlaceholder":446},[207,749,750,753,756,758,761,764],{"class":209,"line":355},[207,751,752],{"class":474},"createApp",[207,754,755],{"class":241},"(App)",[207,757,524],{"class":237},[207,759,760],{"class":474},"mount",[207,762,763],{"class":241},"(isolatedElement)",[207,765,259],{"class":237},[696,767,769],{"id":768},"react","React",[198,771,773],{"className":224,"code":772,"language":226,"meta":203,"style":203},"import ReactDOM from 'react-dom';\nimport App from './App.tsx';\n\nReactDOM.createRoot(isolatedElement).render(\u003CApp />);\n",[167,774,775,793,810,814],{"__ignoreMap":203},[207,776,777,779,782,784,786,789,791],{"class":209,"line":210},[207,778,234],{"class":233},[207,780,781],{"class":241}," ReactDOM ",[207,783,432],{"class":233},[207,785,251],{"class":237},[207,787,788],{"class":217},"react-dom",[207,790,256],{"class":237},[207,792,259],{"class":237},[207,794,795,797,799,801,803,806,808],{"class":209,"line":324},[207,796,234],{"class":233},[207,798,732],{"class":241},[207,800,432],{"class":233},[207,802,251],{"class":237},[207,804,805],{"class":217},"./App.tsx",[207,807,256],{"class":237},[207,809,259],{"class":237},[207,811,812],{"class":209,"line":333},[207,813,447],{"emptyLinePlaceholder":446},[207,815,816,819,821,824,826,828,831,834,837,840],{"class":209,"line":355},[207,817,818],{"class":241},"ReactDOM",[207,820,524],{"class":237},[207,822,823],{"class":474},"createRoot",[207,825,763],{"class":241},[207,827,524],{"class":237},[207,829,830],{"class":474},"render",[207,832,833],{"class":241},"(\u003C",[207,835,836],{"class":213},"App",[207,838,839],{"class":241}," />)",[207,841,259],{"class":237},[843,844,845],"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 .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":203,"searchDepth":324,"depth":324,"links":847},[848,849,850],{"id":162,"depth":324,"text":163},{"id":191,"depth":324,"text":28},{"id":365,"depth":324,"text":366,"children":851},[852,853],{"id":698,"depth":333,"text":699},{"id":768,"depth":333,"text":769},"md",null,{},{"title":28,"description":203},"ZS0hiiSUjlAMvmNGGTQAgbJd-HpV7QB49y1xYSVE2co",[860,861],{"title":48,"path":49,"stem":50,"description":203,"children":-1},{"title":48,"path":60,"stem":61,"description":203,"children":-1},1779298646816]