diff --git a/data/popup/explore.js b/data/popup/explore.js deleted file mode 120000 index a6149f5..0000000 --- a/data/popup/explore.js +++ /dev/null @@ -1 +0,0 @@ -../../../explore.js \ No newline at end of file diff --git a/data/popup/index.html b/data/popup/index.html index 7b920ea..60b1212 100644 --- a/data/popup/index.html +++ b/data/popup/index.html @@ -159,6 +159,6 @@
- + diff --git a/data/popup/matched.js b/data/popup/matched.js new file mode 100644 index 0000000..2e1da8d --- /dev/null +++ b/data/popup/matched.js @@ -0,0 +1,169 @@ +'use strict'; + +{ + const shuffle = array => { + for (let i = array.length - 1; i > 0; i -= 1) { + const j = Math.floor(Math.random() * (i + 1)); + [array[i], array[j]] = [array[j], array[i]]; + } + + return array; + }; + + const root = document.getElementById('explore'); + + const INC = Number(root.dataset.inc || 100); + const count = Number(localStorage.getItem('explore-count') || INC - 5); + + const style = document.createElement('style'); + style.textContent = ` + #explore { + background-color: #fff; + position: relative; + color: #969696; + user-select: none; + } + #explore[data-loaded=true] { + margin: 4px; + padding: 5px; + box-shadow: 0 0 1px #ccc; + border: solid 1px #ccc; + } + #explore .close { + position: absolute; + right: 6px; + top: 4px; + cursor: pointer; + } + #explore>table { + margin-top: 10px; + table-layout: fixed; + width: 100%; + border-collapse: collapse; + } + #explore a { + text-decoration: none; + color: #000; + display: flex; + align-items: center; + justify-content: center; + } + #explore td:first-child a { + justify-content: flex-start; + } + #explore td:last-child a { + justify-content: flex-end; + } + #explore .title { + border-left: solid 1px #ccc; + display: inline-block; + align-items: center; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + padding-left: 5px; + } + #explore .icon { + min-width: 28px; + height: 28px; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 50%; + color: #fff; + margin-right: 5px; + font-size: 10px; + font-weight: 100; + } + #explore .explore { + position: absolute; + right: 10px; + z-index: 1000000; + cursor: pointer; + font-size: 15px; + }`; + document.documentElement.appendChild(style); + + const cload = () => fetch('matched.json').then(r => r.json()).then(build); + const explore = () => { + const span = document.createElement('span'); + span.textContent = '↯'; + span.title = 'Explore more'; + span.classList.add('explore'); + root.appendChild(span); + span.onclick = () => { + root.textContent = ''; + localStorage.setItem('explore-count', INC); + cload(); + }; + }; + const build = json => { + if (json.length === 0) { + return; + } + root.dataset.loaded = true; + root.textContent = 'Explore more'; + const table = document.createElement('table'); + const tr = document.createElement('tr'); + const span = document.createElement('span'); + span.classList.add('close'); + span.textContent = '✕'; + span.onclick = () => { + root.textContent = ''; + root.dataset.loaded = false; + localStorage.setItem('explore-count', 0); + explore(); + }; + root.appendChild(span); + + const {homepage_url} = chrome.runtime.getManifest(); + const origin = homepage_url.split('/').slice(0, -1).join('/'); + const colors = shuffle( + ['524c84', '606470', '755da3', 'c06c84', '393e46', '446e5c', '693e52', '1d566e', '693e52', 'd95858', 'f27370'] + ); + shuffle(Object.entries(json)).slice(0, 3).forEach(([id, {name}], i) => { + const td = document.createElement('td'); + const a = Object.assign(document.createElement('a'), { + target: '_blank', + title: 'Click to browse', + href: origin + '/' + id + '.html?context=explore' + }); + + const icon = document.createElement('span'); + icon.textContent = name.split(' ').slice(0, 2).map(s => s[0]).join('').toUpperCase(); + icon.classList.add('icon'); + icon.style['background-color'] = '#' + colors[i]; + a.appendChild(icon); + + const span = document.createElement('span'); + span.classList.add('title'); + span.textContent = name; + a.appendChild(span); + td.appendChild(a); + tr.appendChild(td); + }); + table.appendChild(tr); + root.appendChild(table); + }; + const init = () => { + if (count >= INC) { + if (count < INC + 3) { + cload(); + } + else { + explore(); + } + if (count > INC + 5) { + localStorage.setItem('explore-count', INC - 6); + } + else { + localStorage.setItem('explore-count', count + 1); + } + } + else { + explore(); + localStorage.setItem('explore-count', count + 1); + } + }; + init(); +} diff --git a/data/popup/matched.json b/data/popup/matched.json new file mode 100644 index 0000000..8e92013 --- /dev/null +++ b/data/popup/matched.json @@ -0,0 +1,32 @@ +{ + "country-flags": { + "name": "Country Flags & IP WHOIS" + }, + "useragent-switcher": { + "name": "User Agent Switcher" + }, + "work-offline": { + "name": "Work Offline" + }, + "local-cdn": { + "name": "Local CDN" + }, + "media-converter": { + "name": "Tor Control (Anonymity Layer)" + }, + "save-images": { + "name": "Download All Images" + }, + "privacy-settings": { + "name": "Privacy Settings" + }, + "media-player": { + "name": "YouTube Media Player" + }, + "tab-discard": { + "name": "Auto Tab Discard" + }, + "send-to": { + "name": "Send to VLC" + } +}