2

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??

Code Eagle
  • 1,293
  • 1
  • 17
  • 34
  • 2
    Use `args` as shown in the documentation. – wOxxOm Mar 17 '22 at 00:56
  • 1
    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) https://developer.mozilla.org/en-US/docs/Web/Events/Creating_and_triggering_events – petegordon Mar 17 '22 at 11:25
  • @petegordon, can you share an example or reference on how you used [Custom Web Events](https://developer.mozilla.org/en-US/docs/Web/Events/Creating_and_triggering_events) in your add-on? – Gangula Sep 04 '22 at 12:34
  • @Gangula sorry I don't have the full specific code I can share. But, I was working with... https://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 Sep 05 '22 at 14:20

1 Answers1

0

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

relentless
  • 372
  • 1
  • 4
  • 10
  • 1
    how to pass args If we use a `files:` instead of `func:`?. [Documentation](https://developer.chrome.com/docs/extensions/reference/scripting/#type-ScriptInjection) mentions that __*`args` is only valid if the `func` parameter is specified*__ – Gangula Sep 02 '22 at 17:22
  • 1
    Check [this answer](https://stackoverflow.com/a/73586624/6908282) to know how to pass arguments when you use a file instead of a `func` – Gangula Sep 04 '22 at 12:37