Support for saving custom scripts

src/options/Config.vue

@@ -21,7 +21,8 @@
 
       <form class="content" ref="content" @submit.prevent="save">
         <div class="textarea">
-          <textarea name="text" ref="text" v-model="config" v-text="loading ? 'Loading...' : config" @focus="onFocus" :disabled="loading" />
+          <PrismEditor name="text" v-model="config" :code="loading ? 'Loading...' : config" language="js" :emitEvents="true" />
+          <!-- <textarea name="text" ref="text" v-model="config" v-text="loading ? 'Loading...' : config" @focus="onFocus" :disabled="loading" /> -->
         </div>
 
         <div class="buttons">
@@ -37,9 +38,14 @@
 import axios from 'axios';
 import mixins from '../utils';
 
+import 'prismjs';
+import 'prismjs/themes/prism.css';
+import PrismEditor from 'vue-prism-editor';
+
 export default {
   name: 'Backup',
   mixins: [mixins],
+  components: { PrismEditor },
 
   data() {
     return {
@@ -64,11 +70,11 @@ export default {
       this.savedConfig = this.config;
     },
 
-    async save(event) {
+    async save() {
       this.loading = true;
 
       try {
-        const config = JSON.parse(event.target.text.value);
+        const config = JSON.parse(this.config);
         await this.saveConfig(config);
         await this.reload();
         this.$emit('reload');

src/options/Run.vue

@@ -297,7 +297,7 @@ export default {
         script: this.script,
       };
 
-      console.log(script);
+      await this.saveScript(script);
     },
 
     async storeAction(event) {

src/utils.js

@@ -122,6 +122,28 @@ export default {
       }
     },
 
+    async getScripts(parse = true) {
+      this.loading = true;
+
+      try {
+        const response = await browser.storage.local.get('scripts');
+        if (!response.scripts) {
+          return {};
+        }
+
+        return Object.entries(JSON.parse(response.scripts)).reduce((obj, [name, info]) => {
+          if (parse && typeof info.script === 'string') {
+            info.script = eval(info.script);
+          }
+
+          obj[name] = info;
+          return obj;
+        }, {});
+      } finally {
+        this.loading = false;
+      }
+    },
+
     async saveActions(actions) {
       this.loading = true;
 
@@ -145,14 +167,49 @@ export default {
       this.notify('You can find this action under the Local Actions menu', 'Action saved');
     },
 
+    async saveScripts(scripts) {
+      this.loading = true;
+
+      try {
+        scripts = Object.entries(scripts).reduce((obj, [name, info]) => {
+          if (typeof info.script === 'function') {
+            info.script = info.script.toString();
+          }
+
+          obj[name] = info;
+          return obj;
+        }, {});
+
+        await browser.storage.local.set({ scripts: JSON.stringify(scripts) });
+      } catch (e) {
+        this.notify(e.message, 'Error on script save');
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    async saveScript(script) {
+      const scripts = await this.getScripts(false);
+      if (script.displayName in scripts) {
+        if (!confirm('A script with this name already exists. Do you want to overwrite it?')) {
+          return;
+        }
+      }
+
+      scripts[script.displayName] = script;
+      await this.saveScripts(scripts);
+      this.notify('You can find this script under the Local Actions menu', 'Script saved');
+    },
+
     async loadConfig() {
       this.loading = true;
 
       try {
-        const [hosts, actions] = await Promise.all([this.getHosts(), this.getActions()]);
+        const [hosts, actions, scripts] = await Promise.all([this.getHosts(), this.getActions(), this.getScripts(false)]);
         return {
           hosts: hosts,
           actions: actions,
+          scripts: scripts,
         };
       } finally {
         this.loading = false;
@@ -163,9 +220,10 @@ export default {
       this.loading = true;
       const hosts = config.hosts || {};
       const actions = config.actions || {};
+      const scripts = config.scripts || {};
 
       try {
-        await Promise.all([this.saveHosts(hosts), this.saveActions(actions)]);
+        await Promise.all([this.saveHosts(hosts), this.saveActions(actions), this.saveScripts(scripts)]);
       } finally {
         this.loading = false;
       }