All web resources need to be included in the web_accessible_resources manifest key

I'm encountering an issue with my Angular app. The error message on the client console reads:

Denying load of chrome-extension://fiekimdgbphfmnlbiahcfdgcipcopmep/js/lib/angular/angular.min.js.map. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.

I suspect that the problem lies in how I am loading my JavaScript files:

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Startup Jobs</title>

  <!-- Mobile Meta -->
  <meta name="apple-mobile-web-app-title" content="StartupJobs" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

  <!-- Typekit -->
  <script type="text/javascript" src="//use.typekit.net/zjd5rqh.js"></script>
  <script type="text/javascript">try{Typekit.load();}catch(e){}</script>

  <!-- CSS -->
  <link href="/stylesheets/reset.css" rel="stylesheet">
  <link href="/stylesheets/style.css" rel="stylesheet">    

  <!-- Google Maps -->
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&libraries=places&language=en-US"></script>

  <!-- Angular + jQuery -->
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.js"></script>
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular-sanitize.js"></script>

  <!-- Angular Plugins -->
  <script type="text/javascript"  src="/javascripts/components/infinite-scroll/ng-infinite-scroll.min.js"></script>
  <script type="text/javascript"  src="/javascripts/components/moment/moment.min.js"></script>
  <script type="text/javascript"  src="/javascripts/components/angular-moment/angular-moment.min.js"></script>


</head>

I've verified all my routes and they seem correct for the file to load successfully. It's worth noting that this error isn't occurring in Firefox. Any insights on what might be causing this issue?

Thank you in advance.

javascriptangularjsgoogle-chrome

Answer №1

After some investigation, I discovered that the culprit behind the error was the Dragdis chrome extension. Once I disabled it, the problem was resolved.

Answer №2

I encountered a similar issue while working on WebStorm. The solution was to designate the parent directory as the resource root. In WebStorm version 8.0.4, this can be accomplished by simply right-clicking on the parent folder and choosing "mark directory as", then selecting "Resource Root"

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

Strange behavior noticed in the app.get() method of Node.js Express

Seeking clarification regarding the behavior of app.get() in Express. It appears that the function is not triggered when the path includes .html at the end. In the code snippet provided, the console logs "test" if attempting to access /random/example, bu ...

javascriptnode.jsexpress

The texture appearance becomes unusual when using a ThreeJS point light

I utilized ThreeJS, specifically React Three Fiber, to construct a 3D Canvas. After adding a glb model, point light, and ambient light, the outcome was disappointing. https://i.sstatic.net/6vHaOKBM.png Why does the texture appear so jagged? Could it be ...

javascriptreactjsthree.jsgraphicsreact-three-fiber

What could be the reason for my function failing to return true?

