Take the 2-minute tour ×

I want to use angularJS on chrome extension but i have an error like that :

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": "Chrome auditor connection",
  "version": "1",
  "icons": { "48": "icone.png",
            "128": "icone.png" },
  "description": "Chrome-auditor-connection is an extension for Google Chrome browser. It ensures that nobody connects to your browser with your profile.",
  "background": {
    "scripts": [
  "browser_action": {
    "default_title": "Chrome auditor connection",
    "default_icon": "icone.png",
    "default_popup": "index.html"
  "permissions": [
  "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']);

I think the JSON.parse is blocked by the Chrome "Content Security Policy" (CSP).

Do you have any solution ?

share|improve this question
add comment

4 Answers

Your index.js is sandboxed as defined in your manifest.json file.
"A sandboxed page will not have access to extension or app APIs"
So it can't access localstorage.
Remove the sandbox or use something like https://github.com/jamesmortensen/chrome-sandbox-storageAPI for sandboxed pages.

share|improve this answer
Local-storage is not an extension or app API, it has its own local-storage,BTW how does the link help ? –  Sudarshan Jan 19 '13 at 10:52
@Sudarshan - The Chrome Sandbox StorageAPI is a library that uses postMessage to pass Chrome Storage data from a non-sandboxed wrapper to a sandboxed iframe, which can neither use localStorage nor Chrome Storage. Alexander suggests storageAPI because it provides an abstraction that allows one to replace window.localStorage, without having to rewrite code, when porting a web page to a sandboxed iframe. However, I'm not sure it will work with the array notation, since I didn't design it with that in mind. So the asker would need to instead use the getItem method. Hope this helps! –  jmort253 Oct 31 '13 at 1:49
add comment

There are two answers for you:

  1. Add ng-csp to your <html> tag, like this <html ng-csp ng-app="AngularAppName"> . See this SO answer
  2. Add this line to manifest.json file


share|improve this answer
add comment
up vote 1 down vote accepted

I will resume my project from scratch. Do you know a chrome extension using angularJS simple enough that I can copy the structure? (file manifest.json etc ...) The extension "angularjs-batarang" is too complicated to be analyzed!

share|improve this answer
add comment

Problems in your code

These are some of problems i see so far with code shared!.

  • Your index.html is being used as default_popup, web_accessible_resources and in sandbox Pages . It is functionally incorrect, what is you want to develop?
  • Why do you want to put angular.min.js in sandbox location?
  • Is index.js used by index.html, if so there is no need to list it explicitly.
  • Storage is an object per domain, your localstorage differs from sandbox and other pages.
share|improve this answer
add comment

Your Answer


