Axios is not defined in background.js (manifest v3)

Question

I am currently working on a chrome Extension.

My desired workflow: content-script.js sends a message to background.js. Once the message is received by background using eventListener, background starts executing a process which includes an axios.post request as well as localStorage.setItem. Since I have migrated the project's manifest to V3, background.js becomes a service worker. Hence while executing the extension, the background.js console says that "axios is not defined" as well as "localStorage is not defined". Hence I need a way to use this in background.js (manifest v3).

Note: I also tried using chrome.storage.local, but the set function's callback is getting called, but the get function doesn't get any value.

Answer 1

Do not forget to place the "storage" permission in the manifest file.

manifest.json (v3)

{
  "name": "Test extenstion",
  "description": "Test Extension!",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "action": {},
  "permissions": ["storage", "activeTab", "scripting"]
}

Background.js

chrome.storage.sync.set({key: value}, function() {
  console.log('Value is set to ' + value);
});

chrome.storage.sync.get(['key'], function(result) {
  console.log('Value currently is ' + result.key);
});

Source: https://developer.chrome.com/docs/extensions/reference/storage/#usage