Cannot read property 'onClicked' of undefined when using chrome.action or chrome.browserAction

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 173 · Answer 1 · edited Mar 08 '23 at 14:10

173

ManifestV3

manifest.json: add action (not browser_action), see also the migration guide.

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

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

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

edited Mar 08 '23 at 14:10

wOxxOm

65,848
11
132
136

answered Jul 12 '16 at 20:18

Kirill Oficerov

2,152
2
15
11

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
1

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 27 · Accepted Answer · edited Apr 27 '14 at 19:11

27

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.

edited Apr 27 '14 at 19:11

ConroyP

40,958
16
80
86

answered Jul 15 '12 at 18:19

Derek 朕會功夫

92,235
44
185
247

The link to “background page” is dead. – Philippe-André Lorin Jul 13 '22 at 10:42

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,808
22
30

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
4

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

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

10

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

534
7
8

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
Renaming browserAction to action was the missing puzzle piece, thanks. – tempvar Nov 24 '22 at 09:34

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,525
5
39
54

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,459
7
30
34

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

-3

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

35
1
6

Cannot read property 'onClicked' of undefined when using chrome.action or chrome.browserAction

7 Answers7

ManifestV3

Classic ManifestV2

Linked

Related