scripting
Bookmarklet link on the 'Drummer FAQs' page
The bookmarklet wouldn't initially work for me.
I discovered it on the following page, in the Web clips & the bookmarklet section:
http://docserver.scripting.com/drummer/general.opmlDrummer FAQs Last update: Monday November 29, 2021; 12:54 PM EST.
Perhaps there is some sort of parsing? issue with one or more of the scripts at docserver.scripting.com. (Alternatively, it could just be an issue with my computer/browser.)
When a user (at least in the chromium-based Microsoft Edge browser) tries to drag the bookmarklet to their 'bookmarks'/'favorites' bar, or right-clicks on the link and selects 'copy link', the following text is available:
from general.opml
javascript: (function () { function encode (s) { s = s.toString (); s = s.replace (new RegExp (
Yup. It just stops.
Details:
(I added linebreaks in the codeblocks for readability when it wouldn't change the meaning)
A) general.opml {xml / opml version}
<outline
text="Install the bookmarklet by dragging the text below into your browser's chrome."
created="Sat, 23 Oct 2021 00:49:06 GMT">
<outline
text="<a href=
"javascript: (function () { function encode (s) { s = s.toString (); s = s.replace
(new RegExp ("%", "g"), " percent"); return (encodeURIComponent (s)); }
var url = "http://drummer.scripting.com/?";
var what = "what=bookmarklet";
var link = "&link=" + encode (location.href);
var title = "&title=" + encode (document.title);
var desc = "&description=" + encode (document.getSelection ());
window.open (url + what + link + title + desc); }) (); "
>
<span style="font-family: Ubuntu; font-weight: bold; font-size: 20px;">
Drummer
</span></a>"
created="Sat, 23 Oct 2021 01:01:22 GMT"
/>
</outline>
xml)
B) general.opml {html version - view source}
(i.e. the HTML as delivered by the server; before any javascript is executed)
from general.opml
{
"text": "Install the bookmarklet by dragging the text below into your browser's chrome.",
"created": "Sat, 23 Oct 2021 00:49:06 GMT",
"subs": [
{
"text": "<a href=\"javascript: (function () { function encode (s) { s = s.toString (); s = s.replace (new RegExp (\"%\", \"g\"), \" percent\"); return (encodeURIComponent (s)); } var url = \"http://drummer.scripting.com/?\"; var what = \"what=bookmarklet\"; var link = \"&link=\" + encode (location.href); var title = \"&title=\" + encode (document.title); var desc = \"&description=\" + encode (document.getSelection ()); window.open (url + what + link + title + desc); }) (); \"><span style=\"font-family: Ubuntu; font-weight: bold; font-size: 20px;\">Drummer</span></a>",
"created": "Sat, 23 Oct 2021 01:01:22 GMT"
}
]
},
(highlighted as: JSON)
... at first glance nothing may seem to be amiss... 'double-quotes' appear to be 'escaped'
C) Everything above, but it appears in the _DOM_ as input to the browser's rendering engine
(i.e. after any javascripts have run; the HTML as rendered)
(hidden for clarity: full version matching the above code blocks:)
general.opml {dom version - after any javascripts have run}
<li>
<div class="divOutlineText">
<span class="spOutlineIcon"><a class="aOutlineWedgeLink" onclick="ecOutline (16)">
<i class="fa fa-caret-down" style="color: silver;" id="idOutlineWedge16"></i>
</a></span>
<a class="aOutlineTextLink" onclick="ecOutline (16)">
Install the bookmarklet by dragging the text below into your browser's chrome.
</a>
<a name="1634950146000"></a><span class="spNodePermalink"><a href="#1634950146000">#</a></span>
</div>
<ul class="ulOutlineList ulLevel3" id="idOutlineLevel16">
<li><div class="divOutlineText">
<a href="javascript: (function () { function encode (s) { s = s.toString (); s = s.replace (new RegExp (" %",="" "g"),="" "="" percent");="" return="" (encodeuricomponent="" (s));="" }="" var="" url="http://drummer.scripting.com/?" ;="" what="what=bookmarklet" link="&link=" +="" encode="" (location.href);="" title="&title=" (document.title);="" desc="&description=" (document.getselection="" ());="" window.open="" (url="" desc);="" })="" ();=""><span style="font-family: Ubuntu; font-weight: bold; font-size: 20px;">Drummer</span></a>
<a name="1634950882000"></a>
<span class="spNodePermalink"><a href="#1634950882000">#</a></span>
</div></li>
</ul>
</li>
(highlighted as: HTML)
general.opml {dom version - after any javascripts have run}
<li>
<div class="divOutlineText">
<span class="spOutlineIcon"><a class="aOutlineWedgeLink" onclick="ecOutline (16)">
<i class="fa fa-caret-down" style="color: silver;" id="idOutlineWedge16"></i>
</a></span>
<a class="aOutlineTextLink" onclick="ecOutline (16)">
Install the bookmarklet by dragging the text below into your browser's chrome.
</a>
<a name="1634950146000"></a><span class="spNodePermalink"><a href="#1634950146000">#</a></span>
</div>
<ul class="ulOutlineList ulLevel3" id="idOutlineLevel16">
<li><div class="divOutlineText">
<a href="javascript: (function () { function encode (s) { s = s.toString (); s = s.replace (new RegExp (" %",="" "g"),="" "="" percent");="" return="" (encodeuricomponent="" (s));="" }="" var="" url="http://drummer.scripting.com/?" ;="" what="what=bookmarklet" link="&link=" +="" encode="" (location.href);="" title="&title=" (document.title);="" desc="&description=" (document.getselection="" ());="" window.open="" (url="" desc);="" })="" ();=""><span style="font-family: Ubuntu; font-weight: bold; font-size: 20px;">Drummer</span></a>
<a name="1634950882000"></a>
<span class="spNodePermalink"><a href="#1634950882000">#</a></span>
</div></li>
</ul>
</li>
(highlighted as: JavaScript)
- The single line in question; highlighted as
javascript:
<a href="javascript: (
function () {
function encode (s) {
s = s.toString ();
s = s.replace (new RegExp (" %",="" "g"),="" "="" percent");=""
return="" (encodeuricomponent="" (s));="" }=""
var="" url="http://drummer.scripting.com/?" ;=""
what="what=bookmarklet"
link="&link=" +="" encode="" (location.href);=""
title="&title=" (document.title);=""
desc="&description=" (document.getselection="" ());=""
window.open="" (url="" desc);="" })="" ();="">
<span style="font-family: Ubuntu; font-weight: bold; font-size: 20px;">Drummer</span>
</a>
- The single line in question; highlighted as
HTML:
<a href="javascript: (
function () {
function encode (s) {
s = s.toString ();
s = s.replace (new RegExp (" %",="" "g"),="" "="" percent");=""
return="" (encodeuricomponent="" (s));="" }=""
var="" url="http://drummer.scripting.com/?" ;=""
what="what=bookmarklet"
link="&link=" +="" encode="" (location.href);=""
title="&title=" (document.title);=""
desc="&description=" (document.getselection="" ());=""
window.open="" (url="" desc);="" })="" ();="">
<span style="font-family: Ubuntu; font-weight: bold; font-size: 20px;">Drummer</span>
</a>
AFAIK, the working bookmarklet code is:
javascript: (function () { function encode (s) { s = s.toString (); s = s.replace (new RegExp ("%", "g"), " percent"); return (encodeURIComponent (s)); } var url = "http://drummer.scripting.com/?"; var what = "what=bookmarklet"; var link = "&link=" + encode (location.href); var title = "&title=" + encode (document.title); var desc = "&description=" + encode (document.getSelection ()); window.open (url + what + link + title + desc); }) ();
Same thing; nicer formatting:
javascript: (
function () {
function encode (s) {
s = s.toString ();
s = s.replace (new RegExp ("%", "g"), " percent");
return (encodeURIComponent (s));
}
var url = "http://drummer.scripting.com/?";
var what = "what=bookmarklet";
var link = "&link=" + encode (location.href);
var title = "&title=" + encode (document.title);
var desc = "&description=" + encode (document.getSelection ());
window.open (url + what + link + title + desc);
}
)
();
Tl;dr:
I was able to make the bookmarklet work by directly copying the code from the opml-formatted page, but I'm still posting this so that:
- the FAQ page can be updated so that the bookmarklet installation works as described:
"Install the bookmarklet by dragging the text below into your browser's chrome."
- in the event that there's a broader parsing issue with how quote marks (or other special characters) that exist in the OPML source are rendered in the browser.
a. (perhaps this ends up being a
docserver/PageParkissue more than an actualDrummerissue?)
P.S. Thanks for all the work you are doing and for sharing your ideas / creations with the world!
A curtain with nothing behind.
Tangentially...
... while you're looking at that page anyway, the link to DocServer in the "Your own DocServer" section uses https instead of http in its URL.
@jgrisham -- thanks for the very detailed post. I had a lot of help getting the bookmarklet to work, so what I'm going to do is post a link to this issue in that thread, so the experts can read this and tell me what to do. :smile:
And thanks for the heads-up on the link to the DocServer app. I fixed it.
Of course! (Apologies for not making it more concise, but it was getting late.)
For the sake of anyone 'newly entering the chat':
- To be clear, the bookmarklet code itself appears to work fine.
Example:
The following page, when loaded in to a browser, produces a working bookmarklet and passes the W3C Markup Validation Service parser:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta charset="utf-8" />
<title>Drummer bookmarklet demo</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<a href="javascript: (function () { function encode (s) { s = s.toString (); s = s.replace (new RegExp ("%", "g"), " percent"); return (encodeURIComponent (s)); } var url = "http://drummer.scripting.com/?"; var what = "what=bookmarklet"; var link = "&link=" + encode (location.href); var title = "&title=" + encode (document.title); var desc = "&description=" + encode (document.getSelection ()); window.open (url + what + link + title + desc); }) ();">Send to Drummer</a>
</body>
</html>
What appears to be amiss is the whatever client-side code that converts strings in from the in-line JSON (containing quote marks) for display in HTML.
Unfortunately, there are multiple levels of parsing happening here, across several different formats, each potentially with their own set of special requirements:
- OPML / XML (server-side, in this case?)
- JSON
- HTML
- JavaScript
It appears that the OPML -> JSON conversion is correctly quoting the characters (presumably server-side in DocServer / PagePark).
If I had to guess (and to be clear, I know nothing about JavaScript), the client-side is un-quoting the strings when parsing the JSON but neglecting to re-quote it when injecting new HTML into the page's DOM. (e.g. some of the var tokens are just missing, implying that the JS engine actually tried to execute those portions of the string)
... but... since OPML is XML, shouldn't it be escaping double-quotes (") as either " or " for any text stored in value attributes that are themselves delimited by double-quotes, well before being turned into in-line JSON?
Great. So, I've narrowed it down to either _client-side_ or _server-side_. :(
*steps back slowly*
Good luck to whomever figures out a fix for this, and thank you!
Until the actual root cause of this is discovered and corrected (since I'm assuming that incorrectly formatted OPML should never actually be allowed to cause unintended JavaScript execution in the browser, not to mention possible user data loss), …a potential workaround:
- simply replacing each instance of the double-quotes
"in the JavaScript of the bookmarklet with single-quotes'appears to validate both as properJavaScriptand as valid contents of a"-delimitedvalueof an XML tag:
javascript: (function () { function encode (s) { s = s.toString (); s = s.replace (new RegExp ('%', 'g'), ' percent'); return (encodeURIComponent (s)); } var url = 'http://drummer.scripting.com/?'; var what = 'what=bookmarklet'; var link = '&link=' + encode (location.href); var title = '&title=' + encode (document.title); var desc = '&description=' + encode (document.getSelection ()); window.open (url + what + link + title + desc); }) ();
e.g., replace the outline text so that the OPML matches the following:
<outline
text="Install the bookmarklet by dragging the text below into your browser's chrome."
created="Sat, 23 Oct 2021 00:49:06 GMT">
<outline
text="<a href="javascript: (function () { function encode (s) { s = s.toString (); s = s.replace (new RegExp ('%', 'g'), ' percent'); return (encodeURIComponent (s)); } var url = 'http://drummer.scripting.com/?'; var what = 'what=bookmarklet'; var link = '&link=' + encode (location.href); var title = '&title=' + encode (document.title); var desc = '&description=' + encode (document.getSelection ()); window.open (url + what + link + title + desc); }) ();">
<span style="font-family: Ubuntu; font-weight: bold; font-size: 20px;">
Drummer
</span></a>"
created="Sat, 23 Oct 2021 01:01:22 GMT"
/>
</outline>
... but it should probably still be something like this, right?:
<outline
text="Install the bookmarklet by dragging the text below into your browser's chrome."
created="Sat, 23 Oct 2021 00:49:06 GMT">
<outline
text="<a href="javascript: (function () { function encode (s) { s = s.toString (); s = s.replace (new RegExp ('%', 'g'), ' percent'); return (encodeURIComponent (s)); } var url = 'http://drummer.scripting.com/?'; var what = 'what=bookmarklet'; var link = '&link=' + encode (location.href); var title = '&title=' + encode (document.title); var desc = '&description=' + encode (document.getSelection ()); window.open (url + what + link + title + desc); }) ();">
<span style="font-family: Ubuntu; font-weight: bold; font-size: 20px;">
Drummer
</span></a>"
created="Sat, 23 Oct 2021 01:01:22 GMT"
/>
</outline>
On the bright side, at least we're nowhere near EBCDIC-encoded XML, piped to a bash script by way of some php? 😭
Dave, I've gone back to exploring Drummer. I've never been able to get the Drummer bookmarklet to work. I look at the code, and it appears incomplete to me, base on what I have used in the past. Is this complete, working code?
javascript: (function () { function encode (s) { s = s.toString (); s = s.replace (new RegExp (
I use Brave Browser and I have tried Chrome, Firefox, Vivaldi and Opera. All failed.
Thank you!
@Kelly-NAproducR -- hopefully someone else can help with this. I am not able to get into this now. But anyone could make a bookmarklet for Drummer, it doesn't have to be me.
@Kelly-NAproducR The code you listed is not correct (or more precisely, it is not complete).
Background:
Considering that most structured languages require that grouping symbols (such as () / [] / {} / '' / "") be used in matched pairs (much as HTML requires tags to be 'closed'), ...
... the fact that the javascript snippet posted ends in a lonely ( is a pretty big indicator that the text has been clipped.
I haven't tested these recently[1], but here are the complete versions of the bookmarklet code (copied verbatim)[2] from the various posts earlier in this conversation:
... from post no. 1
AFAIK, the working bookmarklet code is:
javascript: (function () { function encode (s) { s = s.toString (); s = s.replace (new RegExp ("%", "g"), " percent"); return (encodeURIComponent (s)); } var url = "https://drummer.land/?"; var what = "what=bookmarklet"; var link = "&link=" + encode (location.href); var title = "&title=" + encode (document.title); var desc = "&description=" + encode (document.getSelection ()); window.open (url + what + link + title + desc); }) ();Same thing; nicer formatting:
javascript: ( function () { function encode (s) { s = s.toString (); s = s.replace (new RegExp ("%", "g"), " percent"); return (encodeURIComponent (s)); } var url = "https://drummer.land/?"; var what = "what=bookmarklet"; var link = "&link=" + encode (location.href); var title = "&title=" + encode (document.title); var desc = "&description=" + encode (document.getSelection ()); window.open (url + what + link + title + desc); } ) ();
... from post no. 4
The following page, when loaded in to a browser, produces a working bookmarklet and passes the W3C Markup Validation Service parser:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta charset="utf-8" /> <title>Drummer bookmarklet demo</title> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <body> <a href="javascript: (function () { function encode (s) { s = s.toString (); s = s.replace (new RegExp ("%", "g"), " percent"); return (encodeURIComponent (s)); } var url = "https://drummer.land/?"; var what = "what=bookmarklet"; var link = "&link=" + encode (location.href); var title = "&title=" + encode (document.title); var desc = "&description=" + encode (document.getSelection ()); window.open (url + what + link + title + desc); }) ();">Send to Drummer</a> </body> </html>
... from post no. 5
javascript: (function () { function encode (s) { s = s.toString (); s = s.replace (new RegExp ('%', 'g'), ' percent'); return (encodeURIComponent (s)); } var url = 'https://drummer.land/?'; var what = 'what=bookmarklet'; var link = '&link=' + encode (location.href); var title = '&title=' + encode (document.title); var desc = '&description=' + encode (document.getSelection ()); window.open (url + what + link + title + desc); }) ();
(I'd try one at a time, starting from the last one, until you find one that works. See the linked posts above for more context about each.)
Tl;dr:
Try this one (it's the same as number 5 above); it works for me on Firefox (v120 running on Fedora Linux):
javascript: (function () { function encode (s) { s = s.toString (); s = s.replace (new RegExp ('%', 'g'), ' percent'); return (encodeURIComponent (s)); } var url = 'https://drummer.land/?'; var what = 'what=bookmarklet'; var link = '&link=' + encode (location.href); var title = '&title=' + encode (document.title); var desc = '&description=' + encode (document.getSelection ()); window.open (url + what + link + title + desc); }) ();
Bonus: if you have text selected on the page when you activate the bookmarklet, it will be captured as the 'description' and appear as a child of the bookmark in the Drummer outline.
(This is probably documented, but I had forgotten about this useful feature until just now!)
[Footnote 1]: (those posts are over 26 months old, so I can't guarantee that Drummer hasn't changed something important in the meantime)
- (Edit: something did change -- the URL used for Drummer!)
[Footnote 2]: Thanks to @troutcolor, they are now direct copies except that I changed every instance of http://drummer.scripting.com to https://drummer.land. (reply edited 2024-03-14)
Hi, I checked my bookmarklet which seemed to be broken, but it was pointing at the old url. I change it to this one:
javascript: (function () { function encode (s) { s = s.toString (); s = s.replace (new RegExp ("%", "g"), " percent"); return (encodeURIComponent (s)); } var url = "https://drummer.land/?"; var what = "what=bookmarklet"; var link = "&link=" encode (location.href); var title = "&title=" encode (document.title); var desc = "&description=" encode (document.getSelection ()); window.open (url what link title desc); }) ();
Which worked as expected. I don't recall where I got it or if I'd edited it. It was url encoded when I copied it I unencode it hope it works for you
cheers john
