[web_extension] web_accessible_resources not generated as expected

[Mallice]

🐛 bug report

web_accessible_resources generation do not behave as expected (according to Parcel Documentation)

This Bug Reports present two linked issues that prevents the generation of appropriate web_accessible_resources config

Issue 1

https://parceljs.org/recipes/web-extension/#web_accessible_resources

Any resources you use in a content script will automatically be added into web_accessible_resources, so you don't usually need to specify anything in web_accessible_resources at all.

This statement is true for imports on a content_scripts located in the manifest.content_scripts configuration, but it is false for content_scripts dynamically executed by javascript api:

• MV3: scripting.executeScript()
• MV2: tabs.executeScript()
• ...

This bug is quite related to this one #5758

Issue 2

The second part of the Parcel documentation is also not working as expected

However, if you actually want resources from your extension to be accessible from other extensions or websites, you can specify file paths or globs within web_accessible_resources.

It seems that globs patterns are not treated correctly

This leaves no workaround to dynamically load content_scripts that imports web accessible ressources.

🎛 Configuration (.babelrc, package.json, cli command)

Issue 1

//.parcelrc
{
    "extends": "@parcel/config-webextension",
}
//manifest.json
{
   // no web_accessible_resources defined
}

Issue 2

//.parcelrc
{
    "extends": "@parcel/config-webextension",
}
//manifest.json
{
  "web_accessible_resources": [{
    // assuming there is a file named client_script_file.ts on the client_scripts folder
    "resources": ["/src/client_scripts/**"],
    "matches": ["*://*/*"]
  }]
}

🤔 Expected Behavior

Issue 1

// client_script_file.ts
console.log("I am declared in web_accessible_resources");

// content_scripts.ts
import client_script from "url:../client_scripts/client_script_file.ts";
const script = document.createElement("script");
  script.src = client_script;
  script.onload = () => {
    //script.remove();
  };
  (document.head || document.documentElement).appendChild(script);

// background.ts
    import clientScriptLoader from "url:../content_scripts.ts";
   scripting.executeScript({
      target: { tabId },
      files: [clientScriptLoader.split("/").pop()],
    });

I expect that running the script above to generate a manifest.json:

//manifest.json
{
  "web_accessible_resources": [{
    "resources": ["client_script_file.<hash>.js"],
    "matches": ["*://*/*"]
  }]
}

Issue 2

I expect that my web_accessible_resources to be translated into

//manifest.json
{
  "web_accessible_resources": [{
    "resources": ["client_script_file.<hash>.js"],
    "matches": ["*://*/*"]
  }]
}

😯 Current Behavior

Issue 1

The web_accessible_resources key is not present in the generated manifest.

This is leading to the following error

Denying load of chrome-extension://${extension-id}/client_script_file.${hash}.js. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.

Issue 2

The manifest is wrongly generated

//manifest.json
{
  "web_accessible_resources": [{
    "resources": ["/src/client_scripts/client_script_file.js"],
    "matches": ["*://*/*"]
  }]
}

This is leading to the following error

Denying load of chrome-extension://${extension-id}/client_script_file.${hash}.js. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.

💁 Possible Solution

• The short term solutions can be to look why the glob patterns did not behave as expected and to fix it
• The long term could be to directly look at dynamically injected content_scripts imports

Only workaround is to always use manifest.json to declare content_scripts (knowing they will always be executed event if useless)

🔦 Context

the purpose of chrome.scripting.executeScript is to conditionnally inject script at runtime if a condition is met.
whereas with content_scripts declared on manifest.json we always inject script on matched hosts

--> In my case I prefer the use of chrome.scripting.executeScript because I only need to inject content_scripts if my devtools extension is opened on the specific webpage. And I do no want to do if devtools is not open --> such condition force the use of executeScript()

🌍 Your Environment

Behavior tested in Chrome

Software	Version(s)
Parcel	^2.8.0
Node	v16.17.0
npm/Yarn	yarn: 1.22.19
Operating System	MAC

[romainbessugesmeusy]

I'm encountering the same issue!

[101arrowz]

Your issue should be resolved if you specify content_scripts.ts, instead of client_script_file.ts, in web_accessible_resources . This indirect way of doing things should help Parcel figure out how to bundle client_script_file.ts.

By doing this you do unfortunately expose the content_scripts.ts to third-party sites but given that it's just an injection script, I'd assume it's not too big a security issue.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.

[TimFletcher]

I'm injecting content.js because I don't want / need to execute it on <all_urls> and using that is going to extend my extension review by weeks. For my extension all the images are broken due to missing paths in web_accessible_resources.