Found an error? Help getting it fixed by reporting an issue.
96 | 97 | 98 | 99 | 100 | 101 | 102 | -------------------------------------------------------------------------------- /background.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | console.clear() 3 | 4 | const trelloBoardURL = /\S+:\/\/\S*\.?trello\.com\/b\/\S+/ 5 | var injectStatus = undefined 6 | 7 | /** 8 | * Checks whether or not a given url is a Trello board url. 9 | * 10 | * @param {number} id id of the tab the url is From 11 | * @param {string} updateReason Reason why the function was called 12 | * @param {object} state Properties of the tab 13 | */ 14 | async function urlCheck (id, updateReason, state) { 15 | if (!state.url.match(trelloBoardURL)) return 16 | if (injectStatus === 'pending') return 17 | 18 | injectStatus = 'pending' 19 | 20 | try { 21 | await browser.tabs.insertCSS({ file: 'inject/enhancedStyles.css' }) 22 | await browser.tabs.executeScript({ file: 'inject/inject.js' }) 23 | 24 | browser.pageAction.show(id) 25 | 26 | injectStatus = 'fullfilled' 27 | console.info(`[Trello Super Powers] Successfully injected 'inject.js' into ${state.url}`) 28 | } catch (e) { 29 | injectStatus = 'rejected' 30 | console.error( 31 | `[Trello Super Powers] Error: Could not inject 'inject.js' into ${state.url}: `, 32 | e 33 | ) 34 | } 35 | } 36 | 37 | /** 38 | * Checks current settings and defaults them as necessary 39 | */ 40 | async function checkSettings () { 41 | var settings = await browser.storage.local.get() 42 | 43 | if (settings['compactMode'] === undefined) { 44 | browser.storage.local.set({ compactMode: true }) 45 | } 46 | if (settings['compactModeByDefault'] === undefined) { 47 | browser.storage.local.set({ compactModeByDefault: false }) 48 | } 49 | if (settings['numberOfCards'] === undefined) { 50 | browser.storage.local.set({ numberOfCards: true }) 51 | } 52 | if (settings['labelText'] === undefined) { 53 | browser.storage.local.set({ labelText: true }) 54 | } 55 | if (settings['copyId'] === undefined) { 56 | browser.storage.local.set({ copyId: true }) 57 | } 58 | if (settings['copyId_onlyShowOnHover'] === undefined) { 59 | browser.storage.local.set({ copyId_onlyShowOnHover: true }) 60 | } 61 | if (settings['list'] === undefined) { 62 | browser.storage.local.set({ list: { width: 270 } }) 63 | } 64 | if (settings['hideAddNewList'] === undefined) { 65 | browser.storage.local.set({ hideAddNewList: false }) 66 | } 67 | } 68 | 69 | browser.runtime.onMessage.addListener(handleMessage) 70 | 71 | /** 72 | * Message handler for incomming messages 73 | * 74 | * @param {object} message Message from a Script, containing a 'type' property. 75 | */ 76 | async function handleMessage (message) { 77 | if (message.type === 'notification') { 78 | browser.notifications.create({ 79 | type: 'basic', 80 | title: 'Trello Super Powers', 81 | message: message.message, 82 | iconUrl: '/assets/logo.svg' 83 | }) 84 | } 85 | 86 | if (message.type === 'exportCSV') { 87 | if (!navigator.onLine) { 88 | browser.notifications.create({ 89 | type: 'basic', 90 | title: 'You are offline', 91 | message: 92 | 'Trello Super Powers could not connect to the internet. Please check your connection and try again.' 93 | }) 94 | 95 | return 96 | } 97 | 98 | let tabId, tabUrl, csvBlob, downloadUrl 99 | let { 100 | filename = 'CSV-export.csv', 101 | delimiter = ',', 102 | includeArchived = false 103 | } = message.data; 104 | 105 | [{ id: tabId, url: tabUrl }] = await browser.tabs.query({ 106 | active: true, 107 | currentWindow: true 108 | }) 109 | 110 | await browser.tabs.executeScript(tabId, { file: 'papaparse.min.js' }) 111 | 112 | // TODO: Don't use a content script for this operation. Do everything in the 113 | // background script 114 | csvBlob = await browser.tabs.sendMessage(tabId, { 115 | type: 'fetch', 116 | tabUrl, 117 | delimiter, 118 | includeArchived 119 | }) 120 | 121 | // Create a file URL so we can download it 122 | downloadUrl = URL.createObjectURL(csvBlob) 123 | 124 | try { // Try downloading the CSV file 125 | browser.downloads.download({ 126 | url: downloadUrl, 127 | filename: filename 128 | }) 129 | } catch (e) { 130 | console.error('[Trello Super Powers] Error: ', e) 131 | 132 | browser.notifications.create({ 133 | type: 'basic', 134 | title: 'Export failed', 135 | message: `Trello Super Powers could export your board. We're sorry. Error message: ${e}` 136 | }) 137 | } 138 | 139 | browser.notifications.create({ 140 | type: 'basic', 141 | title: 'Board exported', 142 | message: 'Successfully downloaded your board as CSV.' 143 | }) 144 | } 145 | } 146 | 147 | /* Trello uses AJAX loading and because of this when a board is loaded from 148 | within the UI (not from URL) 'inject.js' won't be fired. To overcome this we 149 | listen for URL changes initTrelloBoardand fire inizializations manually */ 150 | browser.tabs.onUpdated.addListener(urlCheck) 151 | 152 | browser.runtime.onStartup.addListener(checkSettings) 153 | browser.runtime.onInstalled.addListener(checkSettings) 154 | 155 | console.info('Trello Super Powers WebExtension started successfully.') 156 | -------------------------------------------------------------------------------- /assets/logos/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 174 | -------------------------------------------------------------------------------- /inject/inject.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | /* 4 | Inizialize Trello Super Powers features 5 | - copy card id on click 6 | - compact mode 7 | - resizable lists 8 | - label text 9 | - number of cards per list 10 | */ 11 | 12 | function gracefullyInject (feature, args) { 13 | /** Takes a funtion and injects it 14 | * TODO: add error handling logic 15 | */ 16 | feature(args) 17 | } 18 | 19 | /** 20 | * Wrapper for `browser.storage.local.get()`. 21 | * 22 | * @returns {object} An object with current settings. 23 | */ 24 | async function getSettings () { 25 | return browser.storage.local.get() 26 | } 27 | 28 | // NOTE: Ideally in the future, each feature has its own module 29 | var features = { 30 | /** 31 | * Initializes ID feature. 32 | * 33 | * @returns {promise} 34 | */ 35 | id (onlyShowOnHover) { 36 | return new Promise(function (resolve, reject) { 37 | const input = document.createElement('input') 38 | 39 | // Add dummy element so we can use the clipboard functionality 40 | input.setAttribute('style', 'height: 0px;padding: 0px; margin: 0px; border: none;') 41 | document.getElementsByTagName('body')[0].appendChild(input) 42 | 43 | document.addEventListener('click', copyCardURL, true) 44 | function copyCardURL (e) { 45 | // Don't move on if the element clicked is not an ID 46 | if (!e.target.classList.contains('card-short-id')) return 47 | 48 | let elem 49 | 50 | e.stopImmediatePropagation() 51 | e.preventDefault() 52 | 53 | elem = e.target 54 | // Traverse up the DOM to find the anchor element with the URL we want to copy. 55 | while (true) { 56 | elem = elem.parentNode 57 | 58 | if (elem.tagName !== 'A') continue 59 | 60 | input.value = elem.href 61 | input.select() 62 | document.execCommand('copy') 63 | break 64 | } 65 | 66 | // NOTE: Content Scripts do not have access to the notifications API. If a notification should be sent, we have to communicate with the background script using the messaging API 67 | browser.runtime.sendMessage({ 68 | type: 'notification', 69 | message: browser.i18n.getMessage('injectIdNotificationBody') 70 | }) 71 | } 72 | 73 | console.info('[Trello Super Powers] Injected feature: "Show card IDs"') 74 | board.classList.add('TSP-id-enabled') 75 | if (onlyShowOnHover) { 76 | board.classList.add('onlyShowOnHover') 77 | } 78 | resolve() 79 | }) 80 | }, 81 | /** 82 | * Initializes Compact Mode feature 83 | * 84 | * @returns {promise} 85 | */ 86 | compact (byDefault) { 87 | return new Promise(async function (resolve, reject) { 88 | function createCompactModeButton () { 89 | const parent = document.createElement('a') 90 | parent.setAttribute('class', 'board-header-btn compact-mode-button') 91 | // TODO: Internationalize this string! 92 | parent.setAttribute('title', 'Toggle Compact Mode') 93 | 94 | const child = document.createElement('span') 95 | child.setAttribute('class', 'board-header-btn-text') // The `board-header-btn-text` class is provided by Trello itself 96 | child.textContent = browser.i18n.getMessage('settingsCompactTitle') 97 | 98 | parent.appendChild(child) 99 | 100 | return parent 101 | } 102 | 103 | function toggleCompactMode () { 104 | // Apply Compact Mode CSS 105 | board.classList.toggle('compact-mode') 106 | } 107 | 108 | const compactModeButton = createCompactModeButton() 109 | 110 | compactModeButton.addEventListener('click', toggleCompactMode) 111 | 112 | // Inject into page 113 | document 114 | .getElementById('permission-level') 115 | .parentElement.appendChild(compactModeButton) 116 | 117 | console.info('[Trello Super Powers] Injected feature "Compact Modew"') 118 | board.classList.add('TSP-compact-enabled') 119 | 120 | byDefault && compactModeButton.click() 121 | resolve() 122 | }) 123 | }, 124 | /** 125 | * Initializes "Hide 'Add new List'-Button" feature 126 | * 127 | * @returns {promise} 128 | */ 129 | hideAddNewList () { 130 | return new Promise(function (resolve, reject) { 131 | const addNewListElement = document.getElementsByClassName('js-add-list')[0] 132 | addNewListElement.classList.toggle('hide-element') 133 | 134 | console.info('[Trello Super Powers] Injected feature: "Hide \'Add new List\'"') 135 | 136 | resolve() 137 | }) 138 | }, 139 | /** 140 | * Initializes Resizable Lists feature 141 | * 142 | * @returns {promise} 143 | */ 144 | resize () { 145 | return new Promise(async function (resolve, reject) { 146 | function createResizeElem () { 147 | function attachListeners () { 148 | document.addEventListener('mousemove', adjustSize) 149 | document.addEventListener('mouseup', setSize) 150 | } 151 | 152 | function adjustSize (e) { 153 | const styleId = document.getElementById('inserted-tsp-styles') 154 | const currentWidth = 155 | listWidth + e.movementX / 3 < 500 && 156 | listWidth + e.movementX / 3 > 150 157 | ? (listWidth = listWidth + e.movementX / 3) 158 | : listWidth 159 | 160 | styleId.textContent = `.list-wrapper {width: ${currentWidth}px}` 161 | } 162 | 163 | function setSize (e) { 164 | document.removeEventListener('mousemove', adjustSize) 165 | document.removeEventListener('mouseup', setSize) 166 | 167 | browser.storage.local.set({ list: { width: listWidth } }).catch(e => { 168 | console.error( 169 | "[Trello Super Powers] Could not save 'listWidth' to browser sync storage.", 170 | e 171 | ) 172 | }) 173 | } 174 | 175 | const resizeElem = document.createElement('div') 176 | 177 | resizeElem.setAttribute('class', 'resize-element') 178 | // Listen for mouse down 179 | resizeElem.addEventListener('mousedown', attachListeners) 180 | 181 | return resizeElem 182 | } 183 | 184 | var listWidth 185 | var lists = [] 186 | 187 | try { 188 | listWidth = (await browser.storage.local.get()).list.width 189 | } catch (e) { 190 | console.error('[Trello Super Powers] Error: Could not get local storage', e) 191 | listWidth = 270 192 | } 193 | 194 | // Insert a