Don't know if it's an issue in the configuration or in parcel, but doing this doesn't work:
// source/react/OnBoarding/OnBoarding.jsx
import logo from "../../images/logo.png"
export default function OnBoarding() {
return <img src={logo} className="logo-2" alt="Apollo Logo 2" />
}
const logo = browser.runtime.getURL("../../logo.f18a6316.png")
interestingly, this does work from an html page of the extension which I open upon installation of the extension:
// background.js
import browser from "webextension-polyfill"
browser.runtime.onInstalled.addListener(({ reason }) => {
if (reason === browser.runtime.OnInstalledReason.INSTALL) {
browser.tabs.create({
url: browser.runtime.getURL("on-install/index.html"),
})
}
})
// source/on-install/App/App.jsx
import logo from "../../images/logo.png"
export default function OnBoardingApp() {
return <img src={logo} />
}
{
"name": "Apollo",
"version": "0.0.0",
"description": "An awesome new browser extension",
"homepage_url": "https://github.com/fregante/browser-extension-template",
"manifest_version": 2,
"minimum_chrome_version": "80",
"applications": {
"gecko": {
"id": "[email protected]",
"strict_min_version": "80.0"
}
},
"icons": {
"128": "icon.png"
},
"permissions": [
"https://github.com/fregante/browser-extension-template/*",
"tabs",
"storage"
],
"content_scripts": [
{
"matches": [
"<all_urls>",
"https://*.zendesk.com/agent*",
"https://*.zendesk.com/admin*"
],
"js": ["content.js"],
"css": ["content.css"],
"run_at": "document_end"
}
],
"options_ui": {
"chrome_style": true,
"page": "options/options.html"
},
"background": {
"persistent": false,
"scripts": ["background.js"]
},
"web_accessible_resources": [
"on-install/index.html",
"logo.*.png",
"images/logo.png",
"images/logo.*.png",
"images/*",
"images/*.png"
]
}