Django Files Web Extension

Chrome Web Extension and Firefox Browser Addon for Django Files to view recent uploads, shorten URLs, and upload any Image, Video or Audio files with right click.

Tip

This Web Extension is designed to work with Django Files.

Install
Features
Configure
Setup
Building
Development

Install

All Chromium Based Browsers can install the extension from the Chrome Web Store.

Features

View Recent Uploads on Popup
Preview Popup Images on Hover.
Set Private, Password, and Expiration.
Right Click any Image, Video, or Audio to Upload.
Right Click any URL to Shorten.
Automatic Dark/Light Mode based on Browser Settings.
Automatically Auth with Django Files.

Tip

Don't see your feature here? Request one on the Feature Request Discussion.

Configure

You can pin the Addon by clicking the Puzzle Piece, find the Django Files icon, then;
Firefox, click the Settings Wheel and Pin to Toolbar.
Chrome, click the Pin icon.

Setup

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.

You can now click the Django Files icon to view your recent uploads or open Options.
Right-click on any Image, Video, Audio, or URL upload to Django Files or Shorten URL.

Alternatively, you can open the Options page and add your URL and Token.

Development

Quick Start

First, clone (or download) this repository and change into the directory:

git clone https://github.com/django-files/web-extension.git
cd web-extension

Second, install the dependencies:

npm install

Finally, to run Chrome or Firefox with web-ext, run one of the following:

npm run chrome
npm run firefox

Additionally, to Load Unpacked/Temporary Add-on make a manifest.json and run from the src folder, run one of the following:

npm run manifest:chrome
npm run manifest:firefox

Chrome: https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world#load-unpacked
Firefox: https://extensionworkshop.com/documentation/develop/temporary-installation-in-firefox/

For more information on web-ext, read this documentation.
To pass additional arguments to an npm run command, use --.
Example: npm run chrome -- --chromium-binary=...

Building

Install the requirements and copy libraries into the src/dist directory by running npm install. See gulpfile.js for more information on postinstall.

npm install

To create a .zip archive of the src directory for the desired browser run one of the following:

npm run build
npm run build:chrome
npm run build:firefox

For more information on building, see the scripts section in the package.json file.

Chrome Setup

Build or Download a Release.
Unzip the archive, place the folder where it must remain and note its location for later.
Open Chrome, click the 3 dots in the top right, click Extensions, click Manage Extensions.
In the top right, click Developer Mode then on the top left click Load unpacked.
Navigate to the folder you extracted in step #3 then click Select Folder.

Firefox Setup

Build or Download a Release.
Unzip the archive, place the folder where it must remain and note its location for later.
Go to about:debugging#/runtime/this-firefox and click Load Temporary Add-on...
Navigate to the folder you extracted earlier, select manifest.json then click Select File.
Optional: open about:config search for extensions.webextensions.keepStorageOnUninstall and set to true.

If you need to test a restart, you must pack the addon. This only works in ESR, Development, or Nightly. You may also use an Unbranded Build: https://wiki.mozilla.org/Add-ons/Extension_Signing#Unbranded_Builds

Run npm run build:firefox then use web-ext-artifacts/{name}-firefox-{version}.zip.
Open about:config search for xpinstall.signatures.required and set to false.
Open about:addons and drag the zip file to the page or choose Install from File from the Settings wheel.

django-files / web-extension