Importing images into the content script

[dpw1]

Hello,

Firstly thank you very much for the excellent work! Is there anyway I can import images into my content script? I have tried it like this:

import logo from '../../../assets/img/icon-128.png';

But it doesn't work. Any help is greatly appreciated. Thanks!

[thatBrian]

Did some soul searching and came up with this.

import icon from '../../../assets/test.jpg';
const container = document.createElement("div")
container.className = "charlie";
container.style.backgroundImage = `url('${chrome.runtime.getURL(icon)}')`;

But running into the issue with web_accessible_resources

[thatBrian]

Fixed the web_accessible_resource issue by updating the manifest.json file.
GoogleChrome/developer.chrome.com#544 (comment)

[Anonymous-Humanoid]

Probably not, but you might run into content security policy (CSP) issues by dynamically assigning a URL. Here's a much simpler approach using React without the need for web_accessible_permissions:

import logo from '../../../assets/img/icon-128.png';

function Logo() {
  return <img src={logo} className='App-logo' alt='logo' />;
}

// Use <Logo /> in your other React

However, for anyone else that's found this issue, if your TypeScript linter is complaining it Cannot find module '../../../assets/img/icon-128.png' or its corresponding type declarations, create a file react-app-env.d.ts in the /src directory:

declare module '*.png';
declare module '*.svg';
declare module '*.jpeg';
declare module '*.jpg';
declare module '*.webp';

Magic.