chrome extension: Uncaught TypeError: Cannot read properties of undefined (reading 'onClicked')

Question

I have been creating a chrome extension that should run a certain script(index.js) on a particular tab on extension click.

service_worker.js

// action on extension click
chrome.browserAction.onClicked.addListener(function (tab) {
    chrome.tabs.executeScript({
        tabId: tab.id,
    }, { file: "index.js" });

});

I have also tried

chrome.action......

and

browser....

But nothing works, I am using manifest v3.

manifest.json

{
    "name": "Meet scraper",
    "version": "0.1",
    "author": "Naveenkumar M",
    "description": "Scrapes meet data from meetup.com",
    "manifest_version": 3,
    "permissions": [
        "activeTab",
        "tabs"
    ],
    "background": {
        "service_worker": "service_worker.js"
    }
}

And my index.js file is

console.log("Hello world")

I got the error

correct me if I am wrong

Answer 1

Manifest v3:

You need to add actions inside your manifest file:

{
   "action": { }
}

Then you can call it like this:

chrome.action.onClicked.addListener(tab => { … });

Docs: https://developer.chrome.com/docs/extensions/reference/action/#injecting-a-content-script-on-click

---

Manifest v2:

The following keys must be declared in the manifest to use this API.

browser_action

Docs: https://developer.chrome.com/docs/extensions/reference/browserAction/