Embeddable widget code preview bookmarklet

README.md

Embeddable widget code preview bookmarklet

Quickly preview embeddable widget code such as a Twitter card or Instagram post, before adding it to your website code.

Install

Copy the text of bookmarklet.txt (below) into a new bookmark with a memorable name like "Preview Embed Code" and place it on your bookmarks bar.

Usage

1. Select the embed code (some sites do this automatically)
2. Press the bookmarklet

A new tab/window will open with the embed code loaded as a data URI. It assumes the embed will be adaptive by default, and adds a viewport meta tag, so you can quickly open your development tools and try different device sizes.

Note: Some embeds will try to load resources from protocol-relative URIs, which won't normally work in data URIs, but this bookmarklet adds the https: protocol in these cases.

bookmarklet.txt

javascript:void%20function(){var%20e,t=/((%3F:href|src)=(%3F:%22|'))\/\//g,n=%22$1https://%22;window.getSelection%3Fe=window.getSelection().toString():document.selection%26%26%22Control%22!==document.selection.type%26%26(e=document.selection.createRange().text),e%26%26window.open('data:text/html,%20%3Cmeta%20name=%22viewport%22%20content=%22width=device-width,initial-scale=1%22%3E'+e.replace(t,n))}();

index.js

var PROTOCOL_RELATIVE_URL_PATTERN = /((?:href|src)=(?:"|'))\/\//g;
var PROTOCOL_RELATIVE_URL_REPLACEMENT = '$1https://';
var markup;

if (window.getSelection) {
    markup = window.getSelection().toString();
} else if (document.selection && document.selection.type !== 'Control') {
    markup = document.selection.createRange().text;
}

if (markup) {
    window.open(
        'data:text/html, <meta name="viewport" content="width=device-width,initial-scale=1">' +
        markup.replace(PROTOCOL_RELATIVE_URL_PATTERN, PROTOCOL_RELATIVE_URL_REPLACEMENT)
    );
}