Uncaught TypeError: Cannot read properties of undefined (reading 'onClicked')

Question

I'm trying to migrate my chrome pure JS extension into a vuejs version. All my pureJS version works fine.

But with vuejs i have an unintelligible error loading extension.

Here is my manifest.json and my vue.config.js : Manifest :

{
  "manifest_version": 2,
  "name": "__MSG_appName__",
  "version": "2.1.0",
  "homepage_url": "https://*****.*********/",
  "description": "****** Vuejs",
  "default_locale": "fr",
  "permissions": [
    "activeTab",
    "<all_urls>",
    "*://*/*",
    "storage"
  ],
  "icons": {
    "48": "icons/icon-48.png",
    "64": "icons/icon-64.png",
    "128": "icons/icon-128.png"
  },
  "background": {
    "scripts": [
      "js/background.js"
    ],
    "persistent": true
  },
  "browser_action": {
    "default_popup": "popup.html",
    "default_title": "__MSG_appName__",
    "default_icon": {
      "48": "icons/icon-48.png",
      "64": "icons/icon-64.png"
    }
  }
}

vue.config.js :

module.exports = {
  pages: {
    popup: {
      template: "public/browser-extension.html",
      entry: "./src/popup/main.js",
      title: "Popup",
    },
  },
  pluginOptions: {
    browserExtension: {
      componentOptions: {
        background: {
          entry: "src/background.js",
        },
        contentScripts: {
          entries: {
            "content-script": [
              "src/content_scripts/contentScript.js",
              "src/content_scripts/config.js",
              "src/content_scripts/capture.js",
            ],
          },
        },
        permissions: [
          "<all_urls>",
          "activeTab",
          "contextMenus",
          "notifications",
          "storage",
          "identity",
        ],
        browser_action: {},
      },
    },
  },
};

Project is compiling without any problem. Then i load my extension on browser by pointing to /dist folder. And then i have the error Uncaught TypeError: Cannot read properties of undefined (reading 'onClicked') and my extension show blank popup. Here is the part of code which cause the error :

browser.contextMenus.onClicked.addListener(async (info, tab) => {

Of course i tried with "chrome" instead of "browser", without success...

Any help would be appreciated. Thank you in advance.

Ravelment

Sounds like you call this code in a content script. Content scripts can't access this API. You need to do it in background.js – Dripdry

@wOxxOm No, i call that code from background.js... – Ravelment

Answer 1

I had the same issue, Found out that you need to add "action": {} to your manifest.json.

{
  "manifest_version": 2,
  "name": "__MSG_appName__",
  "version": "2.1.0",
  "homepage_url": "https://*****.*********/",
  "description": "****** Vuejs",
  "default_locale": "fr",
  "action": {},
  "permissions": [
    "activeTab",
    "<all_urls>",
    "*://*/*",
    "storage"
  ],
  "icons": {
    "48": "icons/icon-48.png",
    "64": "icons/icon-64.png",
    "128": "icons/icon-128.png"
  },
  "background": {
    "scripts": [
      "js/background.js"
    ],
    "persistent": true
  },
  "browser_action": {
    "default_popup": "popup.html",
    "default_title": "__MSG_appName__",
    "default_icon": {
      "48": "icons/icon-48.png",
      "64": "icons/icon-64.png"
    }
  }
}

Sacrilegious

I was struggling with Manifest v3 and this fixed it for me too. – Whitelaw

Answer 2

I replaced code by

browser.browserAction.onClicked.addListener(async (info, tab) => {

And it works.

Ravelment