Working api key workflow

src/manifest.json

@@ -10,7 +10,10 @@
   "browser_action": {
     "default_title": "Open Pinboard Groupings page"
   },
-  "permissions": ["storage", "tabs"],
+  "permissions": [
+    "storage",
+    "tabs",
+    "https://api.pinboard.in/"],
   "background": {
     "scripts": [
       "background.js"

src/page/App.vue

@@ -1,38 +1,41 @@
 <template>
   <div class="app">
     <div class="fluid-container">
-      <div class="alert alert-danger" role="alert" v-if="error">
-        {{ error }}
-      </div>
-      <h1>Pinboard Groupings</h1>
-      <div class="card">
-        <div class="card-body">
-          <h5 class="card-title">API key</h5>          
-          <form @submit.prevent="save" class="form">
-            <div class="input-group mb-2" v-if="!apiKey">
+      <div class="d-flex justify-content-between">
+        <h1 class="py-2 pr-2">Pinboard Groupings</h1>
+        <div class="api-key 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>
               <input type="text" class="form-control" id="apiKey"
                       v-model="form.apiKey"
                       placeholder="Enter Pinboard API key">
             </div>
-            <p class="card-text" v-else>
+            <div v-else>
               {{ apiKey }}
-            </p>
-            <button type="submit" class="btn btn-primary btn-sm" v-if="!apiKey">save</button>
-            <button type="button" class="btn btn-secondary btn-sm" @click.prevent="edit" v-else>edit</button>
+            </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>
           </form>
         </div>
       </div>
 
+      <div class="alert alert-danger" role="alert" v-if="error">
+        {{ error }}
+      </div>
+
+      <div class="py-2">
         <div v-for="pin in pins" v-bind:key="pin.hash">
           {{ pin.hash }}
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script>
 import axios from 'axios'
+
 export default {
   data () {
     return {
@@ -41,14 +44,16 @@ export default {
       form: {
         apiKey: null
       },
+      pins: [],
       error: null
     }
   },
   methods: {
     getPins() {
-      axios.get("https://api.pinboard.in/v1/posts/all?auth_token=" + this.apiKey)
+      axios.get("https://api.pinboard.in/v1/posts/all?format=json&results=10&auth_token=" + this.apiKey)
         .then(response => {
-          this.pins = response;
+          console.log(response.data);
+          this.pins = response.data;
           var data = { pins: this.pins };
           chrome.storage.sync.set(data, () => {
             console.log('done');
@@ -60,11 +65,15 @@ export default {
     },
     save(event) {
       var data = {
-        apiKey: this.form.apiKey
+        apiKey: this.form.apiKey,
+        pins: []
       };
       chrome.storage.sync.set(data, () => {
         this.apiKey = data.apiKey;
+        this.pins = data.pins;
+        if (this.apiKey) {
           this.getPins();
+        }
       });
     },
     edit(event) {
@@ -93,4 +102,14 @@ export default {
   font-size: 1rem;
 }
 
+h1 {
+  font-size: 1rem;
+}
+.api-key * {
+  font-size: 0.8rem;
+}
+.api-key input.form-control {
+  width: 17rem;
+}
+
 </style>