Why is chrome.browserAction.onClicked undefined?

Question

I'm writing a Chrome extension that will redirect me to a URL when clicking on the browser action icon.

I'm trying to use:

chrome.browserAction.onClicked.addListener

but I get

Uncaught TypeError: Cannot read property 'onClicked' of undefined

This is my manifest file:

{
    "name": "first extension",
    "version": "2.2.12",
    "description": "redirct to a link icon",
    "browser_action": {
        "default_icon": "icontest.png",
        "default_title": "Do action"
    },
    "permissions": ["tabs", "http://*/*"],
    "content_scripts": [{
        "matches": ["http://*.twitter.com/*", "https://*.twitter.com/*"],
        "js": ["twterland.js"]
    }],
    "icons": {
        "16": "icontest.png",
        "48": "icontest.png",
        "128": "icontest.png"
    }
}

This is my js file:

chrome.browserAction.onClicked.addListener(function(tab) { alert("hi"); });

score 155 · Answer 1 · edited Jan 03 '22 at 07:46

155

Classic ManifestV2

For those who already have added something like

"background": {
    "scripts": ["background.js"]
}

and still gets Cannot read property 'onClicked' of undefined - just add

"browser_action": {}

into your manifest.json

ManifestV3

manifest.json: use action not browser_action, see also the migration guide.

"background": {"service_worker": "background.js"}
"action": {}

background.js: use chrome.action not chrome.browserAction.

edited Jan 03 '22 at 07:46

wOxxOm

53,493
8
111
119

answered Jul 12 '16 at 20:18

Kirill Oficerov

1,912
2
13
10

2

This is actually my problem. My script was already background. It's just I have never declared any `browser_action` to begin with. – Luke Vo Feb 11 '17 at 07:32
9

`"browser_action": {}` is sufficient – Pacerier Aug 07 '17 at 15:34
Why????????? This makes no sense... I changed the icon to another file and it failed to execute. I change it back to icon.png and all is well! Thank you, but I am really scratching my head... – birwin Sep 06 '17 at 21:49
Same for page_action – Illidan Mar 01 '21 at 16:04
Thank you. You just saved my life – negabaro Jul 17 '21 at 18:03
this would not work if the manifest version is 3 – Yash Kumar Verma Dec 26 '21 at 04:05
Strange that `browserAction` is not marked as deprecatef yet... – TrySpace May 19 '22 at 16:00

score 24 · Accepted Answer · edited Apr 27 '14 at 19:11

It seems like the code is in your twterland.js file, which is your content script. browserAction can only be used in extension pages, so you can not use it in content scripts.

Document: https://developer.chrome.com/extensions/content_scripts

However, content scripts have some limitations. They cannot:
- Use chrome.* APIs (except for parts of chrome.extension)
- Use variables or functions defined by their extension's pages
- Use variables or functions defined by web pages or by other content scripts

Put it on the background page instead.

score 19 · Answer 3 · answered Feb 21 '17 at 21:52

19

If you do not have a "browser_action" property defined in your manifest.json then this error may occur. @Kirill's answer works but you also have to add a blank icon.png file else chrome will throw an error that it cannot find such a file.

Adding this to the manifest.json file should suppress this is error:

"browser_action": {}

Be sure to read the documentation for further reference on how to use the "browser_action" setting.

answered Feb 21 '17 at 21:52

Sgnl

1,708
20
29

1

I have browser_action defined in my manifest, still `chrome.pageAction` is not defined in my background script – Alexander Mills Jan 08 '18 at 19:54
@AlexanderMills The orginal question was regarding `chrome.browserAction` so I'm not sure about `pageAction`. – Sgnl Jan 08 '18 at 20:15
3

I also had to remove and reinstall the extension. – Evanss Jan 08 '21 at 15:24

score 6 · Answer 4 · answered Mar 18 '21 at 23:46

6

The same problem may appear if you are using manifest_version 3. In this case

"background.scripts" should be replaced with "background.service_worker"
"browser_action" should be replaced with "action"
in js code chrome.browserAction should be replaced with chrome.action

detailed information could be found here: Manifest version 3 migration documentation

answered Mar 18 '21 at 23:46

Anatoly Tutov

424
5
6

Thank you! This saved me - i knew about the first three but the `chrome.action` one is the one i didn't know about! – DerTarchin May 19 '22 at 14:09

score 4 · Answer 5 · answered Dec 10 '17 at 23:20

4

I was also getting this, adding

"persistent": true

to my background declaration in manifest.json solved it.

answered Dec 10 '17 at 23:20

Fergal Moran

4,428
4
39
53

While this "solves" the situation, there are apparently quite a few reasons *not* to have `"persistent": true`, so it isn't an ideal solution. – AntonOfTheWoods Sep 18 '20 at 08:31
Note that if your Chrome extension is using Version3 in the Manifest, this feature won't exist. – Raleigh L. Jan 10 '22 at 23:44

score 1 · Answer 6 · answered Jul 11 '20 at 17:26

1

Please notice that you can heave only one of app, browser_action, page_actions present in your manifest‎.json file.

For example, to use the chrome.browserAction.setBadgeText you should have the browser_action field in your manifest‎.json.

answered Jul 11 '20 at 17:26

HasanAboShally

18,109
7
29
34

score -2 · Answer 7 · answered Apr 28 '19 at 09:36

-2

Make sure we don't have jquery.js before background.js in the scripts array of background in manifest.json.

"background": {
    "scripts": ["background.js","jquery.js"]
}

answered Apr 28 '19 at 09:36

Vinayak Bansal

37
6

Why is chrome.browserAction.onClicked undefined?

7 Answers7

Classic ManifestV2

ManifestV3

Linked

Related