diff --git a/build.py b/build.py index 83e2750..302d012 100644 --- a/build.py +++ b/build.py @@ -151,6 +151,7 @@ def build_renderer(): def build_website(): tracker_file_html = "bld/track.html" + tracker_file_userscript = "bld/track.user.js" viewer_file = "bld/viewer.html" web_style_file = "bld/web/style.css" @@ -158,6 +159,7 @@ def build_website(): os.makedirs("bld/web/build", exist_ok = True) shutil.copyfile(tracker_file_html, "bld/web/build/track.html") + shutil.copyfile(tracker_file_userscript, "bld/web/build/track.user.js") shutil.copyfile(viewer_file, "bld/web/build/viewer.html") if USE_JAVA: diff --git a/web/img/button.png b/web/img/button.png new file mode 100644 index 0000000..c195d4c Binary files /dev/null and b/web/img/button.png differ diff --git a/web/index.php b/web/index.php index f6526f5..a75c5f2 100644 --- a/web/index.php +++ b/web/index.php @@ -15,23 +15,45 @@

Discord History Tracker BETA v.9 | Release Notes

Discord History Tracker is a browser script that lets you locally save chat history in your servers, groups, and private conversations.

-

When the script is active, it will automatically load history of the selected text channel up to the first message, and let you download it for offline viewing in your browser.

+

When the script is active, it will load history of the selected text channel up to the first message, and let you download it for offline viewing in your browser.

- +

How to Save History

Running the Script

-
    -
  1. Click Copy to Clipboard to copy the script
    2. -
  2. Open the JavaScript console in your browser or the Discord app by pressing Ctrl+Shift+I, and selecting the Console tab
    3. -
  3. Paste the script into the console, and press Enter to run it
    4. -
  4. Press Ctrl+Shift+I again to close the console
    5. -
-

Your browser may not support copying to clipboard, please try copying the script manually:

- +

Option 1: Userscript

+
+

Preferred option. It requires a browser addon, but will keep DHT updated and make it easily accessible on the Discord website.

+ +
    +
  1. Install a userscript manager addon if you don't already have one: + +
    2. +
  2. Click Install Userscript to prompt an installation into the userscript manager
    3. +
  3. Open Discord, and view any server, group, or private conversation (it will not work in Friends list)
    4. +
  4. Click DHT in the top right corner:
    5. +
+
-

Please note that it's no longer possible to use DHT as a bookmark. Discord updated their CSP rules which improve website security, but as a result, browsers will no longer execute bookmark scripts on the website.

+

Option 2: Browser Console

+
+

The console is the only way to use DHT directly in the desktop app.

+ +
    +
  1. Click Copy to Clipboard to copy the script
    2. +
  2. Press Ctrl+Shift+I in your browser or the Discord app, and select the Console tab
    3. +
  3. Paste the script into the console, and press Enter to run it
    4. +
  4. Press Ctrl+Shift+I again to close the console
    5. +
+ +

Your browser may not support copying to clipboard, please try copying the script manually:

+ +

Using the Script

When running for the first time, you will see a Settings dialog where you can configure the script. These settings will be remembered as long as you don't delete cookies in your browser.

diff --git a/web/style.css b/web/style.css index ea7f9ce..e1a9acd 100644 --- a/web/style.css +++ b/web/style.css @@ -5,7 +5,7 @@ body { font-size: 18px; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); color: rgba(255, 255, 255, 0.8); - background-color: #36393E; + background-color: #3F4145; box-sizing: border-box; -moz-box-sizing: border-box; } @@ -18,7 +18,7 @@ body { p { margin: 12px 0 14px; - line-height: 130%; + line-height: 140%; } a { @@ -65,32 +65,61 @@ h2 { h3 { margin: 24px 0 0; font-size: 22px; - color: rgba(255, 255, 255, 0.62); + color: rgba(255, 255, 255, 0.65); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); } -h2 + h3 { +h2 + h3, h3 + h4 { margin-top: 12px; } +h4 { + margin: 22px 0 0; + font-size: 19px; + color: rgba(255, 255, 255, 0.6); + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9); +} + ul, ol { - margin-top: 12px; + margin-top: -6px; + margin-left: -6px; } li { - line-height: 140%; + line-height: 165%; +} + +li > ul, li > ol { + margin: 0 0 0 -16px; +} + +li > img { + margin-top: 8px; } .dht { - border: 2px dashed rgba(255, 255, 255, 0.35); - border-radius: 9px; - padding: 3px; max-width: 100%; max-height: auto; +} + +.dht.bordered { + border-radius: 9px; +} + +.bordered { + padding: 3px; + border: 2px dashed rgba(255, 255, 255, 0.25); + border-radius: 3px; box-sizing: border-box; -moz-box-sizing: border-box; } +.quote { + border-left: 2px dashed rgba(255, 255, 255, 0.1); + margin-left: 2px; + padding-left: 12px; +} + .links { overflow: hidden; text-overflow: ellipsis;