Leverage AngularJS within your Chrome extension

Attempting to integrate AngularJS into a Chrome extension, I encountered the following error:

Error: SECURITY_ERR: DOM Exception 18
Error: An attempt was made to break through the security policy of the user agent.
    at new listConnection

manifest.json :

 {
  "name": "Secure Chrome Connection",
  "version": "1",
  "icons": { "48": "icon.png",
            "128": "icon.png" },
  "description": "Secure Chrome Connection is an extension for Google Chrome browser. It ensures secure profile connections.",
  "background": {
    "scripts": [
      "chrome_ex_oauthsimple.js",
      "chrome_ex_oauth.js",
      "background.js"
    ]
  },
  "browser_action": {
    "default_title": "Secure Chrome Connection",
    "default_icon": "icon.png",
    "default_popup": "index.html"
  },
  "permissions": [
    "storage"
  ],
  "web_accessible_resources": ["index.html"],
  "sandbox": {
     "pages": ["index.html","index.js","angular.min.js"]
  },
  "manifest_version": 2
}

index.js :

function listConnection( $scope) {      
    $scope.connections = JSON.parse(localStorage['connectionHistory']);
}

The issue seems to be with the JSON.parse() function being blocked by Chrome's Content Security Policy (CSP).

Does anyone have a solution?

javascriptgoogle-chrome-extensionangularjs

Answer №1

Your index.js is sandboxed as specified in your manifest.json configuration file.
"A sandboxed page will be restricted from accessing extension or app APIs"
Therefore, it does not have access to localstorage.
To address this issue, you can either remove the sandbox restriction or utilize a tool like https://github.com/jamesmortensen/chrome-sandbox-storageAPI designed for sandboxed pages.

Answer №2

Here are a couple of solutions for you:

  1. To resolve the issue, include ng-csp in your <html> tag. Simply add it like this: 
    <html ng-csp ng-app="AngularAppName">
    . For further details, refer to this Stack Overflow answer.
  2. Add the following line to your manifest.json file

"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self' "

Answer №3

Coding Challenges to Address

Here are a few issues I have noticed with the code you shared:

  • Your index.html serves as default_popup, web_accessible_resources, and in sandbox Pages. This usage is incorrect functionally. What are you trying to achieve?
  • Why place angular.min.js in the sandbox location?
  • If index.js is used by index.html, listing it explicitly may be unnecessary.
  • Each domain has its own storage object, so your use of localStorage may differ between the sandbox and other pages.

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 retrieve an accurately matched array?

