I know resources that are known in advance should be bundled with the chrome extension and exposed with web_accessible_resources, but what about images that are not known in advance and therefore cannot be included in the bundle?

I'm upgrading chrome v2 to v3. In v2, I used the background script to add my domain to the CSP and then used the content script to inject a script tag to my domain (i.e. <script src='my_website'). For v3, the CSP cannot be dynamically overridden. I've found solutions for css, and js, but not for loading images that are not known in advance.

I have a web app where people sign up and add a profile pic, and then use the extension to do stuff on web pages and I want to show the profile pics of people who have interacted with the page. Currently, I use the content script to inject a script tag into the page that loads the script from the bundled extension, which is a react app that displays <img> tags with the src attribute, which no longer works.

Is there any solution for this?

I know resources that are known in advance should be bundled with the chrome extension and exposed with web_accessible_resources, but what about images that are not known in advance and therefore cannot be included in the bundle?

I'm upgrading chrome v2 to v3. In v2, I used the background script to add my domain to the CSP and then used the content script to inject a script tag to my domain (i.e. <script src='my_website'). For v3, the CSP cannot be dynamically overridden. I've found solutions for css, and js, but not for loading images that are not known in advance.

I have a web app where people sign up and add a profile pic, and then use the extension to do stuff on web pages and I want to show the profile pics of people who have interacted with the page. Currently, I use the content script to inject a script tag into the page that loads the script from the bundled extension, which is a react app that displays <img> tags with the src attribute, which no longer works.

Is there any solution for this?

• google-chrome-extension
• chrome-extension-manifest-v3

• It will be possible in the future when DNR implements regex replacement in response headers. Right now you can strip CSP entirely or use data: URI for the images, which is allowed on most sites. – woxxom Commented Mar 24 at 5:32
• I'm currently using data uri, which does generally work, but hoped for a true solution that worked in all cases. Do you know if there's any ETA on DNR to implement regex replacement. Chrome approval process likely wouldn't approve removed csp, but curious, how would you strip the CSP? Also, just wanted to say thanks, @woxxom, for your help in the chrome extension community. – JustCodin Commented Mar 25 at 0:23
• See this example. – woxxom Commented Mar 25 at 0:28

1 Answer 1

You can use wildcard for all expected image extensions and/or all files with "*"

  "web_accessible_resources": [
    {
      "resources": [
        "*.jpg",
        "*.png",
        "*.webp",
        "*.svg",
        "*"
      ],
      "matches": [
        "<all_urls>"
      ],
      "extensions": []
    }
  ],