[EXP] How to find out the final name of content script (without hash) from contents folder?

[upokusaev]

What is the example you wish to see?

I'd like to see how I can embed the content script into a page manually

Is there any context that might help us understand?

I have this structure

| background
|__ index.ts 
| contents
|__ CustomPopup.tsx

In the intex.ts file I use the following code:

chrome.action.onClicked.addListener(async (tab) => {
  try {
    await sendToContentScript({
      name: "click"
    })
  } catch (e) {
    // The error occurs on pages that were opened in the browser before the extension was installed
    chrome.scripting.executeScript(
      { target: { tabId: tab.id }, files: ["CustomPopup.hash.js"] },
      () => {
        setTimeout(() => {
          sendToContentScript({
            name: "click"
          })
        }, 500)
      }
    )
  }
})

Instead of CustomPopup.hash.js, I want to use the correct name of the final script. Or I want to disable hashes for prod builds, if the file name is impossible to know.

I tried using url: and raw: directives but it didn't help, because of them a second script is created which doesn't work the same way as the first one. Probably because the scripts in the contents folder are handled in a special way.

P.S. Now I have to use a workaround in the form of a .sh script that is executed after the build:

# Find the CustomPopup file by mask inside build/chrome-mv3-prod
file=$(find build/chrome-mv3-prod -type f -name "CustomPopup.*.js")

# Get only the file name without the path
name=${file##*/}

# Replace the string inside index.js with the file name
sed -i -e "s/CustomPopup.hash.js/$name/g" build/chrome-mv3-prod/static/background/index.js
echo "Replacing CustomPopup.hash.js with $name"

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate problems.

[RatulHasan]

Hey, @upokusaev , Hope this will solve your problem-

import raw from 'url:~/contents/CustomPopup.tsx';
chrome.action.onClicked.addListener(async (tab) => {
  try {
    await sendToContentScript({
      name: "click"
    })
  } catch (e) {
    // The error occurs on pages that were opened in the browser before the extension was installed
    chrome.scripting.executeScript(
      { target: { tabId: tab.id }, files: [raw] },
      () => {
        setTimeout(() => {
          sendToContentScript({
            name: "click"
          })
        }, 500)
      }
    )
  }
})

[upokusaev]

Unfortunately, no.

1. Two files are created
2. The second file, the one we import through the url directive - does not work. Error:

   Unchecked runtime.lastError: Could not load file: 'chrome-extension://bke...cde/static/background/../../CalendarPopup.828a0e9c.js'.

[rocket828]

plasmo doesn't seem to have this feature, it uses Parcel as a packaging library. we can change the packaging configuration to achieve this.

.parcelrc { "extends": ["@parcel/config-default","@plasmohq/parcel-config"], "namers": [ "@plasmohq/parcel-namer-manifest","parcel-namer-rewrite" ] } package.json "parcel-namer-rewrite": { "hashing": "never" },