angular - Angular如何使用谷歌存储api

Question

我不会使用 chrome 的存储扩展。我不断得到： chrome.storage 未定义。

即使我得到错误，它仍然存储我想要存储的数组。这个块以某种方式工作：

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

我有一个清单文件，其中包含以下内容：

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

标签： angulargoogle-chrome-extensiongoogle-apigoogle-chrome-storage

Answer 1

我知道问题出在哪里，您的 manifest.json 文件中缺少一些字段，用这些新字段更新了它们。

{
  "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/*"
  ]
 }

现在为了访问 chrome 存储，我建议构建一个处理它的服务，这里是处理 chrome 存储 API 的基本服务。

如果您不想构建自己的服务，可以使用这个包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);
      }
    });
  }

}

希望这回答了你的问题:)。