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

admin管理员组

文章数量:1134744

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/*", "https://*.twitter/*"],
        "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"); });

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
• google-chrome-extension

Share Improve this question Follow edited Mar 8, 2023 at 14:09 woxxom 73.4k1414 gold badges155155 silver badges160160 bronze badges asked Jul 15, 2012 at 17:51 Alon MahlAlon Mahl 73311 gold badge55 silver badges44 bronze badges 0

Add a comment  | 

8 Answers 8

Sorted by: Reset to default 185

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

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.

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.

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

I was also getting this, adding

"persistent": true 

to my background declaration in manifest.json solved it.

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.

Since manifest v3, browser_action is changed to action. https://developer.chrome.com/docs/extensions/develop/migrate/api-calls#replace-browser-page-actions

So in the manifest, have the following:

"action": {},

And then you can handle the extension click with:

chrome.action.onClicked.addListener(function (tab) {...})

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"]
}

本文标签：