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