[mv3] Using chrome.scripting.executeScript

[knoid]

I've been looking all over with no luck. This code runs on a service-worker.js file inside src folder.

chrome.action.onClicked.addListener((tab) => {
  if (tab.id) {
    chrome.scripting.executeScript({
      target: { tabId: tab.id },
      files: ['content-script.ts'],
    })
  }
})

The content-script.ts file lives in the same src folder but it doesn't get compiled into dist folder. According to https://developer.chrome.com/docs/extensions/mv3/content_scripts/#programmatic I don't need to include it in the manifest file at all so I don't understand where I'm messing up.

Thanks for the help 😄

[jacksteamdev]

Great question! You can add it as another input in your Rollup config:

import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'

import { chromeExtension, simpleReloader } from 'rollup-plugin-chrome-extension'

export default {
  input: ['src/manifest.json', 'src/content-script.ts'], // ⬅ add it here
  output: {
    dir: 'dist',
    format: 'esm',
  },
  plugins: [
    chromeExtension(),
    simpleReloader(),
    resolve(),
    commonjs(),
  ],
}

[jacksteamdev]

In the future we can pull this directly from the code, but that hasn't been implemented yet.

[knoid]

I also needed the 'scripting' permission. Thanks!

[LookRain]

In the future we can pull this directly from the code, but that hasn't been implemented yet.

Hi @jacksteamdev , is there any updates on this?

[jacksteamdev]

If you're using the Vite plugin, the ?script import is the way to do dynamic content scripts.

More here: Advanced Config for CRXJS Vite Plugin - DEV Community 👩‍💻👨‍💻

[mvrikxix]

@jacksteamdev I am using the Vite plugin and I tried adding ?script to the imports: import scriptPath from '../content?script';

Everything is working properly when I do yarn build but when I am doing yarn dev the content-script is not getting added to the dist folder and this is the error I am getting :

Error: Could not load javascript 'assets/content-script-loader.index.js.js' for content script.

Would be great if you can help me out with this. Thank you!

[hafley66]

If you're using the Vite plugin, the ?script import is the way to do dynamic content scripts.

More here: Advanced Config for CRXJS Vite Plugin - DEV Community 👩‍💻👨‍💻

on v1 and vite2 still

this is the most important comment that helped me for getting the switch from all_urls host permissions to activeTab for work. We want publish to go as fast as possible. I have scanned docs and cannot find ?script or ?script&module

Was there any plan to move the dev.to post into docs?