Angular how to use google storage api

Question

I am not getting to use chrome's storage extension. I keep getting: chrome.storage is undefined.

Even I get the error, it still stores, the array I wanted to store. This block is somehow working:

  chrome.storage.local.set({'projectsToNotif': projectsForNotif}, function() {
                        console.log('Projects to be notified are marked');
                    });

I have a manifest file where I have the following:

{
  "name": "Juju Web App",
  "short_name": "iBrand Web App",
  "display": "standalone",
  "description": "App for internal use.",
  "permissions": [
    "storage"
  ]
}

Answer 1

I see where the problem is, you are missing some fields from your manifest.json file, updated them with these new fields.

{
  "manifest_version": 2,
  "name": "Juju Web App",
  "description": "App for internal use.",
  "display": "standalone",
  "version": "1.0",
  "browser_action": {
  "default_icon": "icon.png",
  "default_popup": "index.html"
  },
  "permissions": [
    "storage"
  ],
  "content_security_policy": "script-src ‘self’ ‘unsafe-eval’; object-src ‘self’",
  "web_accessible_resources": [
  "assets/css/* ",
  "assets/js/*",
  "assets/fonts/*"
  ]
 }

Now for accessing chrome storage I recommend build a service that will handle it here is the basic service that will handle chrome storage API.

If you don't want to build your own Service you can use this package ng2-chrome-storage

import { Injectable, NgZone, Optional } from '@angular/core';

export class Settings {
    storeKey: string = 'hhappsettings';  // identifier to be used as a key for storage
    data: any = {};
  }

@Injectable({
    providedIn: 'root'
})
export class ChromeStorageService {

    storeKey = ''; // chrome storage key
    config: any;     // holds settings

    constructor(private zone: NgZone, @Optional() _settings: Settings) {
        let usethisSettings = (_settings)? _settings : new Settings();
        this.config = usethisSettings.data;
        this.storeKey = usethisSettings.storeKey;
      }

      // to be used inside a resolver
  load() {
    return this.getChrome(this.storeKey, this.config).then((data: any) => {
      this.config = data;
      return data;
    });
  }


   // remove a key
   remove(key: string): Promise<boolean> {
    return new Promise((resolve, reject) => {
      if (window['chrome'] !== undefined && window['chrome'].storage !== undefined) {
        window['chrome'].storage.sync.remove(/* String or Array */key, () => this.zone.run(() => {
          resolve(true);
        }));
      } else {
        localStorage.removeItem(key);
        resolve(true);
      }
    });
  }


  getChrome(key: string, defaults = {}): Promise<any> {
    return new Promise((resolve, reject) => {
      if (window['chrome'] !== undefined && window['chrome'].storage !== undefined) {
        let saveObj = {};
        saveObj[key] = defaults;
        window['chrome'].storage.sync.get(/* String or Array */saveObj, (data) => this.zone.run(() => {
         resolve(data[key]);
        }));
      } else {
        let object =  (localStorage.getItem(key) === null) ? defaults : JSON.parse(localStorage.getItem(key));
        resolve(object);
      }
    });
  }

}

hope this answered your question:).