I'm trying to make a V3 Chrome Extension work, but I'm not sure how to change this V2 code that works.

manifest.json

{
  "name": "Extension name",
  "version": "1.0",
  "manifest_version": 3,
  "description": "Display API Info.",
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "./icons/icon16.png",
    "48": "./icons/icon48.png",
    "128": "./icons/icon128.png"
  },
  "action": {}
}

background.js

chrome.browserAction.setBadgeBackgroundColor({ color: "green" });

const setStuff = () => {
    chrome.browserAction.setBadgeText({ text: `...` });
}

const callApi = () => {
    setStuff();

    setTimeout(() => fetch('')
        .then(response => response.json())
        .then(data => {
            chrome.browserAction.setBadgeText({ text: `${data.info}` });
        }).catch(error => console.log(error)), 5000)

}

callApi()

setInterval(function () {
    callApi()
}, 300000);

Getting this error when testing it locally

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'setBadgeBackgroundColor')

I'm trying to make a V3 Chrome Extension work, but I'm not sure how to change this V2 code that works.

manifest.json

{
  "name": "Extension name",
  "version": "1.0",
  "manifest_version": 3,
  "description": "Display API Info.",
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "./icons/icon16.png",
    "48": "./icons/icon48.png",
    "128": "./icons/icon128.png"
  },
  "action": {}
}

background.js

chrome.browserAction.setBadgeBackgroundColor({ color: "green" });

const setStuff = () => {
    chrome.browserAction.setBadgeText({ text: `...` });
}

const callApi = () => {
    setStuff();

    setTimeout(() => fetch('https://api./api')
        .then(response => response.json())
        .then(data => {
            chrome.browserAction.setBadgeText({ text: `${data.info}` });
        }).catch(error => console.log(error)), 5000)

}

callApi()

setInterval(function () {
    callApi()
}, 300000);

Getting this error when testing it locally

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'setBadgeBackgroundColor')

• javascript
• google-chrome-extension

• 2 There's no browserAction in MV3, only action, see the migration guide. – woxxom Commented Mar 18, 2022 at 4:27
• 1 @wOxxOm can you please add an answer? – Ciprian Commented Mar 22, 2022 at 15:00

1 Answer 1

Change your code that is manifest v2:

chrome.browserAction.setBadgeBackgroundColor({ color: "green" });

const setStuff = () => {
    chrome.browserAction.setBadgeText({ text: `...` });
}

To this code for Chrome extension manifest v3:

chrome.action.setBadgeBackgroundColor({ color: "green" });

const setStuff = () => {
    chrome.action.setBadgeText({ text: `...` });
}