CODEWITHSUNDEEP
javascriptgoogle-chrome-extension
Bedtime
Bedtime

Reputation: 33

what is ( ) => void callback function in chrome documentation?

I am reading chrome documentation for my extension. I see a lot of methods like this:

chrome.scripting.insertCSS(
    injection: CSSInjection,
    callback?: function
)

And it says about callback?: function

// The callback function parameter look like this:
() => void

This is my code and I'm trying to put CSS in any website i visit to make the all paragraph red

chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
let text = chrome.scripting.insertCSS({target: {tabId: tabs[0].id}, files: ['css.css']}, () => {})
})

The css.css is my external file to make all the paragraph red in any website i visit like this:

p {
    color: red;
}

My code works. It can make the paragraph red in every website i visit. But my question is: what is the use of () => void function parameter in the chrome documentation I always see and how can i utilize this?

I tried to imitate what is in documentation. But I still cannot understand how () => void works and how to utilize it. Can anyone help me to understand this in a simple way?

Upvotes: 1

Views: 197

Answers (1)

Norio Yamamoto
Norio Yamamoto

Reputation: 1786

You can use a callback to know when the CSS insertion is complete.

chrome.scripting.insertCSS({ target: { tabId: tabs[0].id }, files: ['css.css'] }, () => {
  console.log("Finished inserting the CSS.");
});

console.log("The CSS insertion is probably not complete.");

I have a suggestion for you. You will be happier with content_scripts.

{
  "name": "content_scripts",
  "version": "1.0",
  "manifest_version": 3,
  "content_scripts": [
    {
      "css": [
        "matches.css"
      ],
      "matches": [
        "<all_urls>"
      ]
    }
  ]
}

matches.css

p {
  color: red;
}

Upvotes: 1

Related Questions