1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
|
<!doctype html>
<html lang="en-CA">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Install the beta | WATnow</title>
<meta name="description" content="How to install the early WATnow build in Chrome while the Chrome Web Store version is in review.">
<meta name="robots" content="noindex">
<meta name="color-scheme" content="light">
<meta name="theme-color" content="#DDE6F3">
<link rel="canonical" href="https://watnow.ugmi.ca/beta/">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-32.png" type="image/png" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="preload" href="/fonts/bricolage-latin-opsz-wght.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/fonts/figtree-latin-wght.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="/styles.css">
<script>
try {
if (localStorage.getItem('whatnow-theme') === 'dark') {
document.documentElement.setAttribute('data-theme', 'dark');
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#1A1E2C');
}
} catch (err) {}
</script>
<script src="/main.js" defer></script>
</head>
<body>
<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
<symbol id="i-check" viewBox="0 0 20 20"><path d="M5 10.4l3.2 3.1L15 6.6"/></symbol>
<symbol id="i-lock" viewBox="0 0 20 20"><rect x="4.5" y="8.5" width="11" height="8" rx="1.8"/><path d="M7 8.5V6.8a3 3 0 0 1 6 0v1.7"/></symbol>
<symbol id="i-moon" viewBox="0 0 20 20"><path d="M15.8 12.6A6.5 6.5 0 0 1 7.4 4.2a6.5 6.5 0 1 0 8.4 8.4z"/></symbol>
<symbol id="i-sun" viewBox="0 0 20 20"><circle cx="10" cy="10" r="3.4"/><path d="M10 2.8v1.6M10 15.6v1.6M2.8 10h1.6M15.6 10h1.6M4.9 4.9l1.1 1.1M14 14l1.1 1.1M4.9 15.1 6 14M14 6l1.1-1.1"/></symbol>
<symbol id="i-download" viewBox="0 0 20 20"><path d="M10 3.5v9"/><path d="M6.2 9l3.8 3.8L13.8 9"/><path d="M4 15.8h12"/></symbol>
<symbol id="i-code" viewBox="0 0 20 20"><path d="M7 6l-4 4 4 4"/><path d="M13 6l4 4-4 4"/></symbol>
<symbol id="i-folder" viewBox="0 0 20 20"><path d="M2.8 6.2a1.7 1.7 0 0 1 1.7-1.7h3.2l1.8 2h6a1.7 1.7 0 0 1 1.7 1.7v6.1a1.7 1.7 0 0 1-1.7 1.7H4.5a1.7 1.7 0 0 1-1.7-1.7z"/></symbol>
<symbol id="i-file" viewBox="0 0 20 20"><path d="M5.5 3.5h6l3 3v10h-9z"/><path d="M11.5 3.5v3h3"/></symbol>
<symbol id="i-puzzle" viewBox="0 0 20 20"><path d="M4 7h3a2 2 0 1 1 4 0h3v3a2 2 0 1 1 0 4v2.5H4V14a2 2 0 1 0 0-4z"/></symbol>
<symbol id="i-pin" viewBox="0 0 20 20"><path d="M7.5 3.5h5"/><path d="M8.5 3.5v4.2L6 10.5h8l-2.5-2.8V3.5"/><path d="M10 10.5v6"/></symbol>
<symbol id="i-copy" viewBox="0 0 20 20"><rect x="7" y="7" width="9" height="9" rx="1.8"/><path d="M13 7V5.3A1.3 1.3 0 0 0 11.7 4H5.3A1.3 1.3 0 0 0 4 5.3v6.4A1.3 1.3 0 0 0 5.3 13H7"/></symbol>
<symbol id="i-chev" viewBox="0 0 20 20"><path d="M6.5 8.2l3.5 3.6 3.5-3.6"/></symbol>
<symbol id="i-info" viewBox="0 0 20 20"><circle cx="10" cy="10" r="6.75"/><path d="M10 9.2v4.2"/><path d="M10 6.6v.1"/></symbol>
<symbol id="mark" viewBox="0 0 200 200"><g transform="translate(13 47.6) scale(0.87)"><path fill="currentColor" d="M53.52 0L71.86 35.78L89.3 0L110.7 0L128.14 34.24L115.9 52.28L99.7 22.92L69.12 80.42L40.36 20.18L27.82 20.18L67.88 100.6L89 63L98.78 80.72L100 83.78L80.12 119.56L55.66 119.56L0 0ZM192.96 0L200 0L144.64 119.56L120.18 119.56Z"/><path fill="var(--yellow)" d="M159.64 0L181.96 0L130.58 78.58L120.18 59.32ZM100 43.12L131.5 99.08L120.18 119.56L89.3 63.3Z"/></g></symbol>
</svg>
<header class="site-header wrap">
<a class="logo" href="/" aria-label="WATnow home">
<span class="mark-tile" aria-hidden="true"><svg class="logo-mark" width="26" height="26" focusable="false"><use href="#mark"/></svg></span>
<span class="wordmark" aria-hidden="true">WATnow</span>
</a>
<div class="header-actions">
<button type="button" class="theme-toggle" data-theme-toggle aria-pressed="false" aria-label="Dark mode">
<svg class="ico i-moon" width="22" height="22" aria-hidden="true"><use href="#i-moon"/></svg>
<svg class="ico i-sun" width="22" height="22" aria-hidden="true"><use href="#i-sun"/></svg>
</button>
</div>
</header>
<main class="beta wrap">
<h1>Install the WATnow beta</h1>
<p class="beta-lede">Thanks for testing WATnow! This is early access while the Chrome Web Store reviews it for public release. I’ll email you when the store version is up.</p>
<details open class="beta-fold beta-fold-get">
<summary>
<h2>Get the extension</h2>
<svg class="ico fold-chev" width="22" height="22" aria-hidden="true"><use href="#i-chev"/></svg>
</summary>
<div class="beta-fold-body">
<p>Watch the video below, or read the written steps under it. Either way it takes about two minutes.</p>
<div class="beta-get-actions">
<a class="btn btn-primary btn-lg" href="https://github.com/EricJujianZou/watnow/releases/latest/download/watnow-extension.zip" data-umami-event="beta-download">Download WATnow<svg class="ico" width="20" height="20" aria-hidden="true"><use href="#i-download"/></svg></a>
<a class="beta-source" href="https://github.com/EricJujianZou/watnow" data-umami-event="beta-source"><svg class="ico" width="20" height="20" aria-hidden="true"><use href="#i-code"/></svg>View the source on GitHub</a>
</div>
<p class="beta-why">The code is public, so you can read what WATnow does with your Learn account before you install it.</p>
</div>
</details>
<details open class="beta-fold">
<summary>
<h2>How to (video)</h2>
<svg class="ico fold-chev" width="22" height="22" aria-hidden="true"><use href="#i-chev"/></svg>
</summary>
<div class="beta-fold-body">
<figure class="beta-video">
<video controls preload="metadata" playsinline poster="/beta/watnow-tester-how-to.jpg">
<source src="/beta/watnow-tester-how-to.mp4" type="video/mp4">
Your browser can’t play this video. The written steps below cover the same thing.
</video>
</figure>
</div>
</details>
<details class="beta-fold">
<summary>
<h2>Installation how-to (text)</h2>
<svg class="ico fold-chev" width="22" height="22" aria-hidden="true"><use href="#i-chev"/></svg>
</summary>
<div class="beta-fold-body">
<p class="beta-sub">Same on Windows and Mac.</p>
<ol class="steps">
<li class="step">
<h3>Unzip the download</h3>
<p>Chrome can’t load a zip file, it needs the unzipped folder. On Windows, right-click the zip, choose <strong>Extract All</strong>, then <strong>Extract</strong>. On a Mac, double-click it and a folder appears next to it. Put that folder somewhere you’ll keep it, like Documents.</p>
<p class="note"><svg class="ico" width="20" height="20" aria-hidden="true"><use href="#i-info"/></svg><span>Don’t delete or move the folder later. Chrome runs WATnow straight from it.</span></p>
</li>
<li class="step">
<h3>Open chrome://extensions</h3>
<p>Type it in the address bar and press Enter. Links can’t open Chrome’s own pages, so you have to paste it.</p>
<div class="mock mock-address">
<span class="mock-url" id="ext-url">chrome://extensions</span>
<button type="button" class="btn btn-quiet btn-sm copy-btn" data-copy="chrome://extensions" aria-describedby="ext-url"><svg class="ico" width="18" height="18" aria-hidden="true"><use href="#i-copy"/></svg><span data-copy-label>Copy</span></button>
</div>
<p>On Microsoft Edge, go to <strong>edge://extensions</strong> instead. Everything else matches, except the Developer mode switch sits in the left sidebar.</p>
</li>
<li class="step">
<h3>Turn on Developer mode</h3>
<p>The switch is at the top right. A row of buttons appears once it’s on.</p>
<div class="mock mock-ext" aria-hidden="true">
<div class="mock-ext-bar">
<span class="mock-ext-title">Extensions</span>
<span class="mock-dev">Developer mode <span class="mock-switch"></span></span>
</div>
<div class="mock-ext-row">
<span class="mock-chip is-target">Load unpacked</span>
<span class="mock-chip">Pack extension</span>
<span class="mock-chip">Update</span>
</div>
</div>
</li>
<li class="step">
<h3>Click Load unpacked and pick the folder</h3>
<p>Select the <strong>watnow-extension</strong> folder itself, then click <strong>Select Folder</strong> (just <strong>Select</strong> on a Mac). Don’t open it and pick a file inside.</p>
<div class="mock mock-files" aria-hidden="true">
<div class="mock-file is-target"><svg class="ico" width="20" height="20"><use href="#i-folder"/></svg><span>watnow-extension</span><span class="mock-tag">Pick this</span></div>
<div class="mock-file is-inside"><svg class="ico" width="18" height="18"><use href="#i-folder"/></svg><span>icons</span></div>
<div class="mock-file is-inside"><svg class="ico" width="18" height="18"><use href="#i-folder"/></svg><span>panel</span></div>
<div class="mock-file is-inside"><svg class="ico" width="18" height="18"><use href="#i-file"/></svg><span>manifest.json</span></div>
</div>
<p>If Chrome says <strong>Manifest file is missing or unreadable</strong>, you picked the wrong folder. The right one has manifest.json directly inside it. Chrome may also warn you about developer mode extensions, which is safe to close.</p>
</li>
<li class="step">
<h3>Pin the icon</h3>
<p>Click the puzzle piece to the right of the address bar, find WATnow and click the pin.</p>
<div class="mock mock-menu" aria-hidden="true">
<div class="mock-menu-head"><svg class="ico" width="20" height="20"><use href="#i-puzzle"/></svg><span>Extensions</span></div>
<div class="mock-menu-row">
<span class="mark-tile mark-tile-xs"><svg width="20" height="20"><use href="#mark"/></svg></span>
<span>WATnow</span>
<span class="mock-pin is-target"><svg class="ico" width="18" height="18"><use href="#i-pin"/></svg></span>
</div>
</div>
</li>
<li class="step">
<h3>Sign in to Learn</h3>
<p>Open <a href="https://learn.uwaterloo.ca">learn.uwaterloo.ca</a>, sign in with Duo as usual, and leave the tab open. If Learn was already open, reload it once.</p>
</li>
<li class="step">
<h3>Open the panel</h3>
<p>Click the WATnow icon. The panel reads your courses one at a time, a few seconds each, then shows your deadlines sorted into Overdue, Today, This week, Next week and Later.</p>
<p>If it says <strong>Sign in to Learn first</strong>, click <strong>Open Learn</strong> and sign in. <strong>Try again</strong> reruns it by hand.</p>
</li>
</ol>
</div>
</details>
<details class="beta-fold">
<summary>
<h2>What to check</h2>
<svg class="ico fold-chev" width="22" height="22" aria-hidden="true"><use href="#i-chev"/></svg>
</summary>
<div class="beta-fold-body">
<p>Keep Learn open next to the panel and compare. These are what I most want to hear about:</p>
<ul class="check-list beta-checks">
<li><svg class="ico" width="20" height="20" aria-hidden="true"><use href="#i-check"/></svg><span>A course is missing, shouldn’t be there, or has the wrong name.</span></li>
<li><svg class="ico" width="20" height="20" aria-hidden="true"><use href="#i-check"/></svg><span>A deadline on Learn isn’t in the panel.</span></li>
<li><svg class="ico" width="20" height="20" aria-hidden="true"><use href="#i-check"/></svg><span>A deadline shows twice, or its date or time doesn’t match Learn.</span></li>
<li><svg class="ico" width="20" height="20" aria-hidden="true"><use href="#i-check"/></svg><span>Something you submitted has no check mark.</span></li>
</ul>
</div>
</details>
<details class="beta-fold">
<summary>
<h2>Send me what you find</h2>
<svg class="ico fold-chev" width="22" height="22" aria-hidden="true"><use href="#i-chev"/></svg>
</summary>
<div class="beta-fold-body">
<p>DM me on Instagram at <a href="https://www.instagram.com/sleppyeric/" data-umami-event="beta-dm">@sleppyeric</a>. If everything looked right, tell me that too, it’s still useful.</p>
<p>Please paste a debug report into the DM:</p>
<ol class="mini-steps">
<li>Right-click the WATnow icon and choose <strong>Options</strong>.</li>
<li>At the bottom, click <strong>Copy debug info</strong>.</li>
<li>Paste it into the DM.</li>
</ol>
<div class="mock mock-debug" aria-hidden="true">
<span class="mock-debug-title">Send a debug report to Eric</span>
<span class="btn btn-primary btn-sm mock-btn">Copy debug info</span>
</div>
<p>The button stays greyed out until WATnow has read Learn once, so open the panel first. The panel’s gear icon has a <strong>Found a bug?</strong> link to the same page.</p>
<p>The report covers each request WATnow made to Learn, whether it worked, and what it found, including your course codes, names and deadline titles. Your name, email, student number, Learn username, submission comments and file names are stripped out. You can read it before you send it.</p>
</div>
</details>
<details class="beta-fold beta-fold-privacy">
<summary>
<span class="lock-mark lock-mark-sm" aria-hidden="true"><svg class="ico" width="26" height="26"><use href="#i-lock"/></svg></span>
<h2>Privacy</h2>
<svg class="ico fold-chev" width="22" height="22" aria-hidden="true"><use href="#i-chev"/></svg>
</summary>
<div class="beta-fold-body">
<p>WATnow reads Learn inside your browser and what it finds stays on your computer. The <a href="/privacy/">privacy policy</a> has the details, including the anonymous count sent when you open the panel.</p>
</div>
</details>
</main>
<footer class="site-footer wrap">
<a class="logo logo-small" href="/" aria-label="WATnow home">
<span class="mark-tile" aria-hidden="true"><svg class="logo-mark" width="24" height="24" focusable="false"><use href="#mark"/></svg></span>
<span class="wordmark" aria-hidden="true">WATnow</span>
</a>
<p>WATnow is not affiliated with or endorsed by D2L or the University of Waterloo. Learn is the University of Waterloo’s name for its D2L Brightspace course site.</p>
</footer>
<script>
(function () {
var buttons = document.querySelectorAll('[data-copy]');
Array.prototype.forEach.call(buttons, function (button) {
var label = button.querySelector('[data-copy-label]');
button.addEventListener('click', function () {
var text = button.getAttribute('data-copy');
function done(message) {
label.textContent = message;
setTimeout(function () { label.textContent = 'Copy'; }, 2000);
}
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(text).then(function () { done('Copied'); }, function () { done('Select it and copy'); });
} else {
done('Select it and copy');
}
});
});
})();
</script>
</body>
</html>
|
