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