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

What is the best way to update and override multiple nested NPM dependencies with various versions?

Apologies for not being fluent in English Here is my NPM dependency: dependency tree +-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6c1e090d0f184108091a4105021f1c090f18031e2c5d4255425c">[email protected]</a> ...

Enhance your user interface by incorporating badges into specific elements using Bootstrap version 5.2

I am currently using the most recent version of Bootstrap v5.2 and Vue 3 (for learning purposes). While searching on Stackoverflow, I came across a similar question, but it was related to an older Bootstrap version. In my project, I have a select element ...

Choosing an option in react-select causes the page to unexpectedly shift

Encountering a problem with a mobile modal developed using react-select. The selectors are within a div with fixed height and overflow-y: scroll. Upon selecting an option for the 'Choose observer' select, the entire modal briefly jumps down in th ...

I'm encountering an unfamiliar error within my Discord.js bot, and I'm unsure of both its cause and the appropriate solution. Additionally, I'm unsure which specific file

I'm facing a recurring issue with my bot terminal. It's been causing me trouble for the past four days, functioning intermittently without any pattern. I'm struggling to track down the specific file where this error is originating from. Any ...

Tips for displaying diverse content in a DIV container when users click on various sections of an image

Apologies for the unclear title, but I'm struggling to explain my technical goal using jargon. The basic concept is this: there will be an image on the webpage, and when a user clicks on a specific area of the image, relevant information will appear ...

Pass along the value of a link upon clicking on it

I have implemented a simple list using md-data-table: <tr md-row md-select="device" md-on-select="logItem" md-auto-select="options.autoSelect" ng-repeat="device in devices.data"> <td md-cell style='text-align:left;vertical-align:middle&apo ...

Trouble with AngularJS Controller Displaying/Hiding Content as Expected

I'm struggling to make content disappear when a button is clicked and then show a new set of content upon that button click. I can't seem to get it to work as intended. The first section simply does not disappear when the button is clicked. The s ...

Utilize the double parsing of JSON information (or opt for an alternative technique for dividing the data

Looking for the most effective approach to breaking down a large data object retrieved from AJAX. When sending just one part (like paths), I typically use JSON.parse(data). However, my goal is to split the object into individual blocks first and then parse ...

Guide on incorporating botframework into a mobile application...?

Recently, I developed a chatbot utilizing the MS bot framework in Nodejs. To display the chatbot in an HTML format without iframes, I incorporated a React Component from the link provided at https://github.com/Microsoft/BotFramework-WebChat. At this point, ...

Storing Redux state in local storage for persistence within a React application

Recently, I've been experimenting with persisting data to local storage using Redux. My approach involved creating an array of alphabet letters and setting up an event listener to log a random letter each time it's clicked. However, despite succe ...

Infinite loop readiness with JQuery

My current project involves preloading images and seamlessly fading them in once they are fully loaded using JQuery. To achieve this, I attempted to create an invisible image tag where the images would load before setting the source back to the original im ...

Tailored Filtering and Sorting Features for Material Table

In the table, there is a column labeled Active which contains data represented as 1 or 0 for active and inactive states. Instead of displaying the values as 1 or 0, a function called generateFlagText uses the render prop to show an MUI Chip component base ...

Notification of failed fetch in backbone

We are experiencing a problem with our backbone application. Our goal is to show a notification to the user when a fetch fails (due to timeout or general error). Instead of displaying an error message on a new page, we want to overlay a dialog on top of th ...

How is it possible that my form is able to save data into the database even without any

I am considering adding a captcha process to my form and I am brainstorming some logic for it. I downloaded a login from Google, but I am confused why my form is still storing data into the database using action=' ' instead of action="register.ph ...

Effortlessly sending multiple forms on a single page via POST in Express JS without the need for page refresh

I am creating a new application using ExpressJS and I want to include the following HTML code in a jade file. On one of my pages, I have 4 form buttons: <div class="dog"> <div class="dog_wrapper clearfix"> <div cla ...

When attempting to select a HTML element within a <ng-template> tag using d3.select(), it will return null

I have a situation where I have an element < svg > inside an < ng-template > <div *ngIf="data == undefined; else elseBlock"> Sorry no data! </div> <ng-template #elseBlock> <svg id="areachart" width="100%" height="210 ...

How can I create a v-slot template with dynamic content in Vue.js?

Hello there! I appreciate you taking the time to read my inquiry. Currently, I am delving into Vue.js, Vuetify, and v-data-table for a project. I am faced with a challenge of getting my v-slot to function with two different strings as the header name. < ...

JavaScript function overriding allows a subclass to provide a specific implementation of

I have a JavaScript file with two methods: var DBProcessing = function() { console.log("ok") ... } var DBProcessing = function(str) { console.log(str); ... } When calling DBProcessing(), I am only getting an output of undefined. Is there a way to expli ...

In Internet Explorer 10, it is not possible to access the document.links using the link's id; it can only be accessed using the

Why does the following code work in FireFox 23.0.1 and Chrome 29, but not in IE 10? <!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript"> function loadFile1(){ a ...

What is the best method to verify chrome.runtime.onInstalled in Chrome extension testing?

Is there a way to test the chrome.runtime.onInstalled handler? I am developing a Chrome extension that utilizes chrome storage to store specific data. In my upcoming release, I plan on making changes to the data model in chrome storage. To do this effectiv ...