How to pass parameters to the function called by chrome.scripting.executeScripts? - Chrome extension [duplicate]

Question

I am trying to pass a parameter to the function called by chrome.scripting.executeScripts but it seems that the function can't get parameters passed from the extension!

My extension contains several inputs, when one input is focused on, the extension should pass a certain parameter from the input dataset to the function executed by chrome scripting to set the value of an input in the page, author

let bookInputs = [...document.getElementsByClassName('book-input')];

bookInputs.forEach(bookInput=> {
    bookInput.addEventListener('focus', () => getBook(bookInput.dataset.author))
})

async function getBook(author) {
  let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function:  () => enterBookAuthor(author)
  })
}

function enterBookAuthor(author) {
  const book= document.getElementById('book-author'); //an input in the page
  book.value = author;
}

But this code doesn't manage to achieve the mission, so

Why can't functions executed by chrome scripting receive parameters from the extension and what can i do to fix it??

I had similar problem communicating DOM injected scripts back to Content Script. I “fixed” it by creating window custom event handling on both sides and sending messages that way (which could be calling function and sending parameters) developer.mozilla.org/en-US/docs/Web/Events/… — petegordon
– petegordon, Commented Mar 17, 2022 at 11:25
@petegordon, can you share an example or reference on how you used Custom Web Events in your add-on? — Gangula
– Gangula, Commented Sep 4, 2022 at 12:34
@Gangula sorry I don't have the full specific code I can share. But, I was working with... github.com/josteink/gmailjs-node-boilerplate/tree/master/src. and I updated the DOM extension.js to send ... window.dispatchEvent(new CustomEvent("gmailjs_dom_event", {detail: newMessage})); and receive ... window.addEventListener("gmailjs_contentscript_event", (event) => { console.debug('content script event received by DOM', event); and also updated the content script (extensionInjector.js) to then send "gmailjs_contentscript_event" and receive "gmailjs_dom_event" Hope that helps — petegordon
– petegordon, Commented Sep 5, 2022 at 14:20

relentless · Accepted Answer · 2022-03-17 13:19:29Z

1

You should use the args property, because scripting does not carry over any of the current execution context of the function.

Here's an example:

let bookInputs = [...document.getElementsByClassName('book-input')];

bookInputs.forEach(bookInput=> {
    bookInput.addEventListener('focus', () => getBook(bookInput.dataset.author))
})

async function getBook(author) {
  let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    func: enterBookAuthor,
    args: [author], // this is the args property.
  })
}

function enterBookAuthor(author) {
  const book= document.getElementById('book-author'); //an input in the page
  book.value = author;
}

Here are the links to the docs: https://developer.chrome.com/docs/extensions/reference/scripting/#runtime-functions

answered Mar 17, 2022 at 13:19

relentless

5431 gold badge5 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gangula Over a year ago

how to pass args If we use a files: instead of func:?. Documentation mentions that args is only valid if the func parameter is specified

Gangula Over a year ago

Check this answer to know how to pass arguments when you use a file instead of a func

Collectives™ on Stack Overflow

How to pass parameters to the function called by chrome.scripting.executeScripts? - Chrome extension [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related