Search code examples
javascriptgoogle-chromegoogle-chrome-extension

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

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 enter image description here

correct me if I am wrong

Solution

  • 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/