Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
A bookmarklet for grabbing just a piece of a web page and converting it to Markdown using heckyesmarkdown.com.
javascript:(function(){var p=document.createElement("p");p.innerHTML="<strong>Loading&hellip;</strong>";p.id="loadingp";p.style.padding="20px";p.style.background="#fff";p.style.left="20px";p.style.top=0;p.style.position="fixed";p.style.zIndex="9999999";p.style.opacity=".85";document.body.appendChild(p);document.body.appendChild(document.createElement("script")).src="https://cdn.rawgit.com/ttscoff/6109434/raw/Bullseye.js?x="+(Math.random());})();
// version 0.4
// Bugfix for Firefox
//
// Bullseye 0.3
// Add escape key to cancel
// Only use the first class when constructing path, potentially avoid dynamically-added classnames
// Allow bookmarklet to be called with "window.bullseyeShowFrame=0" at the beginning to return just raw text
//
// Version 0.2
// Resolves relative urls
// removes Twitter intent links
// tries to update lazy loaded image urls
// loads from raw source, with fallback for dynamically-loaded content
(function () {
function callback() {
(function ($) {
var jQuery = $, $els = $("div,table,article,section,aside");
$('#loadingp').fadeOut("fast", function () {
$(this).remove();
});
$els.on("mouseover mouseout click", function (a) {
a.stopPropagation();
a.type === "mouseover" ? $(this).css({
outline: "1px solid rgb(194, 130, 148)"
}).addClass("mkhovered") : $els.css({
outline: "none"
}).removeClass("mkhovered");
if (a.type === "click") {
a.preventDefault();
$(".mkhovered").css({
outline: "none"
}).removeClass("mkhovered");
var $container = $(this);
var elpath = [], $parents = $container.parentsUntil("body").add($container);
$parents.each(function(i,n) {
var index = $(n).index();
index = (index < 2) ? ":first" : ":nth-of-type("+(index-1)+")";
var tag = n.tagName.toLowerCase();
if ($(n).attr("id") !== undefined) {
elpath.push("#"+$(n).attr("id"));
} else if (n.className !== "") {
elpath.push(tag+"."+n.className.split(" ")[0]+index);
} else {
elpath.push(tag+index);
}
});
var loadpath = window.location.pathname+" "+elpath.join(" ");
// console.log(loadpath);
// return;
$("<div>").load(loadpath, function() {
var raw = this;
if ($(raw).text() === "") {
raw = $("<div>").append($container.html()).get(0);
}
$(raw).find('a[href*="twitter.com/intent"],a[href*="app.net/intent"]').remove();
$(raw).find("a,img").each(function(){
var el = this, $el = $(el), attr = el.tagName === "A" ? "href" : "src";
if (el.tagName === "IMG") {
if ($el.data("original") !== undefined) {
$el.attr(attr,$el.data("original"));
}
}
if (!/^http/.test($el.attr(attr))) {
if (/^\//.test($el.attr(attr)))
var baselink = window.location.protocol + "//" + window.location.hostname;
else
var baselink = window.location.href.split("/").slice(0,-1).join("/") + "/";
$el.attr(attr, baselink + $el.attr(attr));
}
});
var showFrame = "1";
if (window.bullseyeShowFrame !== undefined) {
switch (window.bullseyeShowFrame) {
case 0:
case false: showFrame = "0"; break;
default: showFrame = "1";
}
}
var $form = $("<form>").attr("method", "post").attr("action", "http://heckyesmarkdown.com/go/")
.append($("<input name=html>").val(encodeURIComponent(raw.innerHTML)))
.append($("<input name=read>").val("0"))
.append($("<input name=output>").val("md"))
.append($("<input name=showframe>").val(showFrame))
.appendTo('body');
$form.submit();
});
}
});
$(document).bind("keyup",function(e) {
if (e.keyCode === 27) {
$els.unbind("mouseover mouseout click");
$(".mkhovered").css("outline","none").removeClass("mkhovered");
$(document).unbind("keyup");
}
return true;
});
})(jQuery.noConflict(true))
}
var s = document.createElement("script");
s.src = "https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";
if (s.addEventListener) {
s.addEventListener("load", callback, false)
} else if (s.readyState) {
s.onreadystatechange = callback
}
document.body.appendChild(s);
})();

This is not working on Chrome anymore because of mime type from Github. Perhaps the js file needs to be hosted elsewhere?.

You can see that Github's Content-Type header on raw files are "text/plain" and "X-Content-Type-Options: nosniff" which Chrome refuses to execute. I did actually find RawGit which will serve the content with the proper headers. If you change the bookmarklet to load from this link instead of straight from GitHub it'll work :)

jatubio commented Apr 16, 2015

Hello, thanks for your useful bookmarklet.

I have found one page where it's not working. Maybe you want to know ;)

https://technet.microsoft.com/en-us/library/hh849969.aspx

Just use Rawgit to avoid the Content-Type header problem:

https://cdn.rawgit.com/ttscoff/6109434/raw/Bullseye.js

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment