best way to access the global window
I tried two ways but failed
export const getLeetCodeCodeAndLanguage = (): Promise<LeetCodeEditorData> => {
return new Promise((resolve) => {
const MESSAGE_TYPE = "LEETCODE_MONACO_GET"
const handler = (event: MessageEvent) => {
if (event.source !== window || event.data?.type !== MESSAGE_TYPE) return
window.removeEventListener("message", handler)
resolve(event.data.payload)
}
window.addEventListener("message", handler)
// Script content as a string
const scriptContent = `
(function() {
try {
const editor = window.monaco?.editor?.getEditors?.()[0];
const code = editor?.getValue() ?? null;
const language = editor?.getModel()?.getLanguageId?.() ?? null;
window.postMessage({
type: '${MESSAGE_TYPE}',
payload: { code, language }
}, '*');
} catch (e) {
window.postMessage({
type: '${MESSAGE_TYPE}',
payload: { code: null, language: null }
}, '*');
}
})();
`
// Convert to blob and inject as script src
const blob = new Blob([scriptContent], { type: "text/javascript" })
const scriptUrl = URL.createObjectURL(blob)
const script = document.createElement("script")
script.src = scriptUrl
script.onload = () => {
script.remove()
URL.revokeObjectURL(scriptUrl)
}
document.documentElement.appendChild(script)
})
}
export const getLeetCodeCodeAndLanguage = (): Promise<LeetCodeEditorData> => {
return new Promise((resolve) => {
const MESSAGE_TYPE = "LEETCODE_MONACO_GET"
const handler = (event: MessageEvent) => {
if (event.source !== window || event.data?.type !== MESSAGE_TYPE) return
window.removeEventListener("message", handler)
resolve(event.data.payload)
}
window.addEventListener("message", handler)
// Script content as a string
const scriptContent = `
(function() {
try {
const editor = window.monaco?.editor?.getEditors?.()[0];
const code = editor?.getValue() ?? null;
const language = editor?.getModel()?.getLanguageId?.() ?? null;
window.postMessage({
type: '${MESSAGE_TYPE}',
payload: { code, language }
}, '*');
} catch (e) {
window.postMessage({
type: '${MESSAGE_TYPE}',
payload: { code: null, language: null }
}, '*');
}
})();
`
// Convert to blob and inject as script src
const blob = new Blob([scriptContent], { type: "text/javascript" })
const scriptUrl = URL.createObjectURL(blob)
const script = document.createElement("script")
script.src = scriptUrl
script.onload = () => {
script.remove()
URL.revokeObjectURL(scriptUrl)
}
document.documentElement.appendChild(script)
})
}
1 Reply
also tried this
export type LeetCodeEditorData = {
code: string | null
language: string | null
}
// Unique message ID to avoid collisions
const MESSAGE_TYPE = "LEETCODE_MONACO_GET"
export const getLeetCodeCodeAndLanguage = (): Promise<LeetCodeEditorData> => {
return new Promise((resolve) => {
// Add message listener once
const handler = (event: MessageEvent) => {
if (
event.source !== window ||
!event.data ||
event.data.type !== MESSAGE_TYPE
)
return
const { code, language } = event.data.payload
window.removeEventListener("message", handler)
resolve({
code,
language
})
}
window.addEventListener("message", handler)
// Inject script into page context to access monaco
const script = document.createElement("script")
script.textContent = `
(function() {
try {
const editor = window.monaco?.editor?.getEditors?.()[0];
const code = editor?.getValue() ?? null;
const language = editor?.getModel()?.getLanguageId?.() ?? null;
window.postMessage({
type: '${MESSAGE_TYPE}',
payload: {
code,
language
}
}, '*');
} catch (e) {
window.postMessage({
type: '${MESSAGE_TYPE}',
payload: {
code: null,
language: null
}
}, '*');
}
})();
`
document.documentElement.appendChild(script)
script.remove()
})
}
export type LeetCodeEditorData = {
code: string | null
language: string | null
}
// Unique message ID to avoid collisions
const MESSAGE_TYPE = "LEETCODE_MONACO_GET"
export const getLeetCodeCodeAndLanguage = (): Promise<LeetCodeEditorData> => {
return new Promise((resolve) => {
// Add message listener once
const handler = (event: MessageEvent) => {
if (
event.source !== window ||
!event.data ||
event.data.type !== MESSAGE_TYPE
)
return
const { code, language } = event.data.payload
window.removeEventListener("message", handler)
resolve({
code,
language
})
}
window.addEventListener("message", handler)
// Inject script into page context to access monaco
const script = document.createElement("script")
script.textContent = `
(function() {
try {
const editor = window.monaco?.editor?.getEditors?.()[0];
const code = editor?.getValue() ?? null;
const language = editor?.getModel()?.getLanguageId?.() ?? null;
window.postMessage({
type: '${MESSAGE_TYPE}',
payload: {
code,
language
}
}, '*');
} catch (e) {
window.postMessage({
type: '${MESSAGE_TYPE}',
payload: {
code: null,
language: null
}
}, '*');
}
})();
`
document.documentElement.appendChild(script)
script.remove()
})
}