[{"data":1,"prerenderedAt":1658},["ShallowReactive",2],{"navigation_docs":3,"-messaging-installation":133,"-messaging-installation-surround":1655},[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":1650,"links":1651,"meta":1652,"navigation":467,"path":90,"seo":1653,"stem":91,"__hash__":1654},"docs/messaging/0.installation.md",{"type":136,"value":137,"toc":1642},"minimark",[138,159,164,171,182,185,190,215,253,257,276,356,360,363,414,425,436,544,550,725,730,737,748,932,936,954,1230,1250,1261,1268,1271,1638],[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,635],{},[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,607,626],{"__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],{"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":393}," message",[200,603,604],{"class":294}," =>",[200,606,382],{"class":230},[200,608,609,612,614,617,619,621,624],{"class":202,"line":348},[200,610,611],{"class":226},"  return",[200,613,601],{"class":234},[200,615,616],{"class":230},".",[200,618,394],{"class":234},[200,620,616],{"class":230},[200,622,623],{"class":234},"length",[200,625,252],{"class":230},[200,627,628,630,633],{"class":202,"line":497},[200,629,337],{"class":230},[200,631,632],{"class":234},")",[200,634,252],{"class":230},[191,636,639],{"className":217,"code":637,"filename":638,"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,640,641,661,665,701,705],{"__ignoreMap":196},[200,642,643,645,647,649,651,653,655,657,659],{"class":202,"line":203},[200,644,227],{"class":226},[200,646,231],{"class":230},[200,648,518],{"class":234},[200,650,238],{"class":230},[200,652,241],{"class":226},[200,654,244],{"class":230},[200,656,575],{"class":210},[200,658,249],{"class":230},[200,660,252],{"class":230},[200,662,663],{"class":202,"line":317},[200,664,468],{"emptyLinePlaceholder":467},[200,666,667,670,673,675,678,680,682,684,686,688,690,692,695,697,699],{"class":202,"line":326},[200,668,669],{"class":294},"const",[200,671,672],{"class":234}," length ",[200,674,298],{"class":230},[200,676,677],{"class":226}," await",[200,679,518],{"class":531},[200,681,390],{"class":234},[200,683,249],{"class":230},[200,685,594],{"class":210},[200,687,249],{"class":230},[200,689,521],{"class":230},[200,691,244],{"class":230},[200,693,694],{"class":210},"hello world",[200,696,249],{"class":230},[200,698,632],{"class":234},[200,700,252],{"class":230},[200,702,703],{"class":202,"line":348},[200,704,468],{"emptyLinePlaceholder":467},[200,706,707,710,712,715,718,721],{"class":202,"line":497},[200,708,709],{"class":234},"console",[200,711,616],{"class":230},[200,713,714],{"class":531},"log",[200,716,717],{"class":234},"(length)",[200,719,720],{"class":230},";",[200,722,724],{"class":723},"sHwdD"," // 11\n",[726,727,729],"h3",{"id":728},"sending-messages-to-tabs","Sending Messages to Tabs",[139,731,732,733,736],{},"You can also send messages from your background script to a tab, but you need to know the ",[167,734,735],{},"tabId",". This would send the message to all frames in the tab.",[139,738,739,740,742,743,431,745,616],{},"If you want to send a message to a specific frame, you can pass an object to ",[167,741,430],{}," with the ",[167,744,735],{},[167,746,747],{},"frameId",[364,749,750,822],{},[191,751,752],{"className":217,"code":554,"filename":638,"language":219,"meta":196,"style":196},[167,753,754,774,778,798,814],{"__ignoreMap":196},[200,755,756,758,760,762,764,766,768,770,772],{"class":202,"line":203},[200,757,227],{"class":226},[200,759,231],{"class":230},[200,761,566],{"class":234},[200,763,238],{"class":230},[200,765,241],{"class":226},[200,767,244],{"class":230},[200,769,575],{"class":210},[200,771,249],{"class":230},[200,773,252],{"class":230},[200,775,776],{"class":202,"line":317},[200,777,468],{"emptyLinePlaceholder":467},[200,779,780,782,784,786,788,790,792,794,796],{"class":202,"line":326},[200,781,434],{"class":531},[200,783,390],{"class":234},[200,785,249],{"class":230},[200,787,594],{"class":210},[200,789,249],{"class":230},[200,791,521],{"class":230},[200,793,601],{"class":393},[200,795,604],{"class":294},[200,797,382],{"class":230},[200,799,800,802,804,806,808,810,812],{"class":202,"line":348},[200,801,611],{"class":226},[200,803,601],{"class":234},[200,805,616],{"class":230},[200,807,394],{"class":234},[200,809,616],{"class":230},[200,811,623],{"class":234},[200,813,252],{"class":230},[200,815,816,818,820],{"class":202,"line":497},[200,817,337],{"class":230},[200,819,632],{"class":234},[200,821,252],{"class":230},[191,823,825],{"className":217,"code":824,"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,826,827,847,851,886],{"__ignoreMap":196},[200,828,829,831,833,835,837,839,841,843,845],{"class":202,"line":203},[200,830,227],{"class":226},[200,832,231],{"class":230},[200,834,518],{"class":234},[200,836,238],{"class":230},[200,838,241],{"class":226},[200,840,244],{"class":230},[200,842,575],{"class":210},[200,844,249],{"class":230},[200,846,252],{"class":230},[200,848,849],{"class":202,"line":317},[200,850,468],{"emptyLinePlaceholder":467},[200,852,853,855,857,859,861,863,865,867,869,871,873,875,877,879,881,884],{"class":202,"line":326},[200,854,669],{"class":294},[200,856,672],{"class":234},[200,858,298],{"class":230},[200,860,677],{"class":226},[200,862,518],{"class":531},[200,864,390],{"class":234},[200,866,249],{"class":230},[200,868,594],{"class":210},[200,870,249],{"class":230},[200,872,521],{"class":230},[200,874,244],{"class":230},[200,876,694],{"class":210},[200,878,249],{"class":230},[200,880,521],{"class":230},[200,882,883],{"class":234}," tabId)",[200,885,252],{"class":230},[200,887,888,890,892,894,896,898,900,902,904,906,908,910,912,914,916,918,921,923,926,928,930],{"class":202,"line":348},[200,889,669],{"class":294},[200,891,672],{"class":234},[200,893,298],{"class":230},[200,895,677],{"class":226},[200,897,518],{"class":531},[200,899,390],{"class":234},[200,901,249],{"class":230},[200,903,594],{"class":210},[200,905,249],{"class":230},[200,907,521],{"class":230},[200,909,244],{"class":230},[200,911,694],{"class":210},[200,913,249],{"class":230},[200,915,521],{"class":230},[200,917,231],{"class":230},[200,919,920],{"class":234}," tabId",[200,922,521],{"class":230},[200,924,925],{"class":234}," frameId ",[200,927,337],{"class":230},[200,929,632],{"class":234},[200,931,252],{"class":230},[160,933,935],{"id":934},"window-messaging","Window Messaging",[139,937,938,939,942,943,946,947,431,950,953],{},"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,940,941],{},"defineWindowMessenger"," or ",[167,944,945],{},"defineCustomEventMessenger",", which use the ",[167,948,949],{},"window.postMessage",[167,951,952],{},"CustomEvent"," APIs respectively.",[364,955,956,1101],{},[191,957,960],{"className":217,"code":958,"filename":959,"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,961,962,984,988,1000,1021,1040,1044,1048,1074,1092],{"__ignoreMap":196},[200,963,964,966,968,971,973,975,977,980,982],{"class":202,"line":203},[200,965,227],{"class":226},[200,967,231],{"class":230},[200,969,970],{"class":234}," defineWindowMessaging",[200,972,238],{"class":230},[200,974,241],{"class":226},[200,976,244],{"class":230},[200,978,979],{"class":210},"@webext-core/messaging/page",[200,981,249],{"class":230},[200,983,252],{"class":230},[200,985,986],{"class":202,"line":317},[200,987,468],{"emptyLinePlaceholder":467},[200,989,990,992,995,998],{"class":202,"line":326},[200,991,510],{"class":226},[200,993,994],{"class":294}," interface",[200,996,997],{"class":206}," WebsiteMessengerSchema",[200,999,382],{"class":230},[200,1001,1002,1005,1007,1009,1011,1014,1016,1019],{"class":202,"line":348},[200,1003,1004],{"class":290},"  init",[200,1006,390],{"class":230},[200,1008,394],{"class":393},[200,1010,397],{"class":230},[200,1012,1013],{"class":206}," unknown",[200,1015,403],{"class":230},[200,1017,1018],{"class":206}," void",[200,1020,252],{"class":230},[200,1022,1023,1026,1028,1030,1032,1034,1036,1038],{"class":202,"line":497},[200,1024,1025],{"class":290},"  somethingHappened",[200,1027,390],{"class":230},[200,1029,394],{"class":393},[200,1031,397],{"class":230},[200,1033,1013],{"class":206},[200,1035,403],{"class":230},[200,1037,1018],{"class":206},[200,1039,252],{"class":230},[200,1041,1042],{"class":202,"line":502},[200,1043,413],{"class":230},[200,1045,1046],{"class":202,"line":507},[200,1047,468],{"emptyLinePlaceholder":467},[200,1049,1051,1053,1055,1058,1060,1062,1064,1067,1069,1071],{"class":202,"line":1050},8,[200,1052,510],{"class":226},[200,1054,513],{"class":294},[200,1056,1057],{"class":234}," websiteMessenger ",[200,1059,298],{"class":230},[200,1061,970],{"class":531},[200,1063,287],{"class":230},[200,1065,1066],{"class":206},"WebsiteMessengerSchema",[200,1068,538],{"class":230},[200,1070,390],{"class":234},[200,1072,1073],{"class":230},"{\n",[200,1075,1077,1080,1082,1084,1087,1089],{"class":202,"line":1076},9,[200,1078,1079],{"class":290},"  namespace",[200,1081,397],{"class":230},[200,1083,244],{"class":230},[200,1085,1086],{"class":210},"\u003Csome-unique-string>",[200,1088,249],{"class":230},[200,1090,1091],{"class":230},",\n",[200,1093,1095,1097,1099],{"class":202,"line":1094},10,[200,1096,337],{"class":230},[200,1098,632],{"class":234},[200,1100,252],{"class":230},[191,1102,1105],{"className":217,"code":1103,"filename":1104,"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,1106,1107,1128,1132,1142,1160,1178,1182,1186,1208,1222],{"__ignoreMap":196},[200,1108,1109,1111,1113,1116,1118,1120,1122,1124,1126],{"class":202,"line":203},[200,1110,227],{"class":226},[200,1112,231],{"class":230},[200,1114,1115],{"class":234}," defineCustomEventMessaging",[200,1117,238],{"class":230},[200,1119,241],{"class":226},[200,1121,244],{"class":230},[200,1123,979],{"class":210},[200,1125,249],{"class":230},[200,1127,252],{"class":230},[200,1129,1130],{"class":202,"line":317},[200,1131,468],{"emptyLinePlaceholder":467},[200,1133,1134,1136,1138,1140],{"class":202,"line":326},[200,1135,510],{"class":226},[200,1137,994],{"class":294},[200,1139,997],{"class":206},[200,1141,382],{"class":230},[200,1143,1144,1146,1148,1150,1152,1154,1156,1158],{"class":202,"line":348},[200,1145,1004],{"class":290},[200,1147,390],{"class":230},[200,1149,394],{"class":393},[200,1151,397],{"class":230},[200,1153,1013],{"class":206},[200,1155,403],{"class":230},[200,1157,1018],{"class":206},[200,1159,252],{"class":230},[200,1161,1162,1164,1166,1168,1170,1172,1174,1176],{"class":202,"line":497},[200,1163,1025],{"class":290},[200,1165,390],{"class":230},[200,1167,394],{"class":393},[200,1169,397],{"class":230},[200,1171,1013],{"class":206},[200,1173,403],{"class":230},[200,1175,1018],{"class":206},[200,1177,252],{"class":230},[200,1179,1180],{"class":202,"line":502},[200,1181,413],{"class":230},[200,1183,1184],{"class":202,"line":507},[200,1185,468],{"emptyLinePlaceholder":467},[200,1187,1188,1190,1192,1194,1196,1198,1200,1202,1204,1206],{"class":202,"line":1050},[200,1189,510],{"class":226},[200,1191,513],{"class":294},[200,1193,1057],{"class":234},[200,1195,298],{"class":230},[200,1197,1115],{"class":531},[200,1199,287],{"class":230},[200,1201,1066],{"class":206},[200,1203,538],{"class":230},[200,1205,390],{"class":234},[200,1207,1073],{"class":230},[200,1209,1210,1212,1214,1216,1218,1220],{"class":202,"line":1076},[200,1211,1079],{"class":290},[200,1213,397],{"class":230},[200,1215,244],{"class":230},[200,1217,1086],{"class":210},[200,1219,249],{"class":230},[200,1221,1091],{"class":230},[200,1223,1224,1226,1228],{"class":202,"line":1094},[200,1225,337],{"class":230},[200,1227,632],{"class":234},[200,1229,252],{"class":230},[1231,1232,1233,1237,1240,1242,1243,1246,1247,616],"note",{},[1234,1235,1236],"strong",{},"Which one should I use?",[1238,1239],"br",{},[1238,1241],{},"\nIn general, if you don't need to communicate with iframes, use ",[167,1244,1245],{},"defineCustomEventMessaging",". If you need to communicate with iframes, use ",[167,1248,1249],{},"defineWindowMessaging",[139,1251,1252,1253,1256,1257,1260],{},"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,1254,1255],{},"browser.runtime.id",", but if you're injecting a script, ",[167,1258,1259],{},"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,1262,1263,1264,431,1266,616],{},"The messenger object can be used in the same way as the extension messenger, with ",[167,1265,430],{},[167,1267,434],{},[139,1269,1270],{},"Here, we're injecting a script, initializing it with data, and allowing the script to send data back to our content script.",[364,1272,1273,1500],{},[191,1274,1277],{"className":217,"code":1275,"filename":1276,"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,1278,1279,1301,1305,1334,1371,1391,1395,1413,1444,1449,1453,1485,1491],{"__ignoreMap":196},[200,1280,1281,1283,1285,1288,1290,1292,1294,1297,1299],{"class":202,"line":203},[200,1282,227],{"class":226},[200,1284,231],{"class":230},[200,1286,1287],{"class":234}," websiteMessenger",[200,1289,238],{"class":230},[200,1291,241],{"class":226},[200,1293,244],{"class":230},[200,1295,1296],{"class":210},"./website-messaging",[200,1298,249],{"class":230},[200,1300,252],{"class":230},[200,1302,1303],{"class":202,"line":317},[200,1304,468],{"emptyLinePlaceholder":467},[200,1306,1307,1309,1312,1314,1317,1319,1322,1324,1326,1328,1330,1332],{"class":202,"line":326},[200,1308,669],{"class":294},[200,1310,1311],{"class":234}," script ",[200,1313,298],{"class":230},[200,1315,1316],{"class":234}," document",[200,1318,616],{"class":230},[200,1320,1321],{"class":531},"createElement",[200,1323,390],{"class":234},[200,1325,249],{"class":230},[200,1327,291],{"class":210},[200,1329,249],{"class":230},[200,1331,632],{"class":234},[200,1333,252],{"class":230},[200,1335,1336,1338,1340,1343,1345,1348,1350,1353,1355,1358,1360,1362,1365,1367,1369],{"class":202,"line":348},[200,1337,291],{"class":234},[200,1339,616],{"class":230},[200,1341,1342],{"class":234},"src ",[200,1344,298],{"class":230},[200,1346,1347],{"class":234}," browser",[200,1349,616],{"class":230},[200,1351,1352],{"class":234},"runtime",[200,1354,616],{"class":230},[200,1356,1357],{"class":531},"getURL",[200,1359,390],{"class":234},[200,1361,249],{"class":230},[200,1363,1364],{"class":210},"/path/to/injected.js",[200,1366,249],{"class":230},[200,1368,632],{"class":234},[200,1370,252],{"class":230},[200,1372,1373,1376,1378,1381,1383,1386,1389],{"class":202,"line":497},[200,1374,1375],{"class":234},"document",[200,1377,616],{"class":230},[200,1379,1380],{"class":234},"head",[200,1382,616],{"class":230},[200,1384,1385],{"class":531},"appendChild",[200,1387,1388],{"class":234},"(script)",[200,1390,252],{"class":230},[200,1392,1393],{"class":202,"line":502},[200,1394,468],{"emptyLinePlaceholder":467},[200,1396,1397,1399,1401,1404,1406,1409,1411],{"class":202,"line":507},[200,1398,291],{"class":234},[200,1400,616],{"class":230},[200,1402,1403],{"class":531},"onload",[200,1405,340],{"class":230},[200,1407,1408],{"class":230}," ()",[200,1410,604],{"class":294},[200,1412,382],{"class":230},[200,1414,1415,1418,1420,1422,1424,1426,1429,1431,1433,1435,1438,1440,1442],{"class":202,"line":1050},[200,1416,1417],{"class":234},"  websiteMessenger",[200,1419,616],{"class":230},[200,1421,430],{"class":531},[200,1423,390],{"class":290},[200,1425,249],{"class":230},[200,1427,1428],{"class":210},"init",[200,1430,249],{"class":230},[200,1432,521],{"class":230},[200,1434,231],{"class":230},[200,1436,1437],{"class":230}," ...",[200,1439,238],{"class":230},[200,1441,632],{"class":290},[200,1443,252],{"class":230},[200,1445,1446],{"class":202,"line":1076},[200,1447,1448],{"class":230},"};\n",[200,1450,1451],{"class":202,"line":1094},[200,1452,468],{"emptyLinePlaceholder":467},[200,1454,1456,1459,1461,1463,1465,1467,1470,1472,1474,1477,1479,1481,1483],{"class":202,"line":1455},11,[200,1457,1458],{"class":234},"websiteMessenger",[200,1460,616],{"class":230},[200,1462,434],{"class":531},[200,1464,390],{"class":234},[200,1466,249],{"class":230},[200,1468,1469],{"class":210},"somethingHappened",[200,1471,249],{"class":230},[200,1473,521],{"class":230},[200,1475,1476],{"class":230}," (",[200,1478,394],{"class":393},[200,1480,632],{"class":230},[200,1482,604],{"class":294},[200,1484,382],{"class":230},[200,1486,1488],{"class":202,"line":1487},12,[200,1489,1490],{"class":723},"  // React to messages from the injected script\n",[200,1492,1494,1496,1498],{"class":202,"line":1493},13,[200,1495,337],{"class":230},[200,1497,632],{"class":234},[200,1499,252],{"class":230},[191,1501,1504],{"className":217,"code":1502,"filename":1503,"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,1505,1506,1526,1530,1555,1560,1564,1569,1574,1579,1584,1630],{"__ignoreMap":196},[200,1507,1508,1510,1512,1514,1516,1518,1520,1522,1524],{"class":202,"line":203},[200,1509,227],{"class":226},[200,1511,231],{"class":230},[200,1513,1287],{"class":234},[200,1515,238],{"class":230},[200,1517,241],{"class":226},[200,1519,244],{"class":230},[200,1521,1296],{"class":210},[200,1523,249],{"class":230},[200,1525,252],{"class":230},[200,1527,1528],{"class":202,"line":317},[200,1529,468],{"emptyLinePlaceholder":467},[200,1531,1532,1534,1536,1538,1540,1542,1544,1546,1548,1551,1553],{"class":202,"line":326},[200,1533,1458],{"class":234},[200,1535,616],{"class":230},[200,1537,434],{"class":531},[200,1539,390],{"class":234},[200,1541,249],{"class":230},[200,1543,1428],{"class":210},[200,1545,249],{"class":230},[200,1547,521],{"class":230},[200,1549,1550],{"class":393}," data",[200,1552,604],{"class":294},[200,1554,382],{"class":230},[200,1556,1557],{"class":202,"line":348},[200,1558,1559],{"class":723},"  // initialize injected script\n",[200,1561,1562],{"class":202,"line":497},[200,1563,468],{"emptyLinePlaceholder":467},[200,1565,1566],{"class":202,"line":502},[200,1567,1568],{"class":723},"  // eventually, send data back to the content script\n",[200,1570,1571],{"class":202,"line":507},[200,1572,1573],{"class":723},"  // third and fourth parameter is optional\n",[200,1575,1576],{"class":202,"line":1050},[200,1577,1578],{"class":723},"  // third parameter is targetOrigin is additional optional value for postMessage which is default to '*'\n",[200,1580,1581],{"class":202,"line":1076},[200,1582,1583],{"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",[200,1585,1586,1588,1590,1592,1594,1596,1598,1600,1602,1604,1606,1609,1611,1614,1616,1618,1621,1623,1626,1628],{"class":202,"line":1094},[200,1587,1417],{"class":234},[200,1589,616],{"class":230},[200,1591,430],{"class":531},[200,1593,390],{"class":290},[200,1595,249],{"class":230},[200,1597,1469],{"class":210},[200,1599,249],{"class":230},[200,1601,521],{"class":230},[200,1603,231],{"class":230},[200,1605,1437],{"class":230},[200,1607,1608],{"class":230}," },",[200,1610,244],{"class":230},[200,1612,1613],{"class":210},"*",[200,1615,249],{"class":230},[200,1617,521],{"class":230},[200,1619,1620],{"class":234}," window",[200,1622,616],{"class":230},[200,1624,1625],{"class":234},"parent",[200,1627,632],{"class":290},[200,1629,252],{"class":230},[200,1631,1632,1634,1636],{"class":202,"line":1455},[200,1633,337],{"class":230},[200,1635,632],{"class":234},[200,1637,252],{"class":230},[1639,1640,1641],"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":1643},[1644,1645,1646,1649],{"id":162,"depth":317,"text":163},{"id":184,"depth":317,"text":28},{"id":358,"depth":317,"text":359,"children":1647},[1648],{"id":728,"depth":326,"text":729},{"id":934,"depth":317,"text":935},"md",null,{},{"title":28,"description":196},"PheJOiL4KgYePdzNkOfKjvoZnpzqBSTRsDadbCtjZi8",[1656,1657],{"title":48,"path":82,"stem":83,"description":196,"children":-1},{"title":93,"path":94,"stem":95,"description":196,"children":-1},1779299495026]