Last active
October 2, 2019 14:11
-
-
Save westonwatson/04e705de158985e21a5f96b117254155 to your computer and use it in GitHub Desktop.
Create Outline.com Links for each anchor tag on a page.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
window.addEventListener('load', function() { | |
//Add CSS/Styles for Outline Button | |
var styleBlock = document.createElement('style'); | |
styleBlock.innerHTML = '.outline-btn {position: fixed;right: 1em;top: .5em;text-shadow: 1px 1px 4px #0000FF;color: white !important;font-size: 36px;z-index: 1000;}.outline-btn:hover {text-shadow: 1px 1px 4px #FF0000;}'; | |
document.head.appendChild(styleBlock); | |
//Create Outline Button | |
var oBtn = document.createElement('a'); | |
oBtn.innerHTML = '概'; //Japanese Character/Word for Outline | |
oBtn.className = 'outline-btn'; | |
oBtn.href='#'; | |
//Add Outline.com Links on Button Click | |
oBtn.onclick = function() { | |
document.querySelectorAll('a').forEach( | |
function(nodeObj, objIndex) { | |
var parentNode = nodeObj.parentNode; | |
var cloneNode = nodeObj.cloneNode(true); | |
var hrefString = nodeObj.href; | |
hrefString = ('https://outline.com/' + hrefString); | |
cloneNode.href = hrefString; | |
cloneNode.target = '_blank'; | |
cloneNode.innerHTML = ' (概)'; | |
nodeObj.parentNode.insertBefore(cloneNode, nodeObj.nextSibling); | |
} | |
); | |
oBtn.parentNode.removeChild(oBtn); | |
}; | |
document.body.appendChild(oBtn); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Here's what the Outline Button looks like:

Here's what the page looks like after clicking the outline button:
