[{"data":1,"prerenderedAt":1661},["ShallowReactive",2],{"navigation_docs":3,"-messaging-installation":127,"-messaging-installation-surround":1658},[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":190,"extension":1653,"links":1654,"meta":1655,"navigation":461,"path":90,"seo":1656,"stem":91,"__hash__":1657},"docs/messaging/0.installation.md",{"type":130,"value":131,"toc":1645},"minimark",[132,153,158,165,176,179,184,209,247,251,270,350,354,357,408,419,430,538,544,725,730,737,748,936,940,958,1234,1254,1265,1272,1275,1641],[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],{},[161,162,163],"code",{},"@webext-core/messaging"," a simplified, type-safe wrapper around the web extension messaging APIs. It also provides a similar interface for communicating with web pages or injected scripts.",[166,167,168,169,175],"alert",{},"Don't like lower-level messaging APIs? Try out ",[170,171,172],"a",{"href":105},[161,173,174],{},"@webext-core/proxy-service"," for a more DX-friendly approach to executing code in the background script.",[154,177,28],{"id":178},"installation",[180,181,183],"h6",{"id":182},"npm","NPM",[185,186,191],"pre",{"className":187,"code":188,"language":189,"meta":190,"style":190},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm i @webext-core/messaging\n","bash","",[161,192,193],{"__ignoreMap":190},[194,195,198,202,206],"span",{"class":196,"line":197},"line",1,[194,199,201],{"class":200},"sBMFI","pnpm",[194,203,205],{"class":204},"sfazB"," i",[194,207,208],{"class":204}," @webext-core/messaging\n",[185,210,214],{"className":211,"code":212,"language":213,"meta":190,"style":190},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { defineExtensionMessaging } from '@webext-core/messaging';\n","ts",[161,215,216],{"__ignoreMap":190},[194,217,218,222,226,230,233,236,239,241,244],{"class":196,"line":197},[194,219,221],{"class":220},"s7zQu","import",[194,223,225],{"class":224},"sMK4o"," {",[194,227,229],{"class":228},"sTEyZ"," defineExtensionMessaging",[194,231,232],{"class":224}," }",[194,234,235],{"class":220}," from",[194,237,238],{"class":224}," '",[194,240,163],{"class":204},[194,242,243],{"class":224},"'",[194,245,246],{"class":224},";\n",[180,248,250],{"id":249},"cdn","CDN",[185,252,254],{"className":187,"code":253,"language":189,"meta":190,"style":190},"curl -o messaging.js https://cdn.jsdelivr.net/npm/@webext-core/messaging/lib/index.global.js\n",[161,255,256],{"__ignoreMap":190},[194,257,258,261,264,267],{"class":196,"line":197},[194,259,260],{"class":200},"curl",[194,262,263],{"class":204}," -o",[194,265,266],{"class":204}," messaging.js",[194,268,269],{"class":204}," https://cdn.jsdelivr.net/npm/@webext-core/messaging/lib/index.global.js\n",[185,271,275],{"className":272,"code":273,"language":274,"meta":190,"style":190},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript src=\"/messaging.js\">\u003C/script>\n\u003Cscript>\n  const { defineExtensionMessaging } = webExtCoreMessaging;\n\u003C/script>\n","html",[161,276,277,309,318,340],{"__ignoreMap":190},[194,278,279,282,286,290,293,296,299,301,304,306],{"class":196,"line":197},[194,280,281],{"class":224},"\u003C",[194,283,285],{"class":284},"swJcz","script",[194,287,289],{"class":288},"spNyl"," src",[194,291,292],{"class":224},"=",[194,294,295],{"class":224},"\"",[194,297,298],{"class":204},"/messaging.js",[194,300,295],{"class":224},[194,302,303],{"class":224},">\u003C/",[194,305,285],{"class":284},[194,307,308],{"class":224},">\n",[194,310,312,314,316],{"class":196,"line":311},2,[194,313,281],{"class":224},[194,315,285],{"class":284},[194,317,308],{"class":224},[194,319,321,324,326,329,332,335,338],{"class":196,"line":320},3,[194,322,323],{"class":288},"  const",[194,325,225],{"class":224},[194,327,328],{"class":228}," defineExtensionMessaging ",[194,330,331],{"class":224},"}",[194,333,334],{"class":224}," =",[194,336,337],{"class":228}," webExtCoreMessaging",[194,339,246],{"class":224},[194,341,343,346,348],{"class":196,"line":342},4,[194,344,345],{"class":224},"\u003C/",[194,347,285],{"class":284},[194,349,308],{"class":224},[154,351,353],{"id":352},"basic-usage","Basic Usage",[133,355,356],{},"First, define a protocol map:",[358,359,360],"code-group",{},[185,361,364],{"className":211,"code":362,"filename":363,"language":213,"meta":190,"style":190},"interface ProtocolMap {\n  getStringLength(data: string): number;\n}\n","messaging.ts",[161,365,366,377,403],{"__ignoreMap":190},[194,367,368,371,374],{"class":196,"line":197},[194,369,370],{"class":288},"interface",[194,372,373],{"class":200}," ProtocolMap",[194,375,376],{"class":224}," {\n",[194,378,379,382,385,389,392,395,398,401],{"class":196,"line":311},[194,380,381],{"class":284},"  getStringLength",[194,383,384],{"class":224},"(",[194,386,388],{"class":387},"sHdIc","data",[194,390,391],{"class":224},":",[194,393,394],{"class":200}," string",[194,396,397],{"class":224},"):",[194,399,400],{"class":200}," number",[194,402,246],{"class":224},[194,404,405],{"class":196,"line":320},[194,406,407],{"class":224},"}\n",[133,409,410,411,414,415,418],{},"Then call ",[161,412,413],{},"defineExtensionMessaging",", passing your ",[161,416,417],{},"ProtocolMap"," as the first type parameter.",[133,420,421,422,425,426,429],{},"Export the ",[161,423,424],{},"sendMessage"," and ",[161,427,428],{},"onMessage"," methods. These are what the rest of your extension will use to pass messages around.",[358,431,432],{},[185,433,435],{"className":211,"code":434,"filename":363,"language":213,"meta":190,"style":190},"import { defineExtensionMessaging } from '@webext-core/messaging';\n\ninterface ProtocolMap {\n  getStringLength(data: string): number;\n}\n\nexport const { sendMessage, onMessage } = defineExtensionMessaging\u003CProtocolMap>();\n",[161,436,437,457,463,471,489,494,499],{"__ignoreMap":190},[194,438,439,441,443,445,447,449,451,453,455],{"class":196,"line":197},[194,440,221],{"class":220},[194,442,225],{"class":224},[194,444,229],{"class":228},[194,446,232],{"class":224},[194,448,235],{"class":220},[194,450,238],{"class":224},[194,452,163],{"class":204},[194,454,243],{"class":224},[194,456,246],{"class":224},[194,458,459],{"class":196,"line":311},[194,460,462],{"emptyLinePlaceholder":461},true,"\n",[194,464,465,467,469],{"class":196,"line":320},[194,466,370],{"class":288},[194,468,373],{"class":200},[194,470,376],{"class":224},[194,472,473,475,477,479,481,483,485,487],{"class":196,"line":342},[194,474,381],{"class":284},[194,476,384],{"class":224},[194,478,388],{"class":387},[194,480,391],{"class":224},[194,482,394],{"class":200},[194,484,397],{"class":224},[194,486,400],{"class":200},[194,488,246],{"class":224},[194,490,492],{"class":196,"line":491},5,[194,493,407],{"class":224},[194,495,497],{"class":196,"line":496},6,[194,498,462],{"emptyLinePlaceholder":461},[194,500,502,505,508,510,513,516,519,521,523,526,528,530,533,536],{"class":196,"line":501},7,[194,503,504],{"class":220},"export",[194,506,507],{"class":288}," const",[194,509,225],{"class":224},[194,511,512],{"class":228}," sendMessage",[194,514,515],{"class":224},",",[194,517,518],{"class":228}," onMessage ",[194,520,331],{"class":224},[194,522,334],{"class":224},[194,524,229],{"class":525},"s2Zo4",[194,527,281],{"class":224},[194,529,417],{"class":200},[194,531,532],{"class":224},">",[194,534,535],{"class":228},"()",[194,537,246],{"class":224},[133,539,540,541,543],{},"Usually the ",[161,542,428],{}," function will be used in the background and messages will be sent from other parts of the extension.",[358,545,546,635],{},[185,547,550],{"className":211,"code":548,"filename":549,"language":213,"meta":190,"style":190},"import { onMessage } from './messaging';\n\nonMessage('getStringLength', (message) => {\n  return message.data.length;\n});\n","background.ts",[161,551,552,574,578,607,627],{"__ignoreMap":190},[194,553,554,556,558,561,563,565,567,570,572],{"class":196,"line":197},[194,555,221],{"class":220},[194,557,225],{"class":224},[194,559,560],{"class":228}," onMessage",[194,562,232],{"class":224},[194,564,235],{"class":220},[194,566,238],{"class":224},[194,568,569],{"class":204},"./messaging",[194,571,243],{"class":224},[194,573,246],{"class":224},[194,575,576],{"class":196,"line":311},[194,577,462],{"emptyLinePlaceholder":461},[194,579,580,582,584,586,589,591,593,596,599,602,605],{"class":196,"line":320},[194,581,428],{"class":525},[194,583,384],{"class":228},[194,585,243],{"class":224},[194,587,588],{"class":204},"getStringLength",[194,590,243],{"class":224},[194,592,515],{"class":224},[194,594,595],{"class":224}," (",[194,597,598],{"class":387},"message",[194,600,601],{"class":224},")",[194,603,604],{"class":288}," =>",[194,606,376],{"class":224},[194,608,609,612,615,618,620,622,625],{"class":196,"line":342},[194,610,611],{"class":220},"  return",[194,613,614],{"class":228}," message",[194,616,617],{"class":224},".",[194,619,388],{"class":228},[194,621,617],{"class":224},[194,623,624],{"class":228},"length",[194,626,246],{"class":224},[194,628,629,631,633],{"class":196,"line":491},[194,630,331],{"class":224},[194,632,601],{"class":228},[194,634,246],{"class":224},[185,636,639],{"className":211,"code":637,"filename":638,"language":213,"meta":190,"style":190},"import { sendMessage } from './messaging';\n\nconst length = await sendMessage('getStringLength', 'hello world');\n\nconsole.log(length); // 11\n","content-script.ts",[161,640,641,661,665,701,705],{"__ignoreMap":190},[194,642,643,645,647,649,651,653,655,657,659],{"class":196,"line":197},[194,644,221],{"class":220},[194,646,225],{"class":224},[194,648,512],{"class":228},[194,650,232],{"class":224},[194,652,235],{"class":220},[194,654,238],{"class":224},[194,656,569],{"class":204},[194,658,243],{"class":224},[194,660,246],{"class":224},[194,662,663],{"class":196,"line":311},[194,664,462],{"emptyLinePlaceholder":461},[194,666,667,670,673,675,678,680,682,684,686,688,690,692,695,697,699],{"class":196,"line":320},[194,668,669],{"class":288},"const",[194,671,672],{"class":228}," length ",[194,674,292],{"class":224},[194,676,677],{"class":220}," await",[194,679,512],{"class":525},[194,681,384],{"class":228},[194,683,243],{"class":224},[194,685,588],{"class":204},[194,687,243],{"class":224},[194,689,515],{"class":224},[194,691,238],{"class":224},[194,693,694],{"class":204},"hello world",[194,696,243],{"class":224},[194,698,601],{"class":228},[194,700,246],{"class":224},[194,702,703],{"class":196,"line":342},[194,704,462],{"emptyLinePlaceholder":461},[194,706,707,710,712,715,718,721],{"class":196,"line":491},[194,708,709],{"class":228},"console",[194,711,617],{"class":224},[194,713,714],{"class":525},"log",[194,716,717],{"class":228},"(length)",[194,719,720],{"class":224},";",[194,722,724],{"class":723},"sHwdD"," // 11\n",[726,727,729],"h3",{"id":728},"sending-messages-to-tabs","Sending Messages to Tabs",[133,731,732,733,736],{},"You can also send messages from your background script to a tab, but you need to know the ",[161,734,735],{},"tabId",". This would send the message to all frames in the tab.",[133,738,739,740,742,743,425,745,617],{},"If you want to send a message to a specific frame, you can pass an object to ",[161,741,424],{}," with the ",[161,744,735],{},[161,746,747],{},"frameId",[358,749,750,826],{},[185,751,752],{"className":211,"code":548,"filename":638,"language":213,"meta":190,"style":190},[161,753,754,774,778,802,818],{"__ignoreMap":190},[194,755,756,758,760,762,764,766,768,770,772],{"class":196,"line":197},[194,757,221],{"class":220},[194,759,225],{"class":224},[194,761,560],{"class":228},[194,763,232],{"class":224},[194,765,235],{"class":220},[194,767,238],{"class":224},[194,769,569],{"class":204},[194,771,243],{"class":224},[194,773,246],{"class":224},[194,775,776],{"class":196,"line":311},[194,777,462],{"emptyLinePlaceholder":461},[194,779,780,782,784,786,788,790,792,794,796,798,800],{"class":196,"line":320},[194,781,428],{"class":525},[194,783,384],{"class":228},[194,785,243],{"class":224},[194,787,588],{"class":204},[194,789,243],{"class":224},[194,791,515],{"class":224},[194,793,595],{"class":224},[194,795,598],{"class":387},[194,797,601],{"class":224},[194,799,604],{"class":288},[194,801,376],{"class":224},[194,803,804,806,808,810,812,814,816],{"class":196,"line":342},[194,805,611],{"class":220},[194,807,614],{"class":228},[194,809,617],{"class":224},[194,811,388],{"class":228},[194,813,617],{"class":224},[194,815,624],{"class":228},[194,817,246],{"class":224},[194,819,820,822,824],{"class":196,"line":491},[194,821,331],{"class":224},[194,823,601],{"class":228},[194,825,246],{"class":224},[185,827,829],{"className":211,"code":828,"filename":549,"language":213,"meta":190,"style":190},"import { sendMessage } from './messaging';\n\nconst length = await sendMessage('getStringLength', 'hello world', tabId);\nconst length = await sendMessage('getStringLength', 'hello world', { tabId, frameId });\n",[161,830,831,851,855,890],{"__ignoreMap":190},[194,832,833,835,837,839,841,843,845,847,849],{"class":196,"line":197},[194,834,221],{"class":220},[194,836,225],{"class":224},[194,838,512],{"class":228},[194,840,232],{"class":224},[194,842,235],{"class":220},[194,844,238],{"class":224},[194,846,569],{"class":204},[194,848,243],{"class":224},[194,850,246],{"class":224},[194,852,853],{"class":196,"line":311},[194,854,462],{"emptyLinePlaceholder":461},[194,856,857,859,861,863,865,867,869,871,873,875,877,879,881,883,885,888],{"class":196,"line":320},[194,858,669],{"class":288},[194,860,672],{"class":228},[194,862,292],{"class":224},[194,864,677],{"class":220},[194,866,512],{"class":525},[194,868,384],{"class":228},[194,870,243],{"class":224},[194,872,588],{"class":204},[194,874,243],{"class":224},[194,876,515],{"class":224},[194,878,238],{"class":224},[194,880,694],{"class":204},[194,882,243],{"class":224},[194,884,515],{"class":224},[194,886,887],{"class":228}," tabId)",[194,889,246],{"class":224},[194,891,892,894,896,898,900,902,904,906,908,910,912,914,916,918,920,922,925,927,930,932,934],{"class":196,"line":342},[194,893,669],{"class":288},[194,895,672],{"class":228},[194,897,292],{"class":224},[194,899,677],{"class":220},[194,901,512],{"class":525},[194,903,384],{"class":228},[194,905,243],{"class":224},[194,907,588],{"class":204},[194,909,243],{"class":224},[194,911,515],{"class":224},[194,913,238],{"class":224},[194,915,694],{"class":204},[194,917,243],{"class":224},[194,919,515],{"class":224},[194,921,225],{"class":224},[194,923,924],{"class":228}," tabId",[194,926,515],{"class":224},[194,928,929],{"class":228}," frameId ",[194,931,331],{"class":224},[194,933,601],{"class":228},[194,935,246],{"class":224},[154,937,939],{"id":938},"window-messaging","Window Messaging",[133,941,942,943,946,947,950,951,425,954,957],{},"Inside a content script, you may need to communicate with a webpage or an injected script running in the page's JS context. In this case, you can use ",[161,944,945],{},"defineWindowMessenger"," or ",[161,948,949],{},"defineCustomEventMessenger",", which use the ",[161,952,953],{},"window.postMessage",[161,955,956],{},"CustomEvent"," APIs respectively.",[358,959,960,1105],{},[185,961,964],{"className":211,"code":962,"filename":963,"language":213,"meta":190,"style":190},"import { defineWindowMessaging } from '@webext-core/messaging/page';\n\nexport interface WebsiteMessengerSchema {\n  init(data: unknown): void;\n  somethingHappened(data: unknown): void;\n}\n\nexport const websiteMessenger = defineWindowMessaging\u003CWebsiteMessengerSchema>({\n  namespace: '\u003Csome-unique-string>',\n});\n","Window",[161,965,966,988,992,1004,1025,1044,1048,1052,1078,1096],{"__ignoreMap":190},[194,967,968,970,972,975,977,979,981,984,986],{"class":196,"line":197},[194,969,221],{"class":220},[194,971,225],{"class":224},[194,973,974],{"class":228}," defineWindowMessaging",[194,976,232],{"class":224},[194,978,235],{"class":220},[194,980,238],{"class":224},[194,982,983],{"class":204},"@webext-core/messaging/page",[194,985,243],{"class":224},[194,987,246],{"class":224},[194,989,990],{"class":196,"line":311},[194,991,462],{"emptyLinePlaceholder":461},[194,993,994,996,999,1002],{"class":196,"line":320},[194,995,504],{"class":220},[194,997,998],{"class":288}," interface",[194,1000,1001],{"class":200}," WebsiteMessengerSchema",[194,1003,376],{"class":224},[194,1005,1006,1009,1011,1013,1015,1018,1020,1023],{"class":196,"line":342},[194,1007,1008],{"class":284},"  init",[194,1010,384],{"class":224},[194,1012,388],{"class":387},[194,1014,391],{"class":224},[194,1016,1017],{"class":200}," unknown",[194,1019,397],{"class":224},[194,1021,1022],{"class":200}," void",[194,1024,246],{"class":224},[194,1026,1027,1030,1032,1034,1036,1038,1040,1042],{"class":196,"line":491},[194,1028,1029],{"class":284},"  somethingHappened",[194,1031,384],{"class":224},[194,1033,388],{"class":387},[194,1035,391],{"class":224},[194,1037,1017],{"class":200},[194,1039,397],{"class":224},[194,1041,1022],{"class":200},[194,1043,246],{"class":224},[194,1045,1046],{"class":196,"line":496},[194,1047,407],{"class":224},[194,1049,1050],{"class":196,"line":501},[194,1051,462],{"emptyLinePlaceholder":461},[194,1053,1055,1057,1059,1062,1064,1066,1068,1071,1073,1075],{"class":196,"line":1054},8,[194,1056,504],{"class":220},[194,1058,507],{"class":288},[194,1060,1061],{"class":228}," websiteMessenger ",[194,1063,292],{"class":224},[194,1065,974],{"class":525},[194,1067,281],{"class":224},[194,1069,1070],{"class":200},"WebsiteMessengerSchema",[194,1072,532],{"class":224},[194,1074,384],{"class":228},[194,1076,1077],{"class":224},"{\n",[194,1079,1081,1084,1086,1088,1091,1093],{"class":196,"line":1080},9,[194,1082,1083],{"class":284},"  namespace",[194,1085,391],{"class":224},[194,1087,238],{"class":224},[194,1089,1090],{"class":204},"\u003Csome-unique-string>",[194,1092,243],{"class":224},[194,1094,1095],{"class":224},",\n",[194,1097,1099,1101,1103],{"class":196,"line":1098},10,[194,1100,331],{"class":224},[194,1102,601],{"class":228},[194,1104,246],{"class":224},[185,1106,1109],{"className":211,"code":1107,"filename":1108,"language":213,"meta":190,"style":190},"import { defineCustomEventMessaging } from '@webext-core/messaging/page';\n\nexport interface WebsiteMessengerSchema {\n  init(data: unknown): void;\n  somethingHappened(data: unknown): void;\n}\n\nexport const websiteMessenger = defineCustomEventMessaging\u003CWebsiteMessengerSchema>({\n  namespace: '\u003Csome-unique-string>',\n});\n","Custom Event",[161,1110,1111,1132,1136,1146,1164,1182,1186,1190,1212,1226],{"__ignoreMap":190},[194,1112,1113,1115,1117,1120,1122,1124,1126,1128,1130],{"class":196,"line":197},[194,1114,221],{"class":220},[194,1116,225],{"class":224},[194,1118,1119],{"class":228}," defineCustomEventMessaging",[194,1121,232],{"class":224},[194,1123,235],{"class":220},[194,1125,238],{"class":224},[194,1127,983],{"class":204},[194,1129,243],{"class":224},[194,1131,246],{"class":224},[194,1133,1134],{"class":196,"line":311},[194,1135,462],{"emptyLinePlaceholder":461},[194,1137,1138,1140,1142,1144],{"class":196,"line":320},[194,1139,504],{"class":220},[194,1141,998],{"class":288},[194,1143,1001],{"class":200},[194,1145,376],{"class":224},[194,1147,1148,1150,1152,1154,1156,1158,1160,1162],{"class":196,"line":342},[194,1149,1008],{"class":284},[194,1151,384],{"class":224},[194,1153,388],{"class":387},[194,1155,391],{"class":224},[194,1157,1017],{"class":200},[194,1159,397],{"class":224},[194,1161,1022],{"class":200},[194,1163,246],{"class":224},[194,1165,1166,1168,1170,1172,1174,1176,1178,1180],{"class":196,"line":491},[194,1167,1029],{"class":284},[194,1169,384],{"class":224},[194,1171,388],{"class":387},[194,1173,391],{"class":224},[194,1175,1017],{"class":200},[194,1177,397],{"class":224},[194,1179,1022],{"class":200},[194,1181,246],{"class":224},[194,1183,1184],{"class":196,"line":496},[194,1185,407],{"class":224},[194,1187,1188],{"class":196,"line":501},[194,1189,462],{"emptyLinePlaceholder":461},[194,1191,1192,1194,1196,1198,1200,1202,1204,1206,1208,1210],{"class":196,"line":1054},[194,1193,504],{"class":220},[194,1195,507],{"class":288},[194,1197,1061],{"class":228},[194,1199,292],{"class":224},[194,1201,1119],{"class":525},[194,1203,281],{"class":224},[194,1205,1070],{"class":200},[194,1207,532],{"class":224},[194,1209,384],{"class":228},[194,1211,1077],{"class":224},[194,1213,1214,1216,1218,1220,1222,1224],{"class":196,"line":1080},[194,1215,1083],{"class":284},[194,1217,391],{"class":224},[194,1219,238],{"class":224},[194,1221,1090],{"class":204},[194,1223,243],{"class":224},[194,1225,1095],{"class":224},[194,1227,1228,1230,1232],{"class":196,"line":1098},[194,1229,331],{"class":224},[194,1231,601],{"class":228},[194,1233,246],{"class":224},[1235,1236,1237,1241,1244,1246,1247,1250,1251,617],"note",{},[1238,1239,1240],"strong",{},"Which one should I use?",[1242,1243],"br",{},[1242,1245],{},"\nIn general, if you don't need to communicate with iframes, use ",[161,1248,1249],{},"defineCustomEventMessaging",". If you need to communicate with iframes, use ",[161,1252,1253],{},"defineWindowMessaging",[133,1255,1256,1257,1260,1261,1264],{},"Note the namespace option. Only messengers of the same type (window vs custom event) and same namespace will communicate. This prevents accidentally reacting to messages from the page or from another extension. Usually, it should be a unique string for your extension. The easiest method is to set it to ",[161,1258,1259],{},"browser.runtime.id",", but if you're injecting a script, ",[161,1262,1263],{},"webextension-polyfill"," will not be available in the page context and you'll have to use something else or hardcode the extension's ID.",[133,1266,1267,1268,425,1270,617],{},"The messenger object can be used in the same way as the extension messenger, with ",[161,1269,424],{},[161,1271,428],{},[133,1273,1274],{},"Here, we're injecting a script, initializing it with data, and allowing the script to send data back to our content script.",[358,1276,1277,1503],{},[185,1278,1281],{"className":211,"code":1279,"filename":1280,"language":213,"meta":190,"style":190},"import { websiteMessenger } from './website-messaging';\n\nconst script = document.createElement('script');\nscript.src = browser.runtime.getURL('/path/to/injected.js');\ndocument.head.appendChild(script);\n\nscript.onload = () => {\n  websiteMessenger.sendMessage('init', { ... });\n};\n\nwebsiteMessenger.onMessage('somethingHappened', (data) => {\n  // React to messages from the injected script\n});\n","Content Script",[161,1282,1283,1305,1309,1338,1375,1395,1399,1417,1448,1453,1457,1488,1494],{"__ignoreMap":190},[194,1284,1285,1287,1289,1292,1294,1296,1298,1301,1303],{"class":196,"line":197},[194,1286,221],{"class":220},[194,1288,225],{"class":224},[194,1290,1291],{"class":228}," websiteMessenger",[194,1293,232],{"class":224},[194,1295,235],{"class":220},[194,1297,238],{"class":224},[194,1299,1300],{"class":204},"./website-messaging",[194,1302,243],{"class":224},[194,1304,246],{"class":224},[194,1306,1307],{"class":196,"line":311},[194,1308,462],{"emptyLinePlaceholder":461},[194,1310,1311,1313,1316,1318,1321,1323,1326,1328,1330,1332,1334,1336],{"class":196,"line":320},[194,1312,669],{"class":288},[194,1314,1315],{"class":228}," script ",[194,1317,292],{"class":224},[194,1319,1320],{"class":228}," document",[194,1322,617],{"class":224},[194,1324,1325],{"class":525},"createElement",[194,1327,384],{"class":228},[194,1329,243],{"class":224},[194,1331,285],{"class":204},[194,1333,243],{"class":224},[194,1335,601],{"class":228},[194,1337,246],{"class":224},[194,1339,1340,1342,1344,1347,1349,1352,1354,1357,1359,1362,1364,1366,1369,1371,1373],{"class":196,"line":342},[194,1341,285],{"class":228},[194,1343,617],{"class":224},[194,1345,1346],{"class":228},"src ",[194,1348,292],{"class":224},[194,1350,1351],{"class":228}," browser",[194,1353,617],{"class":224},[194,1355,1356],{"class":228},"runtime",[194,1358,617],{"class":224},[194,1360,1361],{"class":525},"getURL",[194,1363,384],{"class":228},[194,1365,243],{"class":224},[194,1367,1368],{"class":204},"/path/to/injected.js",[194,1370,243],{"class":224},[194,1372,601],{"class":228},[194,1374,246],{"class":224},[194,1376,1377,1380,1382,1385,1387,1390,1393],{"class":196,"line":491},[194,1378,1379],{"class":228},"document",[194,1381,617],{"class":224},[194,1383,1384],{"class":228},"head",[194,1386,617],{"class":224},[194,1388,1389],{"class":525},"appendChild",[194,1391,1392],{"class":228},"(script)",[194,1394,246],{"class":224},[194,1396,1397],{"class":196,"line":496},[194,1398,462],{"emptyLinePlaceholder":461},[194,1400,1401,1403,1405,1408,1410,1413,1415],{"class":196,"line":501},[194,1402,285],{"class":228},[194,1404,617],{"class":224},[194,1406,1407],{"class":525},"onload",[194,1409,334],{"class":224},[194,1411,1412],{"class":224}," ()",[194,1414,604],{"class":288},[194,1416,376],{"class":224},[194,1418,1419,1422,1424,1426,1428,1430,1433,1435,1437,1439,1442,1444,1446],{"class":196,"line":1054},[194,1420,1421],{"class":228},"  websiteMessenger",[194,1423,617],{"class":224},[194,1425,424],{"class":525},[194,1427,384],{"class":284},[194,1429,243],{"class":224},[194,1431,1432],{"class":204},"init",[194,1434,243],{"class":224},[194,1436,515],{"class":224},[194,1438,225],{"class":224},[194,1440,1441],{"class":224}," ...",[194,1443,232],{"class":224},[194,1445,601],{"class":284},[194,1447,246],{"class":224},[194,1449,1450],{"class":196,"line":1080},[194,1451,1452],{"class":224},"};\n",[194,1454,1455],{"class":196,"line":1098},[194,1456,462],{"emptyLinePlaceholder":461},[194,1458,1460,1463,1465,1467,1469,1471,1474,1476,1478,1480,1482,1484,1486],{"class":196,"line":1459},11,[194,1461,1462],{"class":228},"websiteMessenger",[194,1464,617],{"class":224},[194,1466,428],{"class":525},[194,1468,384],{"class":228},[194,1470,243],{"class":224},[194,1472,1473],{"class":204},"somethingHappened",[194,1475,243],{"class":224},[194,1477,515],{"class":224},[194,1479,595],{"class":224},[194,1481,388],{"class":387},[194,1483,601],{"class":224},[194,1485,604],{"class":288},[194,1487,376],{"class":224},[194,1489,1491],{"class":196,"line":1490},12,[194,1492,1493],{"class":723},"  // React to messages from the injected script\n",[194,1495,1497,1499,1501],{"class":196,"line":1496},13,[194,1498,331],{"class":224},[194,1500,601],{"class":228},[194,1502,246],{"class":224},[185,1504,1507],{"className":211,"code":1505,"filename":1506,"language":213,"meta":190,"style":190},"import { websiteMessenger } from './website-messaging';\n\nwebsiteMessenger.onMessage('init', data => {\n  // initialize injected script\n\n  // eventually, send data back to the content script\n  // third and fourth parameter is optional\n  // third parameter is targetOrigin is additional optional value for postMessage which is default to '*'\n  // fourth parameter is reference of window object which is window on which message is passed passed in case of from iframe to Content Script(ie. parent window) it will be window.parent\n  websiteMessenger.sendMessage('somethingHappened', { ... }, '*', window.parent);\n});\n","Injected script",[161,1508,1509,1529,1533,1558,1563,1567,1572,1577,1582,1587,1633],{"__ignoreMap":190},[194,1510,1511,1513,1515,1517,1519,1521,1523,1525,1527],{"class":196,"line":197},[194,1512,221],{"class":220},[194,1514,225],{"class":224},[194,1516,1291],{"class":228},[194,1518,232],{"class":224},[194,1520,235],{"class":220},[194,1522,238],{"class":224},[194,1524,1300],{"class":204},[194,1526,243],{"class":224},[194,1528,246],{"class":224},[194,1530,1531],{"class":196,"line":311},[194,1532,462],{"emptyLinePlaceholder":461},[194,1534,1535,1537,1539,1541,1543,1545,1547,1549,1551,1554,1556],{"class":196,"line":320},[194,1536,1462],{"class":228},[194,1538,617],{"class":224},[194,1540,428],{"class":525},[194,1542,384],{"class":228},[194,1544,243],{"class":224},[194,1546,1432],{"class":204},[194,1548,243],{"class":224},[194,1550,515],{"class":224},[194,1552,1553],{"class":387}," data",[194,1555,604],{"class":288},[194,1557,376],{"class":224},[194,1559,1560],{"class":196,"line":342},[194,1561,1562],{"class":723},"  // initialize injected script\n",[194,1564,1565],{"class":196,"line":491},[194,1566,462],{"emptyLinePlaceholder":461},[194,1568,1569],{"class":196,"line":496},[194,1570,1571],{"class":723},"  // eventually, send data back to the content script\n",[194,1573,1574],{"class":196,"line":501},[194,1575,1576],{"class":723},"  // third and fourth parameter is optional\n",[194,1578,1579],{"class":196,"line":1054},[194,1580,1581],{"class":723},"  // third parameter is targetOrigin is additional optional value for postMessage which is default to '*'\n",[194,1583,1584],{"class":196,"line":1080},[194,1585,1586],{"class":723},"  // fourth parameter is reference of window object which is window on which message is passed passed in case of from iframe to Content Script(ie. parent window) it will be window.parent\n",[194,1588,1589,1591,1593,1595,1597,1599,1601,1603,1605,1607,1609,1612,1614,1617,1619,1621,1624,1626,1629,1631],{"class":196,"line":1098},[194,1590,1421],{"class":228},[194,1592,617],{"class":224},[194,1594,424],{"class":525},[194,1596,384],{"class":284},[194,1598,243],{"class":224},[194,1600,1473],{"class":204},[194,1602,243],{"class":224},[194,1604,515],{"class":224},[194,1606,225],{"class":224},[194,1608,1441],{"class":224},[194,1610,1611],{"class":224}," },",[194,1613,238],{"class":224},[194,1615,1616],{"class":204},"*",[194,1618,243],{"class":224},[194,1620,515],{"class":224},[194,1622,1623],{"class":228}," window",[194,1625,617],{"class":224},[194,1627,1628],{"class":228},"parent",[194,1630,601],{"class":284},[194,1632,246],{"class":224},[194,1634,1635,1637,1639],{"class":196,"line":1459},[194,1636,331],{"class":224},[194,1638,601],{"class":228},[194,1640,246],{"class":224},[1642,1643,1644],"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 .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--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 .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}",{"title":190,"searchDepth":311,"depth":311,"links":1646},[1647,1648,1649,1652],{"id":156,"depth":311,"text":157},{"id":178,"depth":311,"text":28},{"id":352,"depth":311,"text":353,"children":1650},[1651],{"id":728,"depth":320,"text":729},{"id":938,"depth":311,"text":939},"md",null,{},{"title":28,"description":190},"nUY7nAB51tzWfEwCiJGNXL6lU-99gkNBc0dllHzq6PA",[1659,1660],{"title":48,"path":82,"stem":83,"description":190,"children":-1},{"title":93,"path":94,"stem":95,"description":190,"children":-1},1779312967449]