Why is chrome.browserAction.onClicked undefined?
JavascriptGoogle Chrome-ExtensionJavascript Problem Overview
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"); });
Javascript Solutions
Solution 1 - Javascript
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
.
Solution 2 - Javascript
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.
Solution 3 - Javascript
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.
Solution 4 - Javascript
I was also getting this, adding
"persistent": true
to my background declaration in manifest.json solved it.
Solution 5 - Javascript
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
Solution 6 - Javascript
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.
Solution 7 - Javascript
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"]
}