How to insert a file using chrome.scripting?

[MiniSuperDev]

I am migrating this example from google tutorial to Plasmo

https://github.com/GoogleChrome/chrome-extensions-samples/blob/b6a3ac55011d725ba32d7446f124fca693c50c3d/functional-samples/tutorial.focus-mode/background.js#L40-L43

      await chrome.scripting.insertCSS({
        files: ['focus-mode.css'],
        target: { tabId: tab.id }
      });

But I got this

Uncaught (in promise) Error: Could not load file: 'focus-mode.css'.

[louisgv]

you would need to use one of the import scheme instead: https://docs.plasmo.com/framework/import#url

Plasmo resolves file and bundle things into the eventual package. Because of that, any file path must be resolved prior to passing down to the native calls.

[MiniSuperDev]

@louisgv Thanks.

I try with:

import url1 from "url:./focus-mode.css";
import url2 from "url:/src/background/focus-mode.css";
import url3 from "url:~/background/focus-mode.css";

But all give me the same url, and this error:

index.ts:41 Uncaught (in promise) Error: Could not load file: 
chrome-extension://asdfssdfwefwefwefwefwef/static/background/../../focus-mode.158642e8.css?4853486851248

[muratsu]

@MiniSuperDev @louisgv for scripting files you need the path to use the following format:

filename.hash.css

so in your case, you need to modify your path and remove the absolute path chrome-extension://asdfssdfwefwefwefwefwef/static/background/../../ and the cache buster extension ?4853486851248

something like this:

const extractFileName = (url: string) => {
  let parsedUrl = new URL(url);
  let pathParts = parsedUrl.pathname.split('/');
  let fileWithExtension = pathParts[pathParts.length - 1];
  return fileWithExtension.split('?')[0]; // remove any query parameters
}