Load image from project in react chrome extension - reactjs

Question

I am trying to build a react chrome extension. I started off with the simple project found here. In its structure, the popup is contained in Modal.js and I would like to include an image in it which is contained in the project. However, to access that I must use chrome.runtime.getURL("image_file.png"), which I cannot access in Modal.js, but only in content.js. How should I get the image properly to Modal.js?
This is all activated when the browser action button is pressed, which calls this function within content.js:
function main() {
const extensionOrigin = 'chrome-extension://' + chrome.runtime.id
if (!location.ancestorOrigins.contains(extensionOrigin)) {
fetch(chrome.runtime.getURL('index.html'))
.then((response) => response.text())
.then((html) => {
const styleStashHTML = html.replace(
/\/static\//g,
`${extensionOrigin}/static/`
)
$(styleStashHTML).appendTo('body')
})
.catch((error) => {
console.warn(error)
})
}
}
The content of index.html is:
<div id="modal-window"></div>
but when the html is returned from the fetch it has expanded in the build to:
<div id="modal-window"></div><script src="/static/js/runtime-main.0d1674f1.js"></script><script src="/static/js/2.021a85b4.chunk.js"></script><script src="/static/js/main.d80831e3.chunk.js"></script>
It is unclear to me how index.js is getting called but it is, which finds the div in index.html and replaces it with the modal object as follows:
import React from 'react'
import ReactDOM from 'react-dom'
import Modal from './Components/Modal'
ReactDOM.render(<Modal />, document.getElementById('modal-window'))
My current implementation of modal.js is as follows. Obviously the img src won't work as it is right now (needing to use chrome.runtime.getURL):
import React from 'react'
const Modal = () => {
return <img src="icon48.png" alt="icon48"></img>
}
export default Modal
How would I actually be able to get the image src from chrome.runtime.getURL?

Answer 1

Figured this out. I don't know if this is the best solution, but it is working for me.
Since I need to access chrome.runtime.getURL I need to do that from the content script. But I need the value of that in my component which doesn't have access to the chrome api. So I message between them through window events. Here is some example code:
ExampleComponent.js
import React, { Component } from 'react'
let imgSrc = 'file.png'
// Note that this listener is outside the Component
window.addEventListener('ToComponent', (msg) => {
imgSrc = msg.detail
})
class ExampleComponent extends Component {
constructor(props) {
super(props)
// Note that this is occurring inside the Component constructor
var event = new CustomEvent('FromComponent')
window.dispatchEvent(event)
this.state = {
imgSrc: imgSrc,
// etc.
}
}
render() {
return (
<img src={this.state.imgSrc} alt=""></img>
)
}
}
content.js:
window.addEventListener('FromComponent', () => {
const imgSrc = chrome.runtime.getURL('file.png')
// Send response
var event = new CustomEvent('ToComponent', { detail: imgSrc })
window.dispatchEvent(event)
})

Answer 2

Content scripts can use chrome.runtime.getUrl().
https://developer.chrome.com/docs/extensions/mv3/content_scripts/
You'll need to declare the images in your manifest.json file using web_accessable_resources.
For example, mine are all copied to a img folder:
"web_accessible_resources": [
{
"resources": ["/img/*"],
"matches": ["https://*"]
}
if using webpack, you'll need to copy them to your build as well:
new CopyWebpackPlugin({
patterns: [
{
from: 'src/assets/img',
to: 'img',
force: true,
},
],
}),
Then in the component call getUrl and include it in render's return:
const logo = chrome.runtime.getURL('img/logo.png');
return ( <img src={ logo } className="app-logo" alt="logo" /> );