chrome.scripting.executeScript - Unexpected property: 'arguments'

Question

I am trying to use chrome.scripting.executeScript for a chrome extension I'm building in ManifestV3 and following the Google documentation here (see image below):

I have added an 'arguments' property to pass in the title of the current tab to my function. However, I am getting the following error message:

TypeError: Error in invocation of scripting.executeScript(scripting.ScriptInjection injection, optional function callback): Error at parameter 'injection': Unexpected property: 'arguments'.

Here is my code:

chrome.tabs.query({ active: true }, function (tabs) {
  let tab = tabs[0];
  chrome.scripting.executeScript(
    {
      target: { tabId: tab.id },
      function: myFunction,
      arguments: [tab.title],
    },
    (injectionResults) => displaySearch(injectionResults[0].result)
  );
});

Any help would be appreciated, thanks!

Answer 1

The property name being used is incorrect. The new API uses the property "args". For example:

function greet(greeting) {
   console.log(`${greeting}, World!`);
}

chrome.scripting.executeScript({
     target: {tabId: tab.id},
     function: greet,
     args: ['Hello']
});

Output: Hello, World!

You can find more information here.

Answer 2

There is a workaround for this that you can use until they implement the feature using chrome.storage. What you need to do is first save the argument with chrome.storage.sync.set(), then retrieve it inside the function you're injecting using chrome.storage.sync.get().

chrome.storage.sync.set({ myVariable: valueOfVariable });

chrome.tabs.query({ active: true }, function (tabs) {
  let tab = tabs[0];
  chrome.scripting.executeScript(
    {
      target: { tabId: tab.id },
      function: myFunction,
    }
  );
});

function myFunction() {
  chrome.storage.sync.get(["myVariable"], ({ myVariable }) => {
    // Do stuff
  });
}