Add Auto Authentication (#13)

* Move Context Menus to onChanged

* Add Auto Auth

* Update options.html

* Update README.md

Author: smashedr

README.md

@@ -50,14 +50,15 @@ You can pin the Addon by clicking the `Puzzle Piece`, find the `Django Files ico
 **Firefox**, click the `Settings Wheel` and `Pin to Toolbar`.  
 **Chrome**, click the `Pin` icon.
 
-1.  Click on the `Django Files icon` and click on `Open Options`.
-1.  Log in to your Django Files instance, and select `Copy URL` from the menu in the top right.
-1.  Go back to the Django Files Options tab and paste the `URL` into the URL box.
-1.  Repeat #3 and #4 for Auth Token and then click `Save Settings`!
+To automatically configure the web extension to work with your Django Files instance do the following:
+
+-   Log in to your Django Files Instance
+-   Click the Popup Icon (from above)
+-   Click `Add Auth from Current Site`
 
 The addon should now be configured to work with your Django Files instance.
 
-Click the Django Files add-on icon to view your recent uploads.  
+You can now click the Django Files icon to view your recent uploads.  
 Right-click on any Image, Video, Audio, or URL upload to Django Files or Shorten URL.
 
 # Development

manifest.json

@@ -1,6 +1,6 @@
 {
   "manifest_version": 3,
-  "version": "0.2.3",
+  "version": "0.2.4",
   "name": "Django Files",
   "description": "Django Files Web Extension designed to work with django-files/django-files.",
   "homepage_url": "https://github.com/django-files/web-extension",
@@ -13,10 +13,15 @@
       "description": "Show Popup"
     }
   },
-  "permissions": ["clipboardWrite", "contextMenus", "notifications", "storage"],
-  "background": {
-    "type": "module"
-  },
+  "permissions": [
+    "activeTab",
+    "clipboardWrite",
+    "contextMenus",
+    "notifications",
+    "scripting",
+    "storage"
+  ],
+  "background": {},
   "options_ui": {
     "page": "html/options.html",
     "open_in_tab": true

package.json

@@ -2,7 +2,7 @@
   "scripts": {
     "postinstall": "npx gulp",
     "lint:eslint": "npx eslint src/js",
-    "lint:web-ext": "npx web-ext lint --source-dir ./src/",
+    "lint:web-ext": "npm run manifest:firefox && npx web-ext lint --source-dir ./src/",
     "lint": "npm run lint:eslint && npm run lint:web-ext",
     "chrome": "npm run manifest:chrome && web-ext run --source-dir ./src/ --target=chromium",
     "firefox": "npm run manifest:firefox && web-ext run --source-dir ./src/",

src/html/options.html

@@ -85,7 +85,7 @@ <h1 class="align-middle">Django Files Extension</h1>
 <script type="text/javascript" src="../dist/bootstrap/bootstrap.bundle.min.js"></script>
 <script type="text/javascript" src="../dist/fontawesome/js/all.min.js"></script>
 <script type="text/javascript" src="../dist/clipboard/clipboard.min.js"></script>
-<script type="module" src="../js/options.js"></script>
+<script type="text/javascript" src="../js/options.js"></script>
 
 </body>
 </html>

src/html/popup.html

@@ -15,8 +15,8 @@
         <img src="../media/logo32.png" class="float-start" alt="Django Files" height="32" width="32">
         <h2>Django Files Extension</h2>
     </div>
-    <div class="d-grid g-2">
-        <div id="django-files-links" class="btn-group btn-group-sm" role="group" aria-label="Django Files Links" style="display: none;">
+    <div class="d-grid g-2" id="popup-buttons">
+        <div id="django-files-links" class="btn-group btn-group-sm visually-hidden" role="group" aria-label="Django Files Links">
             <a role="button" class="btn btn-outline-success" data-href="" data-location="/files/">
                 <i class="fa-regular fa-folder-open me-2"></i> Files</a>
             <a role="button" class="btn btn-outline-success" data-href="" data-location="/gallery/">
@@ -25,20 +25,23 @@ <h2>Django Files Extension</h2>
         <a class="btn btn-outline-primary btn-sm my-1" role="button" data-href="options">
             <i class="fa-solid fa-gear me-2"></i> Open Options</a>
     </div>
-    <p class="mb-0" id="recent-uploads">Recent Uploads:</p>
 
-    <div class="d-flex justify-content-center mt-2" id="loading-spinner">
+    <a role="button" class="btn btn-lg btn-success w-100 my-2 visually-hidden" id="auth-button">
+        <i class="fa-solid fa-key"></i>
+        Add Auth from Current Site</a>
+
+    <div class="d-flex justify-content-center mt-2 visually-hidden" id="loading-spinner">
         <span class="visually-hidden">Loading...</span>
         <div class="spinner-grow mx-1" role="status"></div>
         <div class="spinner-grow mx-1" role="status"></div>
         <div class="spinner-grow mx-1" role="status"></div>
     </div>
-    <table id="recent" class="table table-striped table-sm mb-0 ">
+    <table id="recent" class="table table-striped table-sm mt-2 mb-0 visually-hidden">
         <caption class="visually-hidden">Recent Uploads</caption>
         <thead class="visually-hidden"><tr><th>Number</th><th>File URL</th></tr></thead>
         <tbody></tbody>
     </table>
-    <div id="error-alert" class="alert alert-warning mt-2" role="alert" style="display: none;" ></div>
+    <div id="error-alert" class="alert alert-warning mt-2 mb-0" role="alert" style="display: none;" ></div>
 </div>
 
 <script type="text/javascript" src="../dist/polyfill/browser-polyfill.min.js"></script>

src/js/auth.js

@@ -0,0 +1,24 @@
+// JS auth.js
+
+// eslint-disable-next-line no-extra-semi
+;(async () => {
+    console.log('auth.js')
+    const response = await chrome.runtime.sendMessage(getCredentials())
+    console.log(response)
+})()
+
+/**
+ * Handle Messages
+ * @function getCredentials
+ * @return {Object}
+ */
+function getCredentials() {
+    const siteUrl = document.getElementById('site-url')
+    const authToken = document.getElementById('auth-token')
+    if (siteUrl && authToken) {
+        return {
+            siteUrl: siteUrl.value,
+            authToken: authToken.value,
+        }
+    }
+}

src/js/exports.js

@@ -1,9 +1,8 @@
 // JS for options.html
 
-import { createContextMenus } from './exports.js'
-
 document.addEventListener('DOMContentLoaded', initOptions)
 document.getElementById('options-form').addEventListener('submit', saveOptions)
+document.getElementById('submit').addEventListener('click', saveOptions)
 
 /**
  * Options Init Function
@@ -23,12 +22,12 @@ async function initOptions() {
     document.getElementById('version').textContent =
         chrome.runtime.getManifest().version
     document.getElementById('token').value = auth?.token || ''
+    document.getElementById('recentFiles').value = options.recentFiles || '10'
     document.getElementById('contextMenu').checked = options.contextMenu
     document.getElementById('showUpdate').checked = options.showUpdate
     const commands = await chrome.commands.getAll()
     document.getElementById('mainKey').textContent =
         commands.find((x) => x.name === '_execute_action').shortcut || 'Not Set'
-    document.getElementById('recentFiles').value = options.recentFiles || '10'
 }
 
 /**
@@ -48,12 +47,6 @@ async function saveOptions(event) {
     options.recentFiles = document.getElementById('recentFiles').value
     options.contextMenu = document.getElementById('contextMenu').checked
     options.showUpdate = document.getElementById('showUpdate').checked
-    if (options.contextMenu) {
-        chrome.contextMenus.removeAll()
-        createContextMenus()
-    } else {
-        chrome.contextMenus.removeAll()
-    }
     console.log('options:', options)
     await chrome.storage.sync.set({ auth, options })
     document.getElementById('url').value = auth.url

src/js/options.js

@@ -5,6 +5,8 @@ document.addEventListener('DOMContentLoaded', initPopup)
 const popupLinks = document.querySelectorAll('[data-href]')
 popupLinks.forEach((el) => el.addEventListener('click', popLinks))
 
+chrome.runtime.onMessage.addListener(onMessage)
+
 /**
  * Popup Init Function
  * TODO: Overhaul this function
@@ -15,20 +17,29 @@ async function initPopup() {
     const { auth, options } = await chrome.storage.sync.get(['auth', 'options'])
     console.log('auth:', auth)
     if (!auth?.url || !auth?.token) {
-        return displayError('Missing URL or Token.')
+        displayError('Missing URL or Token.')
+        const [tab] = await chrome.tabs.query({
+            currentWindow: true,
+            active: true,
+        })
+        console.log('tab:', tab)
+        await chrome.scripting.executeScript({
+            target: { tabId: tab.id },
+            files: ['/js/auth.js'],
+        })
+        return
     }
+
     document.getElementById('django-files-links').style.display = 'flex'
-    console.log('options.recentFiles:', options.recentFiles)
+
     if (options.recentFiles === '0') {
-        document
-            .getElementById('loading-spinner')
-            .classList.add('visually-hidden')
-        document
-            .getElementById('recent-uploads')
-            .classList.add('visually-hidden')
         return console.log('Recent Files Disabled. Enable in Options.')
     }
 
+    document
+        .getElementById('loading-spinner')
+        .classList.remove('visually-hidden')
+
     let opts = {
         method: 'GET',
         headers: { Authorization: auth.token },
@@ -61,6 +72,7 @@ async function initPopup() {
     }
 
     updateTable(data)
+    document.getElementById('recent').classList.remove('visually-hidden')
 
     const clipboard = new ClipboardJS('.clip') // eslint-disable-line
     // Re-Initialize data-href after updateTable
@@ -101,6 +113,38 @@ async function popLinks(event) {
     return window.close()
 }
 
+/**
+ * On Command Callback
+ * @function onMessage
+ * @param {Object} message
+ * @param {MessageSender} sender
+ * @param {Function} sendResponse
+ */
+async function onMessage(message, sender, sendResponse) {
+    console.log('message, sender, sendResponse:', message, sender, sendResponse)
+    if (message?.siteUrl && message?.authToken) {
+        console.log(`url: ${message.siteUrl}`)
+        console.log(`token: ${message.authToken}`)
+        const auth = { url: message.siteUrl, token: message.authToken }
+        await chrome.storage.local.set({ auth })
+        const btn = document.getElementById('auth-button')
+        btn.classList.remove('visually-hidden')
+        btn.addEventListener('click', authCredentials)
+    }
+}
+
+async function authCredentials(event) {
+    console.log('authCredentials:', event)
+    const { auth } = await chrome.storage.local.get(['auth'])
+    console.log('auth:', auth)
+    if (auth) {
+        await chrome.storage.sync.set({ auth })
+        document.getElementById('auth-button').classList.add('visually-hidden')
+        document.getElementById('error-alert').classList.add('visually-hidden')
+        await initPopup()
+    }
+}
+
 /**
  * Update Popup Table with Data
  * @function updateTable

src/js/popup.js

@@ -1,24 +1,22 @@
-// Background Service Worker JS
-
-import { createContextMenus } from './exports.js'
+// JS Background Service Worker
 
 chrome.runtime.onInstalled.addListener(onInstalled)
 chrome.contextMenus.onClicked.addListener(contextMenuClick)
+chrome.storage.onChanged.addListener(onChanged)
 
 chrome.notifications.onClicked.addListener((notificationId) => {
     console.log(`notifications.onClicked: ${notificationId}`)
     chrome.notifications.clear(notificationId)
 })
 
-const ghUrl = 'https://github.com/django-files/web-extension'
-
 /**
  * Init Context Menus and Options
  * @function onInstalled
  * @param {InstalledDetails} details
  */
 async function onInstalled(details) {
     console.log('onInstalled:', details)
+    const ghUrl = 'https://github.com/django-files/web-extension'
     const defaultOptions = {
         contextMenu: true,
         recentFiles: '10',
@@ -28,7 +26,6 @@ async function onInstalled(details) {
     options = setDefaults(options, defaultOptions)
     console.log('options:', options)
     await chrome.storage.sync.set({ options })
-
     if (options.contextMenu) {
         createContextMenus()
     }
@@ -73,6 +70,59 @@ async function contextMenuClick(ctx) {
     }
 }
 
+/**
+ * On Changed Callback
+ * @function onChanged
+ * @param {Object} changes
+ * @param {String} namespace
+ */
+function onChanged(changes, namespace) {
+    console.log('onChanged:', changes, namespace)
+    if (namespace === 'sync') {
+        for (let [key, { oldValue, newValue }] of Object.entries(changes)) {
+            if (
+                key === 'options' &&
+                oldValue &&
+                newValue &&
+                oldValue.contextMenu !== newValue.contextMenu
+            ) {
+                if (newValue?.contextMenu) {
+                    console.log('Enabled contextMenu...')
+                    createContextMenus()
+                } else {
+                    console.log('Disabled contextMenu...')
+                    chrome.contextMenus.removeAll()
+                }
+            }
+        }
+    }
+}
+
+/**
+ * Create Context Menus
+ * @function createContextMenus
+ */
+function createContextMenus() {
+    console.log('createContextMenus')
+    const ctx = ['link', 'image', 'video', 'audio']
+    const contexts = [
+        [['link'], 'short', 'normal', 'Create Short URL'],
+        [['image'], 'upload-image', 'normal', 'Upload Image'],
+        [['video'], 'upload-video', 'normal', 'Upload Video'],
+        [['audio'], 'upload-audio', 'normal', 'Upload Audio'],
+        [ctx, 'separator-1', 'separator', 'separator'],
+        [ctx, 'options', 'normal', 'Open Options'],
+    ]
+    contexts.forEach((context) => {
+        chrome.contextMenus.create({
+            contexts: context[0],
+            id: context[1],
+            type: context[2],
+            title: context[3],
+        })
+    })
+}
+
 async function postURL(endpoint, url) {
     console.log('Processing URL: ' + url)
     const { auth } = await chrome.storage.sync.get(['auth'])