Vue.js behaving abnormally due to certain circumstances

Currently, I am working on a vue application where I encountered some errors related to script execution on certain websites. By implementing the following code snippet, the issue is resolved:

    if (
  window.location.href ===
  'chrome-extension://fbdhgoijldjhaidjclojhnbibaipkfmn/index.html#/'
) {
  console.log('dont run')
} else {
  new Vue({
    el: '#context-menu-app-1',
    // components: { App },
    render: (h) => h(App)
  })
}

However, the specific value 'chrome-extension://fbdhgoijldjhaidjclojhnbibaipkfmn/index.html#/' will vary for each user, making it impossible to use as a permanent solution. Instead of hardcoding this value into my condition, I attempted to check if the href contains the substring 'chrome-extension' by using the indexOf method:

if (window.location.href.indexOf('chrome-extension://')) {
  console.log('dont run')
} else {
  new Vue({
    el: '#context-menu-app-1',
    // components: { App },
    render: (h) => h(App)
  })
}

Unfortunately, this approach did not work as expected, and the error resurfaced. Can someone provide guidance on how to effectively handle this situation?

Answer №1

There appears to be an error in your condition. When using the indexof method, it will return the position of the first occurrence.

According to w3schools, the indexOf() function returns the position of the first instance of a specified value within a string.

In this situation, the resulting value will be 0, which is equivalent to false.

To correct this, you should verify whether the return value is not -1.

In instances where the sought-after value does not exist, this method will yield -1.

You can test the updated code below;

if (window.location.href.indexOf('chrome-extension://') !== -1) {
  console.log('do not proceed')
} else {
  new Vue({
    el: '#context-menu-app-1',
    // components: { App },
    render: (h) => h(App)
  })
}

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

Retrieving the result of a callback function within a nested function

I'm struggling with a function that needs to return a value. The value is located inside a callback function within the downloadOrders function. The problem I'm encountering is that "go" (logged in the post request) appears before "close" (logged ...

What causes an "Undefined index" error in jQuery when making AJAX requests?

Whenever I make an AJAX request in my main.js file, I encounter the following error message: Undefined index: id in sqlinfo.php on line 13 I am puzzled because I believe that I am populating the request object correctly. What's even more perplexing i ...

I possess a JSON object retrieved from Drafter, and my sole interest lies in extracting the schema from it

Working with node to utilize drafter for generating a json schema for an application brings about too much unnecessary output from drafter. The generated json is extensive, but I only require a small portion of it. Here is the full output: { "element": ...

What causes the discrepancy in CSS behavior between local and remote websites?

My chrome extension enhances facebook chatbox with jquery autocompletion. I am trying to make the suggestion list menu horizontal by modifying the jquery-ui.css. When changing display:block to display:inline, the list becomes horizontal in a local HTML fil ...

I'm encountering an issue with my array in JavaScript while using // @ts-check in VS Code. Why am I receiving an error stating that property 'find' does not exist on my array? (typescript 2.7

** update console.log(Array.isArray(primaryNumberFemales)); // true and I export it with: export { primaryNumberFemales, }; ** end update I possess an array (which is indeed a type of object) that is structured in the following manner: const primar ...

Using Javascript to efficiently remove elements with AJAX

Currently, I am learning the basics of HTML and focusing on tasks such as login/logout functionality, creating users, and deleting users (only permitted when logged in as an admin). For updating a user password, I have utilized PUT, for creating a user ac ...

Using Javascript to dynamically swap images within a div as the user scrolls

Can someone help me achieve a similar image scrolling effect like the one on the left side of this website: I am looking to change the image inside a div as I scroll and ensure that the page doesn't scroll further until all the images have been scrol ...

Link scripts can sometimes cause issues with node.js

Greetings! I have successfully created a client-side SPA using vanilla-router. However, my Node.js server sometimes encounters an error when attempting to load a linked script. Uncaught SyntaxError: Unexpected token '<' This error only oc ...

Drawing the canvas is taking place prior to the image being fully loaded in JavaScript

Currently, I am in the process of creating a collage using images that are all sized at 174x174 pixels. The images are stored on my server, and while my program can locate them successfully, it requires me to click the "save image" button twice for them to ...

Tips for updating information when a button is chosen

Hello everyone, I need some help with a form that has three select buttons. The button labeled "Distribute" is already selected when the page loads, and it contains information about full name, password, and location. How can I use JavaScript to create a c ...

Producing asynchronous JavaScript events using a browser extension (NPAPI)

Currently in the process of developing a web browser plugin using NPAPI. The issue I am facing is that my plugin requires a worker thread to handle certain tasks, and I need to pass events back to JavaScript as the worker progresses. However, due to the N ...

Ensure the buttons within v-card-actions are responsive to different screen sizes

I am facing an issue with a v-card that contains three buttons (v-btn) within v-card-actions. Each button has long text on it, which is causing alignment problems on small screens. The buttons are not responsive and are still aligned horizontally from left ...

What is the best way to incorporate a JSON file into a JavaScript class?

I attempted to load a JSON file within a JavaScript class, but encountered an issue where the loaded data was only accessible inside a specific function. class CreatePage { constructor() { var request = new XMLHttpRequest(); request. ...

Please anticipate the completion of data loading

I need help adding a custom tweet button to my Angular application. Below is the code I am using: HTML: <a href="" class="retweet" retweet target="_blank" data-info="{{ data.name }}"> Tweet </a> JS: myApp.directive('retweet', ...

Issues with FUNCTION_INVOCATION_FAILED error encountered during deployment on Vercel and Nuxt

Just imported a Nuxt project from GitHub that includes the vercel.json config: { "version": 2, "builds": [ { "src": "nuxt.config.js", "use": "@nuxtjs/vercel-builder" ...

Having trouble with jQuery.cookie saving my JSON data

Being new to jQuery and JSON, I find this situation quite frustrating as it seems pretty straightforward but still doesn't work for me. My ASP.NET MVC website is using AJAX (via jQuery) to load data. Everything works fine until this point. I'm ...

Utilizing jquery to showcase the information in a neat and organized table

Having an input text box and a button, I am looking to display dummy data in a table when any number is entered into the input field and the button is clicked. Here is what I have tried: My Approach $("button#submitid").click(function () { $(&quo ...

Unable to access npm run build on localhost

I have developed a web application using react and node.js, and now I want to test it with a production build. After running npm run build in the app directory, I successfully created a build folder. However, when trying to run the application using local ...

Automatically populate select2 dropdown in ASP.NET MVC Core using AJAX

Currently, I am working on a feature to automatically populate text boxes and drop-down fields in my view. To achieve this, I am using a list that I query again. I came across an example that I am referencing here. However, when trying to debug, the break ...

I'm having trouble understanding how to utilize startAt and endAt in Firebase version 9

Trying to implement geo querying in my firestore db with the new version of firebase has been challenging. The code examples provided in the documentation reference an older version, making it difficult for me to understand how to use ".startAt" and ".endA ...