Add Side Panel

gulpfile.js

@@ -1,4 +1,5 @@
 const gulp = require('gulp')
+const download = require('gulp-download2')
 
 gulp.task('bootstrap', () => {
     return gulp
@@ -34,7 +35,14 @@ gulp.task('jquery', () => {
         .pipe(gulp.dest('src/dist/jquery'))
 })
 
+gulp.task('uppy', () => {
+    return download([
+        'https://releases.transloadit.com/uppy/v3.27.0/uppy.min.mjs',
+        'https://releases.transloadit.com/uppy/v3.27.0/uppy.min.css',
+    ]).pipe(gulp.dest('src/dist/uppy'))
+})
+
 gulp.task(
     'default',
-    gulp.parallel('bootstrap', 'clipboard', 'fontawesome', 'jquery')
+    gulp.parallel('bootstrap', 'clipboard', 'fontawesome', 'jquery', 'uppy')
 )

manifest-chrome.json

@@ -2,6 +2,9 @@
   "background": {
     "service_worker": "js/service-worker.js"
   },
-  "permissions": ["offscreen"],
+  "permissions": ["offscreen", "sidePanel"],
+  "side_panel": {
+    "default_path": "html/sidepanel.html"
+  },
   "minimum_chrome_version": "109"
 }

manifest-firefox.json

@@ -2,6 +2,18 @@
   "background": {
     "scripts": ["js/service-worker.js"]
   },
+  "sidebar_action": {
+    "default_panel": "html/sidepanel.html",
+    "default_title": "Django Files",
+    "open_at_install": false,
+    "default_icon": {
+      "16": "media/logo16.png",
+      "32": "media/logo32.png",
+      "48": "media/logo48.png",
+      "96": "media/logo96.png",
+      "128": "media/logo128.png"
+    }
+  },
   "browser_specific_settings": {
     "gecko": {
       "id": "shane-web@cssnr.com",

manifest.json

@@ -12,6 +12,12 @@
       },
       "description": "Show Popup"
     },
+    "showSidePanel": {
+      "suggested_key": {
+        "default": "Alt+Shift+S"
+      },
+      "description": "Show Side Panel"
+    },
     "uploadFile": {
       "suggested_key": {
         "default": "Alt+Shift+A"
@@ -33,7 +39,7 @@
     "scripting",
     "storage"
   ],
-  "background": {},
+  "background": { "type": "module" },
   "options_ui": {
     "page": "html/options.html",
     "open_in_tab": true