Encountering an error where property 'onClicked' is not defined when attempting to utilize chrome.action or chrome.browserAction in Chrome

Question

Encountering an error where property 'onClicked' is not defined when attempting to utilize chrome.action or chrome.browserAction in Chrome

I am currently developing a Chrome extension that will automatically redirect me to a specific URL when I click on the browser action icon.

Here is the code snippet that I am trying to implement:

chrome.browserAction.onClicked.addListener

However, I am encountering the following error:

Uncaught TypeError: Cannot read property 'onClicked' of undefined

Below is my manifest file configuration:

{
    "name": "My First Extension",
    "version": "1.0",
    "description": "Redirects to specified link upon clicking icon",
    "browser_action": {
        "default_icon": "icon.png",
        "default_title": "Perform action"
    },
    "permissions": ["tabs", "http://*/*"],
    "content_scripts": [{
        "matches": ["http://*.example.com/*", "https://*.example.com/*"],
        "js": ["script.js"]
    }],
    "icons": {
        "16": "icon.png",
        "48": "icon.png",
        "128": "icon.png"
    }
}

This is the content of my JavaScript file:

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

javascript google-chrome-extension

Answer 1

Answer №1

Transitioning to ManifestV3

manifest.json: Update by adding action instead of browser_action, refer to the migration guide.

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

background.js: Make sure to use chrome.action and not chrome.browserAction.

For Classic ManifestV2 Users

If you have previously included

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

and encounter an error like

Cannot read property 'onClicked' of undefined

, simply add

"browser_action": {}

to your manifest.json file.

Answer 2

Transitioning to ManifestV3

manifest.json: Update by adding action instead of browser_action, refer to the migration guide.

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

background.js: Make sure to use chrome.action and not chrome.browserAction.

For Classic ManifestV2 Users

If you have previously included

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

and encounter an error like

Cannot read property 'onClicked' of undefined

, simply add

"browser_action": {}

to your manifest.json file.

Answer 3

Answer №2

It appears that the code resides in your twterland.js file, specifically within your content script. Please note that browserAction is only accessible on extension pages and cannot be utilized in content scripts.

For more information, refer to the documentation: https://developer.chrome.com/extensions/content_scripts

Nevertheless, it's important to acknowledge that content scripts come with certain restrictions. They are unable to:
- Utilize chrome.* APIs (with the exception of parts of chrome.extension)
- Access variables or functions defined by their extension's pages
- Access variables or functions defined by web pages or other content scripts

Consider placing the code on the background page instead.

Answer 4

It appears that the code resides in your twterland.js file, specifically within your content script. Please note that browserAction is only accessible on extension pages and cannot be utilized in content scripts.

For more information, refer to the documentation: https://developer.chrome.com/extensions/content_scripts

Nevertheless, it's important to acknowledge that content scripts come with certain restrictions. They are unable to:
- Utilize chrome.* APIs (with the exception of parts of chrome.extension)
- Access variables or functions defined by their extension's pages
- Access variables or functions defined by web pages or other content scripts

Consider placing the code on the background page instead.

Answer 5

Answer №3

If the "browser_action" property is not included in your manifest.json file, you may encounter this particular error. In addition to following @Kirill's solution, make sure to also include an empty icon.png file to prevent Chrome from reporting an error related to the missing image file.

To resolve this issue and prevent the error from appearing, add the following line to your manifest.json file:

"browser_action": {}

For more detailed instructions on using the "browser_action" setting, refer to the official Chrome Extension documentation.

Answer 6

If the "browser_action" property is not included in your manifest.json file, you may encounter this particular error. In addition to following @Kirill's solution, make sure to also include an empty icon.png file to prevent Chrome from reporting an error related to the missing image file.

To resolve this issue and prevent the error from appearing, add the following line to your manifest.json file:

"browser_action": {}

For more detailed instructions on using the "browser_action" setting, refer to the official Chrome Extension documentation.

Answer 7

Answer №4

If you encounter the same issue while using manifest_version 3, here are some key changes to make:

Replace "background.scripts" with "background.service_worker"
Replace "browser_action" with "action"
In your JavaScript code, update instances of chrome.browserAction with chrome.action

For more detailed information and guidance, refer to: Manifest version 3 migration documentation

Answer 8

If you encounter the same issue while using manifest_version 3, here are some key changes to make:

Replace "background.scripts" with "background.service_worker"
Replace "browser_action" with "action"
In your JavaScript code, update instances of chrome.browserAction with chrome.action

For more detailed information and guidance, refer to: Manifest version 3 migration documentation

Answer 9

Answer №5

After facing the same issue, I found that including

"persistent": true

in my background definition within manifest.json fixed the problem.

Answer 10

After facing the same issue, I found that including

"persistent": true

in my background definition within manifest.json fixed the problem.

Answer 11

Answer №6

It is important to note that in your manifest.json file, you can only have one of the following options: app, browser_action, or page_actions.

For instance, if you want to utilize the chrome.browserAction.setBadgeText function, you must include the browser_action field in your manifest.json.

Answer 12

It is important to note that in your manifest.json file, you can only have one of the following options: app, browser_action, or page_actions.

For instance, if you want to utilize the chrome.browserAction.setBadgeText function, you must include the browser_action field in your manifest.json.

Answer 13

Answer №7

Ever since the introduction of manifest v3, the browser_action has been replaced with action. Click here for more information

To update your manifest file accordingly, make sure to include the following:

"action": {},

You can then manage the extension click event using the following code:

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

Answer 14

Ever since the introduction of manifest v3, the browser_action has been replaced with action. Click here for more information

To update your manifest file accordingly, make sure to include the following:

"action": {},

You can then manage the extension click event using the following code:

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

Answer 15

Answer №8

To avoid any issues, it is important to ensure that jquery.js does not come before background.js in the scripts array of background within manifest.json.

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

Answer 16

To avoid any issues, it is important to ensure that jquery.js does not come before background.js in the scripts array of background within manifest.json.

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

Encountering an error where property 'onClicked' is not defined when attempting to utilize chrome.action or chrome.browserAction in Chrome

Answer №1

Transitioning to ManifestV3

For Classic ManifestV2 Users

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Similar questions

Utilize the power of XMLHttpRequest to fetch and load numerous audio files, seamlessly integrating them for playback through the Web Audio

Using jQuery to create dynamic elements that fade out with timers

Guidelines for establishing authentic headers on a SignalR connection

Is it possible to launch an Electron application by clicking a run button in the VSCode

Magical Stylist - Eradicate Indicators while Preserving Labeling

What is the best way to transfer an id from JavaScript to Rails while utilizing ajax?

Even with React.memo(), functional components continue to trigger re-renders

Angular Reacts to Pre-Flight Inquiry

Issues with the functionality of the ZeroClipboard Angular plugin

"Triggering an AJAX POST request with a click event, unexpectedly receiving a GET response for

Having trouble getting the Bootstrap tooltip to work on a Select option?

When the form is submitted, the values of the items are being reverted back

Exploring Angular 2 Beta 8: An Introduction to @Query Usage

In React, ensure a component's state is preserved when the browser history changes

Moving from one page to another

Correctly define the vm function within the Controller As scope

Having trouble triggering a click event on Ant Design menu button using jest and enzyme

Exploring Javascript bugs in Visual Studio (or any other JS debugger)

The promise is only guaranteed to resolve correctly upon the refreshing of the page

When attempting to use Ajax, the operation fails; however, if I directly access the URL,