Working!!!

src/background.js

@@ -1,7 +1,6 @@
 chrome.runtime.onInstalled.addListener(function() {
     var data = {
         apiKey: null,
-        pins: [],
         groupings: []
     };
 

src/page/App.vue

@@ -3,7 +3,7 @@
     <div class="fluid-container">
       <div class="d-flex justify-content-between">
         <h1 class="py-2 pr-2">Pinboard Groupings</h1>
-        <div class="api-key py-2 pl-2">      
+        <div class="api-key-form py-2 pl-2">      
           <form @submit.prevent="save" class="form-inline">
             <div class="form-group" v-if="!apiKey">
               <label class="sr-only" for="apiKey">Pinboard API Key</label>
@@ -15,7 +15,7 @@
               {{ apiKey }}
             </div>
             <button type="submit" class="btn btn-link p-0 pl-2" v-if="!apiKey">save</button>
-            <button type="button" class="btn btn-link p-0 pl-2" @click.prevent="edit" v-else>edit</button>
+            <button type="button" class="btn btn-link p-0 pl-2" @click.prevent="editApiKey" v-else>edit</button>
           </form>
         </div>
       </div>
@@ -24,9 +24,33 @@
         {{ error }}
       </div>
 
-      <div class="py-2">
+      <div class="my-2 d-flex justify-content-between" v-if="apiKey">
-        <div v-for="pin in pins" v-bind:key="pin.hash">
+        <button type="button" class="btn btn-link"
-          {{ pin.hash }}
+          v-if="groupings.length > 0"
+          @click="refreshGroupings">refresh groupings</button>
+  
+        <form @submit.prevent="saveNewGrouping" class="form-inline">
+          <div class="form-group">
+            <label class="sr-only" for="tags">Tags</label>
+            <input type="text" class="form-control" id="tags"
+                    v-model="newGrouping.tags"
+                    placeholder="new grouping tags">
+          </div>
+          <button type="submit" class="btn btn-link p-0 pl-2">add grouping</button>
+        </form>
+      </div>
+
+      <div class="groupings card-columns" v-if="apiKey">
+        <div class="grouping card" v-for="grouping in groupings" v-bind:key="grouping.tags">
+          <div class="card-body">
+            <h5 class="card-title">{{ grouping.tags }}</h5>
+            <p class="card-text" v-if="grouping.loading">
+              loading...
+            </p>
+            <p class="card-text" v-else v-for="pin in grouping.pins" v-bind:key="pin.hash">
+              <a target="_blank" :href="pin.href">{{ pin.description }}</a>
+            </p>
+          </div>
         </div>
       </div>
     </div>
@@ -44,52 +68,69 @@ export default {
       form: {
         apiKey: null
       },
-      pins: [],
+      newGrouping: {
+        tags: []
+      },
       error: null
     }
   },
   methods: {
-    getPins() {
+    refreshGroupings(event) {
-      axios.get("https://api.pinboard.in/v1/posts/all?format=json&results=10&auth_token=" + this.apiKey)
+      for(var key in this.groupings) {
+        var grouping = this.groupings[key];
+        grouping.loading = true;
+        grouping.pins = [];
+
+        this.getPinsForGroup(grouping);
+      }
+    },
+    getPinsForGroup(grouping) {
+      var url = "https://api.pinboard.in/v1/posts/all?format=json&results=30";
+      url += "&auth_token=" + this.apiKey;
+      url += "&tag=" + grouping.tags;
+
+      axios.get(url)
         .then(response => {
-          console.log(response.data);
+          grouping.pins = response.data;
-          this.pins = response.data;
+          grouping.loading = false;
-          var data = { pins: this.pins };
+          var data = { groupings: this.groupings };
-          chrome.storage.sync.set(data, () => {
+          chrome.storage.sync.set(data, () => { });
-            console.log('done');
-          })
         })
         .catch(error => {
           this.error = error;
         });
     },
+    saveNewGrouping(event) {
+      this.groupings.push({
+        tags: this.newGrouping.tags,
+        pins: [],
+        loading: true
+      });
+      var data = { groupings: this.groupings };      
+      chrome.storage.sync.set(data, () => { });
+      this.newGrouping = { tags: [] };
+
+      this.getPinsForGroup(this.groupings[this.groupings.length - 1]);
+    },
     save(event) {
       var data = {
         apiKey: this.form.apiKey,
-        pins: []
+        groupings: this.apiKey !== this.form.apiKey ? [] : this.groupings
       };
       chrome.storage.sync.set(data, () => {
         this.apiKey = data.apiKey;
-        this.pins = data.pins;
+        this.groupings = data.groupings;
-        if (this.apiKey) {
-          this.getPins();
-        }
       });
     },
-    edit(event) {
+    editApiKey(event) {
       this.form.apiKey = this.apiKey;
       this.apiKey = null;
     }
   },
   mounted() {
-    chrome.storage.sync.get(['apiKey', 'groupings','pins'], result => {
+    chrome.storage.sync.get(['apiKey','groupings'], result => {
       this.apiKey = result.apiKey;
       this.groupings = result.groupings;
-      this.pins = result.pins;
-
-      if (this.apiKey && this.pins.length == 0) {
-        this.getPins();
-      }
     });
   }
 }
@@ -105,10 +146,10 @@ export default {
 h1 {
   font-size: 1rem;
 }
-.api-key * {
+.api-key-form *, .tags-form * {
   font-size: 0.8rem;
 }
-.api-key input.form-control {
+.api-key-form input.form-control {
   width: 17rem;
 }