Running multiple functions via scripting.executeScript

Question

I want to update extension from manifest v2 to manifest v3. previously I was using tabs api now I have to use scripting api. The problem is I am executing multiple script but in scripting api I have to create multiple files for code or I have to create multiple functions. so is there any better way to do this?

This is what I have in mv2 and I have 7-8 scripts like this in my code

chrome.tabs.executeScript(tab.id, {
code: 'document.querySelector("#recv_address > span").textContent'
}, display_location);

I have tried below code and it is working fine but is there any better way to do this because I want to do same thing for 7-8 scripts

function passScript() {
  let passQuery = document.querySelector("#recv_address > span").textContent;
  return passQuery;
}

chrome.scripting.executeScript(
  {
    target: { tabId: tab.id },
    func: passScript,
  },
  display_location
);

Answer 1

If you have many files. You can do it like this in your service worker.

Background.js

const scriptList = ["js/a.js", "js/b.js", "js/c.js"];

scriptList.forEach((script) => {
    chrome.scripting.executeScript({
        target: {tabId: tabId},
        files: [`${script}`],
        injectImmediately: true
    }, () => void chrome.runtime.lastError);
});

Manifest.json

"permissions": ["scripting"],

Answer 2

The API you're using is correct, but know that you can also pass arguments to func , for example:

function passScript(selector) {
  let passQuery = document.querySelector(selector).textContent;
  return passQuery;
}

chrome.scripting.executeScript(
  {
    target: { tabId: tab.id },
    func: passScript,
    args: ["#recv_address > span"]
  },
  display_location
);