Search code examples
google-chrome-extension

How do I access the any file in my Chrome extension code as a url


I want to show the contents of the frame.html file in my extension folder in an iframe on the standalone page where I'm running the extension. But it is looking for this frame.html file in the source of the site and cannot find it so I'm getting a 404 not found error. Regardless of the relevant page, how can I access the frame.html file embedded in the extension file?

Let me show you in the picture what i want; What I want

On the left is an ordinary web page on which the extension will be activated. Red area is my iframe that activated on the web site due to my extension. This area contents is in the frame.html at extension folder.

when I use <iframe src="extension_src/html/frame.html"></iframe>

I get a "www.......com/extension_src/html/frame.html" not found error


Solution

  • You can point the src to your local file using the template shown below.

    <iframe src="chrome-extension://{{id-of-your-extension}}/path-to-file/frame.html"></iframe>
    

    You extension id will be constant when published to the chrome store. When developing locally you can find the extension id by going to the chrome://extensions