I have a function that can check if a script is loaded: function checkURLExistence(url){ $.ajax({ url: url, success: function(data){ //alert(url + ' exists'); console.log(url + ' exists'); return ...

javascriptjquery

ReactJS: The input is not triggering the onChange event

Take a look at this code snippet: import React, { Component, useImperativeHandle } from 'react'; class SearchBar extends Component { render() { return <input onChange={this.onInputChange} />; } onInputChange(event) { console.log(event) } ...

javascriptreactjsonchange

When using jQuery, remember to encode square brackets in order to target specific

Imagine an input element <input id="meta[152][value]" type="text" /> In this case, the input field is created on-the-fly. I must choose that particular field. That's why I used, alert($('#meta[152][value]').val()); However, it appe ...

javascriptjqueryregexjquery-selectorsescaping

Steps for including a font ttf file in Next.js

As a newcomer to Nextjs, I am eager to incorporate my own custom fonts into my project. However, I find myself completely bewildered on how to execute this task (my fonts can be found in the "public/fonts/" directory). The contents of my global.css file ar ...

javascriptreactjsfontsnext.js

A guide on implementing the MVC architecture in a web application with Node.js, Express, and PostgreSQL

I'm struggling with implementing the MVC architecture in my node web app, specifically when it comes to separating the model from the controller. Currently, I have the views properly organized (all my .ejs files) and I consider my app.js as the contr ...

javascriptnode.jspostgresqlexpressmodel-view-controller

What is the best way to adjust the vertical margin in a vis.js timeline?

The vis.js timeline sets a margin of 5px in each row using inline styles that are controlled programmatically by the library. The height, top position, and transform of each item within the row are specified by the library as well. Attempting to manually ...

javascriptcsstimelinevis.js

The error message "ReferenceError: $ is not defined" is displayed within

My current requirement involves loading templates within an iframe, and to achieve this, I have implemented the following code: <div class="col m8 l8 s12 margin-top-30" id="hue-demo-bg-div"> <iframe id="myiframe" src="/themes/{{$themeid}}.ht ...

javascriptjqueryhtmliframe

Combining Three.js with iFrame for a mix of WebGL and CSS3D

After some experimentation, I successfully created a dynamic page that seamlessly integrates WebGL and CSS3D (with valuable guidance from this helpful SO post). To add an extra touch, I included an iframe: However, I noticed that the functionality to inte ...

javascripthtmlcssthree.js

Styles in NEXT.js are not loading properly due to issues with the Module

I have been attempting to apply module.css to one of my components by following the instructions provided in this tutorial https://nextjs.org/learn/basics/assets-metadata-css/layout-component. /*/components/Livestream/App.js*/ import styles from './A ...

javascriptcssreactjssassnext.js

Is it possible that the images are unable to load on the page

The frontend code successfully retrieves the image links sent by the backend but encounters issues displaying them. Despite confirming that the imgUrl data is successfully fetched without any hotlink protection problems, the images are still not appearing ...

javascriptvue.js

Is there an error when iterating through each table row and extracting the values in the rows?

Here is a basic table that I am attempting to iterate through in order to retrieve the value of each cell in every row where there are <td>s present. However, I encounter an error indicating that find does not exist despite having added jQuery. Any ...

javascriptjqueryhtml

ways of exporting and using arrays in Node.js

Constantly receiving the "undefined" error in main.js: var dbAccess = require('../dao/dbAccess'); dbaInstance = new dbAccess(); var wordPool = dbaInstance.getWordPool(); console.log (wordPool); The contents of "dbAccess.js" are as follows: var ...

javascriptnode.js

Guiding users who have disabled JavaScript through redirection

When faced with the following markup, users whose browser has JavaScript disabled will be redirected to an alternative page. This alternate page may attempt to mimic the site's functionality without JavaScript or simply display a warning message infor ...

javascriptajaxhtmlria

Error code 403 is returned when attempting to send an ajax Post request, indicating

While my code runs smoothly on localhost using a WAMP server, I encountered a 403 (forbidden) error after transferring it to a shared hosting environment. My first attempt was: $.post('login.php?login', { user_email: user_email, user_password: u ...

javascriptphpajaxxmlhttprequest

Managing numerous inquiries from a single customer within a succession of brief intervals

After creating a web application with a dashboard to showcase different reports and graphs based on user selections, I encountered an issue. Users can interact with the reports using checkboxes and radio buttons. Every time a checkbox or radio button is s ...

javajavascriptajaxjakarta-eerequest

Basic library using babel, TypeScript, and webpack - Error: (...) is not a recognized function; within Object.<anonymous>

Recently, I encountered a strange issue while trying to bundle a simple function using babel, typescript, and webpack. You can find the example that is not working at this link. To test it, simply download the code, run npm/yarn install, npm/yarn run buil ...

javascriptnode.jstypescriptwebpackbabeljs

Interacting with Rails controllers through AJAX to trigger a JavaScript function

After exploring numerous stack overflow posts without finding a working solution, I decided to seek help for a well-documented use case. I have a button that should perform the following tasks: When clicked, call a custom controller method to update th ...

javascriptjqueryruby-on-railsrubyajax

Integrate JavaScript into your HTML code

I'm a beginner in HTML and am working on creating a login form. Here is the code that I have written so far. I need help with importing my JavaScript code into the HTML form. C:\Program Files\xampp\htdocs\forsiteSystem\thems& ...

javascripthtml