How can I get the url of the host page in the content script iframe?

[missingno-io]

in the content-scriot/index.ts file I'm getting the url like this const url = new URL(location.href) but for the life of me I can't figure out how to expose that to the iframe app. Am I missing something really basic here? How would you go about doing that? If I try to get the url in the iframe it's just the extension's url.

[mubaidr]

There are two things here:

Content Script:
When you try to get location here, it will be parent page url. Because this runs in page context.

Content Script Iframe:
When you try to get location here, it will be Iframe url,which is extension address. Because this runs in a ln Iframe.

To get webpage url just get Iframe parent address.

[missingno-io]

Ok, but if I try to accesss window.parent.href then I get a DOMException Uncaught DOMException: Failed to read a named property 'href' from 'Window': Blocked a frame with origin "chrome-extension://geggeepkoepfcjjoaknjckibjkihkaod" from accessing a cross-origin frame.

[missingno-io]

I was thinking that I could pass that data via the webext-bridge from the content script and content script iframe but my attempts haven't worked. Am I wrong in thinking that's a possible route? In reseaching this it seems that you should be able to. Is there an example of this anywhere?

[mubaidr]

You can send message to background js, which will return the url of this tab?

Content Script or Iframe:

const { url } = await chrome.runtime.sendMessage({ action: 'getTabUrl' })

Backgroundjs:

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
	if (request.action === 'getTabUrl') {
		const tabId = sender.tab.id
		chrome.tabs.get(tabId, (tab) => {
			sendResponse({ url: tab.url })
		})
		return true // Keeps the message channel open for sendResponse
	}
})

I would recommend doing maximum work in background js, this is where all chrome APIs are available, it has the most permissions/ access. USe content script/ iframe for user interface purpose.

[missingno-io]

That worked great! I was able to update the app store with this and now I have access to the url within the iframed vue app.

Thanks so much.

[mubaidr]

Welcome! 😀