37 |
38 |
39 |
--------------------------------------------------------------------------------
/src/options/script.js:
--------------------------------------------------------------------------------
1 | const REMINDER_TREATMENT_SELECTOR = 'input[name=reminder-treatment]';
2 | const BUNDLED_EMAIL_SELECTOR = 'input[name=email-bundling]';
3 | const AVATAR_SELECTOR = 'input[name=avatar]';
4 |
5 | function saveOptions() {
6 | const reminderTreatment = getSelectedRadioValue(REMINDER_TREATMENT_SELECTOR);
7 | const emailBundling = getSelectedRadioValue(BUNDLED_EMAIL_SELECTOR);
8 | const showAvatar = getSelectedRadioValue(AVATAR_SELECTOR);
9 |
10 | const options = { reminderTreatment, emailBundling, showAvatar };
11 |
12 | localStorage.setItem('options', JSON.stringify(options));
13 | }
14 |
15 | function restoreOptions() {
16 | chrome.runtime.sendMessage({ method: 'getOptions' }, function(options) {
17 | selectRadioWithValue(REMINDER_TREATMENT_SELECTOR, options.reminderTreatment);
18 | selectRadioWithValue(BUNDLED_EMAIL_SELECTOR, options.emailBundling);
19 | selectRadioWithValue(AVATAR_SELECTOR, options.showAvatar);
20 | });
21 | }
22 |
23 | function selectRadioWithValue(selector, value) {
24 | document.querySelectorAll(selector).forEach(radioInput => {
25 | if(radioInput.value === value) radioInput.checked = true;
26 | });
27 | }
28 |
29 | const getSelectedRadioValue = selector => document.querySelector(selector + ':checked').value;
30 |
31 | const monitorChange = element => element.addEventListener('click', saveOptions);
32 |
33 | document.addEventListener('DOMContentLoaded', restoreOptions);
34 | document.querySelectorAll(REMINDER_TREATMENT_SELECTOR).forEach(monitorChange);
35 | document.querySelectorAll(BUNDLED_EMAIL_SELECTOR).forEach(monitorChange);
36 | document.querySelectorAll(AVATAR_SELECTOR).forEach(monitorChange);
37 |
--------------------------------------------------------------------------------
/src/options/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | background-color: rgb(242, 242, 242);
3 | font-family: Roboto, system-ui, sans-serif;
4 | font-size: 13px;
5 | margin: 0;
6 | }
7 |
8 | h1 {
9 | font-size: 1.5em;
10 | margin: 0 0 20px 0;
11 | }
12 |
13 | .content {
14 | box-shadow: rgb(224, 224, 224) 0px -1px 0px, rgba(0, 0, 0, 0.12) 0px 0px 2px, rgba(0, 0, 0, 0.24) 0px 2px 4px !important;
15 | background-color: white;
16 | padding: 0 20px;
17 | width: 550px;
18 | }
19 |
20 | .settings-wrapper {
21 | margin-top: 36px;
22 | }
23 |
24 | .setting {
25 | padding: 12px 20px;
26 | border-bottom: 1px solid rgb(224, 224, 224);
27 | margin: 0 -20px;
28 | }
29 |
30 | .setting-title {
31 | font-weight: bold;
32 | margin-bottom: 5px;
33 | }
34 |
35 | .setting-content {
36 | color: #616161;
37 | }
38 |
39 | button.save {
40 | float: right;
41 | font-size: 14px;
42 | margin-top: 12px;
43 |
44 | color: #fff;
45 | background-color: #007bff;
46 | border-color: #007bff;
47 | border-radius: .25rem;
48 | padding: .375rem .75rem;
49 | }
50 |
51 | .clearfix::after {
52 | content: "";
53 | clear: both;
54 | display: table;
55 | }
56 |
--------------------------------------------------------------------------------
/src/script.js:
--------------------------------------------------------------------------------
1 | const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
2 | const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
3 |
4 | const nameColors = ['1bbc9b','16a086','f1c40f','f39c11','2dcc70','27ae61','d93939','d25400','3598db','297fb8','e84c3d','c1392b','9a59b5','8d44ad','bec3c7','34495e','2d3e50','95a5a4','7e8e8e','ec87bf','d870ad','f69785','9ba37e','b49255','b49255','a94136'];
5 |
6 | const REMINDER_EMAIL_CLASS = 'reminder';
7 | const CALENDAR_EMAIL_CLASS = 'calendar-event';
8 | const CALENDAR_ATTACHMENT_CLASS = 'calendar-attachment';
9 | const BUNDLE_PAGE_CLASS = 'bundle-page';
10 | const BUNDLE_WRAPPER_CLASS = 'bundle-wrapper';
11 | const UNREAD_BUNDLE_CLASS = 'contains-unread';
12 | const BUNDLED_EMAIL_CLASS = 'bundled-email';
13 | const BUNDLING_OPTION_CLASS = 'email-bundling-enabled';
14 | const UNBUNDLED_PARENT_LABEL = 'Unbundled';
15 | const UNBUNDLED_EMAIL_CLASS = 'unbundled-email';
16 | const AVATAR_EMAIL_CLASS = 'email-with-avatar';
17 | const AVATAR_CLASS = 'avatar';
18 | const AVATAR_OPTION_CLASS = 'show-avatar-enabled';
19 | const STYLE_NODE_ID_PREFIX = 'hide-email-';
20 |
21 | const DATE_LABELS = {
22 | TODAY: 'Today',
23 | YESTERDAY: 'Yesterday',
24 | THIS_MONTH: 'This month',
25 | LAST_YEAR: 'Last year'
26 | };
27 |
28 | let lastEmailCount = 0;
29 | let lastRefresh = new Date();
30 | let loadedMenu = false;
31 | let labelStats = {};
32 | let hiddenEmailIds = [];
33 | let options = {};
34 |
35 | /* remove element */
36 | Element.prototype.remove = function () {
37 | this.parentElement.removeChild(this);
38 | };
39 |
40 | const getMyEmailAddress = () => {
41 | if (document.querySelector('.gb_hb').innerText) return document.querySelector('.gb_hb').innerText;
42 | if (document.querySelector('.gb_lb').innerText) return document.querySelector('.gb_lb').innerText;
43 | if (document.querySelector('.gb_qb').innerText) return document.querySelector('.gb_qb').innerText;
44 | return '';
45 | }
46 |
47 | const getEmailParticipants = function (email) {
48 | return email.querySelectorAll('.yW span[email]');
49 | };
50 |
51 | const isReminder = function (email, myEmailAddress) {
52 | // if user doesn't want reminders treated special, then just return as though current email is not a reminder
53 | if (options.reminderTreatment === 'none') return false;
54 |
55 | const nameNodes = getEmailParticipants(email);
56 | let allNamesMe = true;
57 |
58 | if (nameNodes.length === 0) allNamesMe = false;
59 |
60 | for (const nameNode of nameNodes) {
61 | if (nameNode.getAttribute('email') !== myEmailAddress) allNamesMe = false;
62 | }
63 |
64 | if (options.reminderTreatment === 'all') {
65 | return allNamesMe;
66 | } else if (options.reminderTreatment === 'containing-word') {
67 | const titleNode = email.querySelector('.y6');
68 | return allNamesMe && titleNode && titleNode.innerText.match(/reminder/i);
69 | }
70 |
71 | return false;
72 | };
73 |
74 | const isCalendarEvent = function (email) {
75 | const node = email.querySelector('.aKS .aJ6');
76 | return node && node.innerText === 'RSVP';
77 | };
78 |
79 | const addDateLabel = function (email, label) {
80 | if (email.previousSibling && email.previousSibling.className === 'time-row') {
81 | if (email.previousSibling.innerText === label) return;
82 | email.previousSibling.remove();
83 | }
84 |
85 | const timeRow = document.createElement('div');
86 | timeRow.classList.add('time-row');
87 | const time = document.createElement('div');
88 | time.className = 'time';
89 | time.innerText = label;
90 | timeRow.appendChild(time);
91 |
92 | email.parentElement.insertBefore(timeRow, email);
93 | };
94 |
95 | const getRawDate = function (email) {
96 | const dateElement = email.querySelector('.xW.xY span');
97 | if (dateElement) return dateElement.getAttribute('title');
98 | };
99 |
100 | const getDate = function (rawDate) {
101 | if (rawDate) return new Date(rawDate);
102 | };
103 |
104 | const buildDateLabel = function (date) {
105 | let now = new Date();
106 | if (date === undefined) return;
107 |
108 | if (now.getFullYear() == date.getFullYear()) {
109 | if (now.getMonth() == date.getMonth()) {
110 | if (now.getDate() == date.getDate()) return DATE_LABELS.TODAY;
111 | if (now.getDate() - 1 == date.getDate()) return DATE_LABELS.YESTERDAY;
112 | return DATE_LABELS.THIS_MONTH;
113 | }
114 | return months[date.getMonth()];
115 | }
116 | if (now.getFullYear() - 1 == date.getFullYear()) return DATE_LABELS.LAST_YEAR;
117 |
118 | return date.getFullYear().toString();
119 | };
120 |
121 | const cleanupDateLabels = function () {
122 | document.querySelectorAll('.time-row').forEach(row => {
123 | // Delete any back to back date labels
124 | if (row.nextSibling && row.nextSibling.className === 'time-row') row.remove();
125 | // Check nextSibling recursively until reaching the next .time-row
126 | // If all siblings are .bundled-email, then hide row
127 | else if (isEmptyDateLabel(row)) row.hidden = true;
128 | });
129 | };
130 |
131 | const isEmptyDateLabel = function (row) {
132 | const sibling = row.nextSibling;
133 | if (!sibling) return true;
134 | else if (sibling.className === 'time-row') return true;
135 | else if (![...sibling.classList].includes('bundled-email')) return false;
136 | return isEmptyDateLabel(sibling);
137 | }
138 |
139 | const getBundledLabels = function () {
140 | return Array.from(document.querySelectorAll('.BltHke[role=main] .bundle-wrapper')).reduce((bundledLabels, el) => {
141 | bundledLabels[el.attributes.bundleLabel.value] = true;
142 | return bundledLabels;
143 | }, {});
144 | };
145 |
146 | const addEventAttachment = function (email) {
147 | if (email.querySelector('.' + CALENDAR_ATTACHMENT_CLASS)) return;
148 |
149 | let title = 'Calendar Event';
150 | let time = '';
151 | const titleNode = email.querySelector('.bqe, .bog');
152 | if (titleNode) {
153 | const titleFullText = titleNode.innerText;
154 | let matches = Array.from(titleFullText.matchAll(/[^:]*: ([^@]*)@(.*)/g))[0];
155 | if (matches) {
156 | title = matches[1].trim();
157 | time = matches[2].trim();
158 | }
159 | }
160 |
161 | // build calendar attachment, this is based on regular attachments we no longer
162 | // have access to inbox to see the full structure
163 | const span = document.createElement('span');
164 | span.appendChild(document.createTextNode('Attachment'));
165 | span.classList.add('bzB');
166 |
167 | const attachmentNameSpan = document.createElement('span');
168 | attachmentNameSpan.classList.add('event-title');
169 | attachmentNameSpan.appendChild(document.createTextNode(title));
170 |
171 | const attachmentTimeSpan = document.createElement('span');
172 | attachmentTimeSpan.classList.add('event-time');
173 | attachmentTimeSpan.appendChild(document.createTextNode(time));
174 |
175 | const attachmentContentWrapper = document.createElement('span');
176 | attachmentContentWrapper.classList.add('brg');
177 | attachmentContentWrapper.appendChild(attachmentNameSpan);
178 | attachmentContentWrapper.appendChild(attachmentTimeSpan);
179 |
180 | // Find Invitation Action
181 | const action = email.querySelector('.aKS');
182 | if (action) attachmentContentWrapper.appendChild(action);
183 |
184 | const imageSpan = document.createElement('span');
185 | imageSpan.classList.add('calendar-image');
186 |
187 | const attachmentCard = document.createElement('div');
188 | attachmentCard.classList.add('brc');
189 | attachmentCard.setAttribute('role', 'listitem');
190 | attachmentCard.setAttribute('title', title);
191 | attachmentCard.appendChild(imageSpan);
192 | attachmentCard.appendChild(attachmentContentWrapper);
193 |
194 | const attachmentNode = document.createElement('div');
195 | attachmentNode.classList.add('brd', CALENDAR_ATTACHMENT_CLASS);
196 | attachmentNode.appendChild(span);
197 | attachmentNode.appendChild(attachmentCard);
198 |
199 | const emailSubjectWrapper = email.querySelectorAll('.a4W');
200 | if (emailSubjectWrapper) emailSubjectWrapper[0].appendChild(attachmentNode);
201 | };
202 |
203 | const reloadOptions = () => {
204 | chrome.runtime.sendMessage({ method: 'getOptions' }, function (ops) {
205 | options = ops;
206 | });
207 |
208 | // Add option classes to body for css styling, removes avatars when disabled
209 | if (options.showAvatar === 'enabled' && !document.body.classList.contains(AVATAR_OPTION_CLASS)) {
210 | document.body.classList.add(AVATAR_OPTION_CLASS);
211 | } else if (options.showAvatar === 'disabled' && document.body.classList.contains(AVATAR_OPTION_CLASS)) {
212 | document.body.classList.remove(AVATAR_OPTION_CLASS);
213 | document.querySelectorAll('.' + AVATAR_EMAIL_CLASS).forEach(avatarEl => avatarEl.classList.remove(AVATAR_EMAIL_CLASS));
214 | // Remove avatar elements
215 | document.querySelectorAll('.' + AVATAR_CLASS).forEach(avatarEl => avatarEl.remove());
216 | }
217 |
218 | // Add option classes to body for css styling, and unbundle emails when disabled
219 | if (options.emailBundling === 'enabled' && !document.body.classList.contains(BUNDLING_OPTION_CLASS)) {
220 | document.body.classList.add(BUNDLING_OPTION_CLASS);
221 | } else if (options.emailBundling === 'disabled' && document.body.classList.contains(BUNDLING_OPTION_CLASS)) {
222 | document.body.classList.remove(BUNDLING_OPTION_CLASS);
223 | // Unbundle emails
224 | document.querySelectorAll('.' + BUNDLED_EMAIL_CLASS).forEach(emailEl => emailEl.classList.remove(BUNDLED_EMAIL_CLASS));
225 | // Remove bundle wrapper rows
226 | document.querySelectorAll('.' + BUNDLE_WRAPPER_CLASS).forEach(bundleEl => bundleEl.remove());
227 | }
228 | };
229 |
230 | const getLabels = function (email) {
231 | return Array.from(email.querySelectorAll('.ar .at')).map(el => el.attributes.title.value);
232 | };
233 |
234 | const getTabs = () => Array.from(document.querySelectorAll('.aKz')).map(el => el.innerText);
235 |
236 | const htmlToElements = function (html) {
237 | var template = document.createElement('template');
238 | template.innerHTML = html;
239 | return template.content.firstElementChild;
240 | };
241 |
242 | const addClassToEmail = (emailEl, klass) => emailEl.classList.add(klass);
243 |
244 | const addClassToBundle = (label, klass) => {
245 | const bundle = document.querySelector(`div[bundleLabel="${label}"]`);
246 | if (bundle && !(bundle.classList.contains(klass))) bundle.classList.add(klass);
247 | };
248 |
249 | const removeClassFromBundle = (label, klass) => {
250 | const bundle = document.querySelector(`div[bundleLabel="${label}"]`);
251 | if (bundle && (bundle.classList.contains(klass))) bundle.classList.remove(klass);
252 | };
253 |
254 | const addCountToBundle = (label, count) => {
255 | const bundleLabel = document.querySelector(`div[bundleLabel="${label}"] .label-link`);
256 | if (!bundleLabel) return;
257 | const replacementHTML = `