Skip to content

Instantly share code, notes, and snippets.

@cowboy cowboy/index.html
Last active Oct 21, 2018

Embed
What would you like to do?
/r/megalinks base64+bold text decoder
<div id=content>
<div id=bm-link-container>
<p>Bookmarklet <em>(drag this to your bookmarks bar)</em></p>
<span id=bm-link></span>
</div>
<div id=bm-code-container>
<p>Bookmarklet Code <em>(processed by babel and URIencoded)</em></p>
<textarea id=bm-code readonly></textarea>
</div>
<div id=bm-source-container>
<p id=bm-source-title>Bookmarklet Source</p>
<textarea id=bm-source readonly></textarea>
</div>
</div>
const bookmarkletName = 'mega'
const bookmarkletSource = () => {
const log = (...args) => console.log('[mega]', ...args)
const elems = [...document.querySelectorAll('.usertext-body *')]
// remove bold elements that are a part of a contiguous word
elems
// only process elements that contain bold children
.filter(p => [...p.children].some(n => n.nodeName === 'STRONG'))
.forEach(p => {
const children = [...p.children]
// ensure all children...
const remove = children.every(n => {
const prev = n.previousSibling
const next = n.nextSibling
// are bold,
return n.nodeName === 'STRONG'
// have a previous or next sibling
&& (prev || next)
// aren't separated from their previous or next sibling by a space
&& (!prev || prev.nodeType === 3 && /\S$/.test(prev.nodeValue))
&& (!next || next.nodeType === 3 && /^\S/.test(next.nodeValue))
// don't contain spaces
&& /^\S+$/.test(n.nodeValue)
})
if (remove) {
log('remove bold <=', p.innerHTML)
children.forEach(n => p.removeChild(n))
// "collapse" all text nodes into one
p.innerText = p.innerText
log('remove bold =>', p.innerHTML)
}
})
// base64 decode stuff
elems
.forEach(p => [...p.childNodes]
// only process text nodes
.filter(n => n.nodeType === 3)
.forEach(n => {
// should fail gracefully if there are any errors (eg. with atob)
try {
let isHtml, child
const str = n.nodeValue.split(/(\s+)/).map(s => {
// process 16+ contiguous character base64 words
if (/^[A-Za-z0-9+/=]{16,}$/.test(s)) {
log('base64 <=', s)
// base64 decode word and remove any surrounding spaces
s = atob(s).trim()
// convert any decoded urls to clickable links
if (/^https?:\/\//.test(s)) {
s = `<a href="${s}">${s}</a>`
isHtml = true
}
log('base64 =>', s)
}
return s
}).join('')
if (isHtml) {
// ensure html gets rendered properly
const tmp = document.createElement('div')
tmp.innerHTML = str
child = document.createDocumentFragment()
Array.from(tmp.childNodes).forEach(c => child.append(c))
} else {
// no html? just add the text
child = document.createTextNode(str)
}
n.parentNode.replaceChild(child, n)
} catch (e) {}
})
)
}
// STUFF TO MAKE THE PAGE RENDER
const transform = code => {
code = `(${code})()`
code = Babel.transform(code, {
presets: ['es2015'],
minified: true,
}).code
return `(()=>{${code}})()`
}
const getBookmarklet = fn => {
const transformed = transform(fn.toString())
return "javascript:" + encodeURIComponent(transformed)
}
const bookmarkletCode = getBookmarklet(bookmarkletSource)
$('#bm-link').html(`<a href="${bookmarkletCode}">${bookmarkletName}</a>`)
$('#bm-code').html(bookmarkletCode)
$('#bm-source').html(bookmarkletSource.toString())
//$('#bm-source').html(transform(bookmarkletSource.toString()))
// show edit button if relevant
const parts = location.pathname.split('/')
if (parts[2] === 'fullpage') {
parts[2] = 'pen'
const href = `https://codepen.io${parts.join('/')}`
$('#bm-source-title').append(` <em>(<a href="${href}" target=_top>edit source</a>)</em>`)
}
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
@use postcss-cssnext;
html, body {
height: 100%;
}
body {
font-family: Gill Sans, Gill Sans MT, Calibri, sans-serif;
background: #eee;
}
#content {
min-height: 100%;
display: flex;
flex-direction: column;
}
#content > div {
padding: 1em 1em 0;
display: flex;
flex-direction: column;
&:last-child {
padding-bottom: 1em;
}
}
#bm-code-container {
flex: 1;
}
#bm-source-container {
flex: 8;
}
p {
margin-top: 0;
}
textarea {
flex: 1;
font-family: Consolas, monaco, monospace;
width: 100%;
min-height: 3em;
}
em {
font-size: 0.8em;
color: #777;
}
a {
color: #3ae;
&:hover {
color: #3b3;
}
}
#bm-link a {
background: #3ae;
color: #fff;
padding: 0.1em 0.4em;
border-radius: 5px;
text-decoration: none;
&:hover {
background: #3b3;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.