chrome-storage.html

<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<!--
Element access to chrome.storage.  The "name" property
is the key to the data ("value" property) stored in chrome.storage.
Based on Polymer/core-localstorage.

`chrome-storage` automatically saves the value to chrome.storage when
value is changed.  Note that if value is an object auto-save will be
triggered only when value is a different instance. The element will default
to chrome.storage.local, but if the 'sync' attribute is set to true it will use
chrome.storage.sync instead.

    <chrome-storage name="my-app-storage" value="{{value}}"></chrome-storage>

@element chrome-storage
@blurb Element access to chrome.storage for packaged apps.
@url github.io
@categories Data
-->

<link rel="import" href="../polymer/polymer.html">

<polymer-element name="chrome-storage" attributes="name value useRaw autoSaveDisabled sync" hidden>
  <script>

    // Determine if current context is within a chrome packaged app or extension.
    // Then, determine if that app or extension manifest permissions include storage.
    var isChromeApp = (typeof chrome === 'object') && (typeof chrome.runtime === 'object') && (typeof chrome.runtime.getManifest === 'function');
    if (isChromeApp) {
      var hasStoragePermission = chrome.runtime.getManifest().permissions.indexOf('storage') != -1;
    }

    Polymer('chrome-storage', {

      /**
       * Fired when a value is loaded from chrome.storage.
       * @event chrome-storage-load
       */

      /**
       * The key to the data stored in chrome.storage.
       *
       * @attribute name
       * @type string
       * @default null
       */
      name: '',

      /**
       * The data associated with the specified name.
       *
       * @attribute value
       * @type object
       * @default null
       */
      value: null,

      /**
       * If true, the value is stored and retrieved without JSON processing.
       *
       * @attribute useRaw
       * @type boolean
       * @default false
       */
      useRaw: false,

      /**
       * If true, auto save is disabled.
       *
       * @attribute autoSaveDisabled
       * @type boolean
       * @default false
       */
      autoSaveDisabled: false,

      /**
       * If true, use chrome.storage.sync. Otherwise, use chrome.storage.local.
       *
       * @attribute sync
       * @type boolean
       * @default false
       */
      sync: false,

      valueChanged: function() {
        if (this.loaded && !this.autoSaveDisabled) {
          isChromeApp && hasStoragePermission && this.save();
        }
      },

      nameChanged: function() {
        isChromeApp && hasStoragePermission && this.load();
      },

      load: function() {

        var storage = this.sync ? chrome.storage.sync : chrome.storage.local;

        storage.get(this.name, function (items) {
          if (typeof items == 'object') {
            if (this.useRaw) {
              this.value = items[this.name];
            } else {
              if (typeof items[this.name] != 'undefined') {
                this.value = JSON.parse(items[this.name]);
              } else {
                console.info("chrome-storage: " + this.name + " not found.");
                this.value = undefined;
              }
            }
            this.asyncFire('chrome-storage-load');
          }
        }.bind(this));

        this.loaded = true;

      },

      /**
       * Saves the value to localStorage.
       *
       * @method save
       */
      save: function() {

        var v = this.useRaw ? this.value : JSON.stringify(this.value);
        var obj = {};
        obj[this.name] = v;

        var storage = this.sync ? chrome.storage.sync : chrome.storage.local;

        storage.set(obj, function () {
          this.asyncFire('chrome-storage-save');
        }.bind(this))

      },

      ready: function () {
        if (!isChromeApp) {
          console.error('You are attempting to use chrome.storage in a non-chromeapp environment. This will not work.');
        } else if (!hasStoragePermission) {
          console.error('Your chrome app does not appear to have the storage permission in the manifest. The chrome-storage element requires this permission.');
        }
      }

    });

  </script>
</polymer-element>