I am working on a function that analyzes a string of DNA and should return an accurately matched DNA array. Here is the code snippet I have experimented with: function checkDNA(dna) { var dnaarr = []; for(var i = 0; i < dna.length; i++) { ...

javascripttypescriptbioinformatics

Creating an object and setting its prototype afterwards

While exploring examples and questions online about prototypal inheritance, I noticed that most of them involve assigning prototypes to constructor functions. One common pattern is shown in the code snippet below: Object.beget = function (o) { var F = ...

javascriptinheritanceprototypeprototype-programming

conversion of markdown into a JSON object

Upon importing a markdown file into a node module using a webpack loader, I encountered an issue. The imported file is a text book with chapters separated by h2 tags. I am seeking a solution to convert this markdown file into a JSON object where each h2 t ...

javascriptjsonnode.jsconvertersmarkdown

How to choose `optgroup` in Vue 1.x

In previous iterations of vue.js, developers had the ability to generate a dynamic select list utilizing optgroups similar to the example found here. In the latest versions of vue, the documentation suggests using v-for within the options instead of optgr ...

javascriptvue.js

Camera with WebGL Rendering

As a newcomer to WebGL, I encountered an issue when incorporating a Camera object into my project. You can view my basic example on Fiddle, where I have a cube centered at (0, 0, 0) with walls drawn using Angular. The controls allow for camera movement an ...

angularjswebgl

The requested URL cannot be loaded due to the Access-Control-Allow-Methods in the preflight response not allowing the PUT method

When making an Ajax request using AngularJS, I encountered a problem with the $http method. It works well with both get and post requests, but throws an error with put. Response Header : Access-Control-Allow-Headers:Origin, X-Requested-With, Content-Type ...

javascriptangularjsajax

Retrieving data from multiple mongo collections and merging selected attributes from the output

I'm attempting to query a Mongo collection, extract an attribute from each object returned, use that attribute to retrieve data from another collection, and then combine the data. I am unsure of how to achieve this on mongoDB. To break it down, what I ...

javascriptnode.jsmongodb

Ways to transmit information to ajax using both an image and a string

I'm facing an issue while trying to upload an image along with other data to my database. The code seems to be working fine for the image, but I'm unable to include the name and additional information along with it. var formdata = new FormData ...

javascriptphpjquerymysqlajax

Updating the state using ui-router

The application consists of pages labeled as X, Y, and Z. The intended route is to navigate from page X to select details, then move onto page Y to select additional details, and finally land on page Z. I wish that upon clicking the window's back butt ...

javascriptangularjsangular-ui-router

Setting up an Ubuntu Node.js server and deploying AngularJS websites: A step-by-step guide

Is there a way to properly deploy websites built on Angular (autogenerated with Yeoman) on an Ubuntu server? I have a project built in Angular, generated using Yeoman's basic example. I can run it and view it on my computer with "grunt serve," but I&a ...

angularjsnode.jsubuntuyeoman

Create dynamic and interactive content by embedding text within SVG shapes using the powerful D

How can I write text into an SVG shape created with d3.js and limit it to stay inside the shape similar to this example http://bl.ocks.org/mbostock/4063582? I attempted to use a clipPath following the example provided. However, when inspecting with firebu ...

javascripthtmld3.jssvg

RTK Query may sometimes encounter undefined values when fetching data

I am new to using Redux and facing an issue while trying to display data in a Material UI Select. When I try to show the user's name, it works perfectly, but when I do the same for the partner's data, they appear as undefined. In my server index ...

javascriptreactjsmongoosereact-reduxredux-toolkit

What is the most effective method for pausing execution until a variable is assigned a value?

I need a more efficient method to check if a variable has been set in my Angular application so that I don't have to repeatedly check its status. Currently, I have a ProductService that loads all products into a variable when the user first visits the ...

javascriptangulartypescriptasynchronous

XSRF Cookies are failing to attach to the request header when an https iframe is being loaded on an http site

Recently, I successfully implemented XSRF protection on a website using MVC and AngularJS. The secure site can be accessed in two ways: through a direct post or within an iframe. Below is the code snippet: .config(function ($httpProvider) { $h ...

angularjsasp.net-mvcinternet-exploreriframecsrf

I am having trouble scrolling through the main content when the side-drawer is open. How can I fix this issue?

When the sidebar is opened, I am facing issues with the main content scroll and certain fields such as select options and search bar not functioning properly. I have included the main content in the routes from which it is being loaded. However, the scroll ...

javascripthtmlcssreactjsmaterial-ui

Having trouble seeing the Facebook registration page on Firefox?

Encountering some issues with Facebook and Firefox. Specifically, the registration popup on Facebook always appears empty when using Firefox. I have tried different approaches to the popup code but so far, nothing seems to be resolving the issue. Is there ...

javascriptfacebookfirefoxfacebook-javascript-sdkregistration

Troubleshooting problems with angular 4 involving node-rdkafka, kafka-node, and loading

As someone new to web front-end development, I find myself a bit overwhelmed by the JS/Node/Angular world, especially when it comes to loading kafka client libraries. I've been exploring two options for accessing my kafka cluster: node-rdkafka and kaf ...

javascriptnode.jsangularapache-kafkaangular-cli

Troubleshooting Karma in Gulp: Why "undefined" is causing a function error

Currently, I am referencing the gulp-karma GitHub page to help me execute my karma tests in Travis-CI. This snippet is from my Gulp file: var gulp = require('gulp'); var Server = require('karma').server; gulp.task('test', ...

angularjsnode.jsjasminegulpkarma-runner

ways to undo modifications made to a value within an input field using jquery or javascript

$(document).ready(function () { //Highlight row when selected. $(function () { $('#Cases tr').click(function () { $('#Cases tr').removeClass('selectedRow'); $(this).addClass(&apos ...

javascriptjqueryhtml

Ways to access UserProfile in a different Dialogio

For the implementation of a chatbot, I am utilizing Microsoft's Bot Builder framework. However, upon implementing an alternative path to the dialog flow, I noticed that the user's Profile references are getting lost. Here is the code snippet fr ...

javascriptnode.jstypescriptbotframeworkchatbot