Creating a Javascript Bookmarklet using ChatGPT

This bookmarklet can copy the current page’s title and URL in markdown format to your clipboard. I will walk you through the process step-by-step showing the prompts used and the responses we received from Bing Chat.

I want to create a javascript bookmark that take the URL and title from a page and formats it as markdown. It should then copy this markdown to my keyboard

Here’s a JavaScript bookmarklet that you can use to achieve this:

javascript:(function() {
    var markdown = '[' + document.title + '](' + window.location.href + ')';
    navigator.clipboard.writeText(markdown);
})();

I will be using chrome browser so this does not work

I apologize for the confusion. Here’s a revised version of the bookmarklet that should work in Chrome:

javascript:(function() {
    var markdown = '[' + document.title + '](' + window.location.href + ')';
    var input = document.createElement('input');
    input.setAttribute('value', markdown);
    document.body.appendChild(input);
    input.select();
    document.execCommand('copy');
    document.body.removeChild(input);
})();

Can you change it so that if the URL has a section title, it uses the section title in the markdown instead of the page title

Sure! Here’s a revised version of the bookmarklet that will use the section title in the markdown if it is present in the URL:

javascript:(function() {
    var title = document.title;
    var url = window.location.href;
    var sectionTitle = url.match(/#(.*)/);
    if (sectionTitle) {
        title = sectionTitle[1].replace(/_/g, ' ');
    }
    var markdown = '[' + title + '](' + url + ')';
    var input = document.createElement('input');
    input.setAttribute('value', markdown);
    document.body.appendChild(input);
    input.select();
    document.execCommand('copy');
    document.body.removeChild(input);
})();

If the URL contains a section title (e.g., https://en.wikipedia.org/wiki/JavaScript#History), it will use the section title (History) instead of the page title in the markdown.

Can you change it so that if it is using a section title, it replaces - with a space and makes it title case

Sure! Here’s a revised version of the bookmarklet that will replace - with a space and make the section title title case if it is present in the URL:

javascript:(function() {
    var title = document.title;
    var url = window.location.href;
    var sectionTitle = url.match(/#(.*)/);
    if (sectionTitle) {
        title = sectionTitle[1].replace(/-/g, ' ');
        title = title.replace(/\b\w/g, function(l){ return l.toUpperCase() });
    }
    var markdown = '[' + title + '](' + url + ')';
    var input = document.createElement('input');
    input.setAttribute('value', markdown);
    document.body.appendChild(input);
    input.select();
    document.execCommand('copy');
    document.body.removeChild(input);
})();

Can you minify the code as much as possible so that I can share it. Can you also give a brief 50 word description of what it does. Then bullet point the instructions to add it to the bookmark bar

Sure! Here’s a minified version of the bookmarklet:

javascript:!function(){var t=document.title,e=window.location.href,n=e.match(/#(.*)/);n&&(t=n[1].replace(/-/g," "),t=t.replace(/\b\w/g,function(t){return t.toUpperCase()}));var o="["+t+"]("+e+")",a=document.createElement("input");a.setAttribute("value",o),document.body.appendChild(a),a.select(),document.execCommand("copy"),document.body.removeChild(a)}();

This bookmarklet copies the current page’s title and URL in markdown format to your clipboard. If the URL contains a section title, it will use the section title instead of the page title in the markdown. It will also replace - with a space and make the section title title case.

To add this bookmarklet to your bookmarks bar in Chrome:

1. Right-click on the bookmarks bar and select “Add Page”.
2. In the “Name” field, enter a name for the bookmarklet (e.g., “Copy as Markdown”).
3. In the “URL” field, paste the minified code above.
4. Click “Save”.