We encountered an error: Unable to access properties of an undefined variable (referencing 'onClicked')

I am currently in the process of converting my Chrome pure JS extension into a Vue.js version. The pure JS version works perfectly fine.

However, when using Vue.js, I encounter an error that I can't seem to understand while loading the extension.

Below are my manifest.json and vue.config.js files:

{
  "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: {},
      },
    },
  },
};

The project compiles without any issues. However, when I load my extension in the browser by pointing to the /dist folder, I receive the error Uncaught TypeError: Cannot read properties of undefined (reading 'onClicked') and my extension displays a blank popup. The following code snippet is where the error occurs:

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

I have also tried replacing "browser" with "chrome", but without success...

Any assistance would be greatly appreciated. Thank you in advance.

javascriptvue.jsgoogle-chrome-extensionfirefox-addon-webextensions

Answer №1

I faced the same problem, Realized that you have to include "action": {} in your manifest.json file.

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

Answer №2

I made a substitution in the code with:

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

The change was successful and the functionality is now working as intended.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Accessing variables in AngularJS from one function to another function

I am facing an issue where I need to access a variable in one function from another function. My code structure is as follows: NOTE: The value for submitData.alcohol is obtained from elsewhere in my code. angular.module('app',['ui.router&a ...

javascriptangularjs

What is the process for incorporating controls within the three.js editor interface?

First and foremost, I want to express my gratitude for your assistance and understanding! As someone relatively new to coding, I have been exploring the various examples provided by three.js. By following these examples, I have successfully created a basic ...

javascripthtmlthree.js

I am interested in displaying all the items on the list instead of just one

<html> <head> <link rel="stylesheet" type="text/css" href="mango.css"> <script> function showItems(){ var items = document.querySelectorAll("#main li"); items.forEach(i ...

javascripthtmlcssmenuonclick

Transitioning between pages in Vue or React with elements smoothly continuing from one page to

I'm struggling to find the best approach for creating a smooth page transition where an element transitions from one view to another, similar to the animation of the book thumbnail or surfboard in the linked images below. My primary focus is on Vue d ...

reactjsanimationvue.jstransition

Steps for implementing a single proxy in JavaScript AJAX with SOAP, mirroring the functionality of the WCF Test Client

I am working with a WCF web Service and a javascript client that connects to this service via AJAX using SOAP 1.2. My goal is to pass a parameter to instruct the AJAX SOAP call to use only one proxy, similar to how it is done in the WCF Test Client by unch ...

javascriptajaxwcfsoapproxy

What is the best way to obtain the current route name within a Component?

Is it possible to retrieve the current route name in a controller? I have attempted using this.route, this.currentRoute, and this._routerRoot, but none of them seem to work. computed: { currentRoute:{ get(){ console.log(this.__routerRoo ...

javascriptvue.jsvuexvue-router

Utilizing Async / Await in the created lifecycle hook - Vue2

I recently installed the vue-element-loading package and added its component to my page.vue: <vue-element-loading :active="isActive" :is-full-screen="true"/> After adding a variable to my data: data () { return { isActive: false, } } I th ...

javascriptvue.jsaxios

Identify the completion of all JQuery, JavaScript, and Ajax requests

Is there a way to inject a script into a page that can determine if any scripts are still running, Ajax calls are in progress, or the page is not fully loaded? This is important for checking the existence of various elements using JQuery and performing act ...

javascriptajaxjquerysynchronous

Is it possible to animate captions and slides individually within a Bootstrap 5 carousel?

Beginner coder here, testing my skills with a self-assigned task. I've created a carousel using Bootstrap 5 with three slides, each containing two lines of captions. As the slides transition, the captions move in opposite directions—up and down. Ho ...

javascriptcsshttpcarouselbootstrap-5

Creating an array of strings that automatically inserts commas when rendered in HTML

I am currently working on populating an array with a list of names: for (const approve of requestApproval[strings.Approve]) { approved.push( approve.Title + '<br/>' ); } The populated array can be viewed at this link: http ...

javascripthtmlarrays

How can I efficiently transfer information between AngularJS modules?

Angular offers the flexibility of creating independent Modules that can be reused in various parts of your application. Imagine having a module dedicated to managing lists, which you want to use across your entire application and populate in different ways ...

javascriptangularjs

Rendering points as circles using BufferGeometry in Three.js

Recently, I've started exploring three.js and shaders for the first time. I'm trying to generate a sphere made up of particles that move like waves across its surface. Currently, my progress looks like this: https://i.sstatic.net/CqyOe.png Howev ...

javascriptthree.jswebglshader

Tips for verifying a login modal on an asp.net webforms using jQuery?

I am currently working on an asp.net webpage that utilizes a modal bootstrap for user login. Upon clicking the Login button, it should authenticate the user and initiate a server-side method called "ExportToZip" to download a zip file. My issue lies in ens ...

javascriptjqueryasp.netasp.net-ajax

Express throwing module errors

I encountered an issue while attempting to expose a REST service in an electron app using expressJS. Following a tutorial, I added express and @types/express to the project. However, when trying to implement a "get" method and running the build with ng bui ...

javascripttypescriptexpressnpmelectron

Using JavaScript to Swap Objects in Array by ID

After retrieving a series of objects from an API and storing them in an array, I have encountered a situation like this: array = [ {id: 0, name: "First", relationship: "Friend"}, {id: 1, name: "Second", relationship: "F ...

javascriptarraysapivue.jsobject

What is the best way to ensure changes to an item in a Model array are reflected across different scopes?

I am dealing with a scenario where I have both a parent $scope and a child $scope. When the child view loads, I initiate a GET request to fetch JSON data (an array containing hundreds of objects). This data is then passed to the parent $scope. Within the ...

javascriptangularjsangularjs-scopeangularjs-ng-repeat

What is the best way to eliminate the last dropdown divider class from a list of items in VueJS

I'm currently facing an issue with a dropdown divider in my Vue.js bootstrap application. I have a list of items and I want to add a line between each item using the dropdown-divider class. While this is working fine, I now need to remove the last lin ...

vue.jsbootstrap-4

Error encountered while using jQuery Ajax - unable to properly handle the error

Currently, I am having issues with my ajax query when trying to retrieve the login status. The function seems to be malfunctioning. function getdetails(playlistname) { alert(playlistname); $.ajax({ type: "POST", url: "model/login_details1.php", ...

javascriptphpajaxjquery

Library that supports Base64 encoding and decoding for both C and JavaScript environments

Are there any base 64 encoding and decoding libraries that are compatible with both C and JavaScript? Ideally, the library would have identical algorithms for both the encode and decode functions, allowing it to be used for desktop application clients (C++ ...

javascriptcbase64

How can I use the v-btn 'to' prop to redirect to a different website instead of just adding a path to the base URL (localhost)?

I've set up a Vue.js project with Nuxt and Vuetify.js. I'm attempting to incorporate FontAwesome icons as v-btns to direct users to an Instagram page. However, when clicking on the icon, the browser redirects to http://localhost:3000/https://ww ...

vue.jsfont-awesomevuetify.js