Skip to content

Instantly share code, notes, and snippets.

@ento

ento/index.html

Last active July 25, 2016 00:40
Show Gist options
  • Save ento/6319070 to your computer and use it in GitHub Desktop.
Save ento/6319070 to your computer and use it in GitHub Desktop.
Download ZIP
Userstyle bookmarklet maker
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./style.css"/>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js"></script>
</head>
<body>
<div class="form-group">
<label for="stylesheet">Stylesheet URL</label>
<input type="url" id="stylesheet" class="form-control">
<p class="help-block">Paste your stylesheet URL to generate a <a href="http://juicystudio.com/article/accessible-stylesheet-bookmarklet.php">bookmarklet</a> which inserts it to your current page.</p>
</div>
<div class="form-group">
<label for="bookmarklet">Bookmarklet source</label>
<textarea id="bookmarklet" class="form-control"></textarea>
</div>
<script src="./make_bookmarklet.js"></script>
</body>
</html>
Raw
make_bookmarklet.js
function make_bookmarklet(path) {
var source = _.template("javascript:(function(id, href){if (!document.getElementById(id)){var objHead = document.getElementsByTagName('head'); if (objHead[0]){if (document.createElementNS && objHead[0].tagName == 'head') var objCSS = objHead[0].appendChild(document.createElementNS('http://www.w3.org/1999/xhtml', 'link')); else var objCSS = objHead[0].appendChild(document.createElement('link')); objCSS.id = id; objCSS.rel = 'stylesheet'; objCSS.href = href; objCSS.type = 'text/css';}}})('<%= id %>', '<%= stylesheet_url %>')");
var stylesheet_url = path;
if (stylesheet_url.indexOf('//') == -1) {
var url_parts = location.href.split('/');
url_parts.pop();
url_parts.push(path);
stylesheet_url = url_parts.join('/');
}
var id = stylesheet_url.split('/').pop();
document.title = id;
$('#bookmarklet').val(source({id: id, stylesheet_url: stylesheet_url}));
}
$(function(){
$('#stylesheet').on('keyup', _.debounce(function(e){
make_bookmarklet($(e.target).val());
}, 200));
});
Raw
style.css
textarea.form-control {
height: 10em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment