Bookmark to a TiddlyWiki Bookmarklet proof-of-concept.

[amreus]

Just playing with an idea I might have read about on this forum.  It's not completely  functioning at moment, but enough of it is that I'm certain it can be made to work.

I made a browser bookmarklet that opens a popup window to your local node tiddlywiki, and appends to the wiki address the url and title of a web site. (Basically sends a HTTP GET request to your wiki, passing the site url and title in the query string.)

The wiki has a tiddler that parses the request back into a url and title variable, which can then be used to create tiddlers, etc.

I tried to write up some instructions here. Apologies if I'm terse. Please ask if you have questions or feedback.

Thanks for looking.

[Joshua Fontany]

I've been tinkering with batch importing from Chrome an dFirefox, but that did not solve the "once I have them all in TW what to do going forward" with my TWBookmarks ideas. I will have to come back to this, thanks!

I think this is a great start! Here is the pertinent Docs on Tiddlywiki.com:
https://tiddlywiki.com/#WebServer:WebServer%20%5B%5BWebServer%20API%5D%5D%20%5B%5BWebServer%20API%3A%20Put%20Tiddler%5D%5D%20%5B%5BTiddlyWeb%20JSON%20tiddler%20format%5D%5D

Best,
Joshua Fontny

[amreus]

Just wanted to post the latest code of my bookmarking-to-tw tests.  Briefly, it works by using a bookmark that opens a popup with a form that is populated with the current site title and url, allows editing of fields, then sends the data as a new tiddler in a TiddlyWiki running on a node server.  It's a 2-click solution.

There are few parts to the setup, but the files are small and hopefully understandable:

1. A bookmarklet
2. A static html form
3. Javascript functions
   
4. Server options

1. The bookmarklet is placed in your browser's toolbar. It opens a pop-up window getting its contents from the static html form. Because the origin of the popup is the same as the wiki server, there are no cross-site scripting issues. The site title and url are passed to the html file as part of the url using  the u= and t= parameters.

2. A static html file used for a popup window.  I named mine form.html. This is a html file which is opened by the bookmarklet. The static file contains a form, and includes the javascript functions, and buttons to submit or cancel.  A javascript function is used to parse the parameters from the url and populate the forms. The file lives in the files/ folder under your node wiki location.

3.The javascript file (funcs.js in this case)contains helper functions that send the form data to the node server using the WebServer API.

4. Run the server using the csrf-disable option set to yes. 

It's cool to see it working, but there's lot's of room for improvement. For example I'd like to grab some meta tags from the html as well as just the title and url. 

I put the files on github: https://github.com/amreus/bookmarking-to-tiddlywiki

Let me know if you have any questions or thoughts. I'm just a hobbyist and all my knowledge comes from Stackoverflow, so any improvements would be appreciated.

Thanks for looking.

[Atronoush Parsi]

amreus

 Thank you for sharing. I created a new wiki tiddlywiki mywiki --init serverand then created an extra folder files in mywiki folder with form.html and func.js as you advised.

 Running new wiki using  tiddlywiki mywiki --listen csrf-disable=yes  everything was fine

 Now from TWMark bookmarks with bookmark.js, I tried to add a page to my TW in Chrome 83.

 The form opens and let me add tag and save!

 But I got this error:

localhost: 8080 says

xhr.status: 0

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/6fe00ec2-40f0-4ad7-8d21-e17cee230d0fn%40googlegroups.com.

[amreus]

"Testing? We don't need no stinking Testing."

Seriously, though I use Firefox and will need to try it using Chrome.  I don't have it installed but do have a portable version I can try.

If you know how to open the Chrome developer console, it would be helpful to see if there are any errors generated when you hot the "Save" button.

[amreus]

I just tried in Chrome - worked as expected.   I'm not sure how to troubleshoot from here.   I'll start by reviewing my instructions. I might not get back to things until later in the week.

On Sunday, October 25, 2020 at 3:40:34 PM UTC-4 Atronoush wrote:

[TW Tones]

Amreus,

Great contribution here for the community. Quick collection of urls and names would be a wonder full way to quickly collate ones internet research. 

My own server config skills are not strong but please let us know if and when this leaves POC and can be widely used.

Just ask if you want some help.

Tones

[Atronoush Parsi]

The same error on Firefox!

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/7d12e778-2c43-41e7-87c9-6292668ab6f3n%40googlegroups.com.

[amreus]

2 initial thoughts..

1. This will only work with the TiddlyWiki node server. It does not work with the Bob server because it has a different API.

2. Be sure to use 127.0.0.1:8080 and not localhost:8080 in the bookmarklet. It matters to avoid the cross-site scripting issue.

I made some small changes to the files on github to remove the alert, but show the xhr.status in the popup.  The popup will close on success but remain open on an error.

If you still have errors, open the dev console (press F12 with the popup focused) before pressing the Save button and show the console text here. Since I am not getting any errors in either Firefox or Chrome, it's hard to know what is going on. Thanks.

[Atronoush Parsi]

Hi amreus,

 It works now! Thank you! 

Some minor suggestions:

1. Is it possible to prevent overwriting an existing tiddler by adding a prefix number like 1, 2, ...?

2.Is it possible to have extra fields, especially Text field? I mean while a user is allowed to add a special tag, he/she can add some text!

3. What do you think is one can select part of text or image in a webpage and bookmarking-to-tiddlywiki can add it as tiddler body (text)?

Possible issue

The  bookmarking-to-tiddlywiki allow to add new tiddler even with title containing forbidden characters like | {} etc.

I may recommend to replace such character in title when you create a new bookmark.

Thank you again and best wishes.

Atro

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/66241961-a8f6-4955-b138-8fd2368adfaen%40googlegroups.com.

[Atronoush]

amreus,

 Please have a look at https://github.com/buggyj/tiddlyclip

 You can get some good idea to develop TiddlywikiBookmarklet

Atro

[amreus]

> Please have a look at https://github.com/buggyj/tiddlyclip

I read the page - still don't know what it's for.

> 1. Is it possible to prevent overwriting an existing tiddler by adding a prefix number like 1, 2, ...?

Yes it's on my short list of things to do. 

> 2.Is it possible to have extra fields, especially Text field? I mean while a user is allowed to add a special tag, he/she can add some text!

Possible.  One aspect I like about using a bookmarklet is it is its' simplicity.  It's more accessible to the user for making customizations. Easier and more understandable than hacking a browser plugin.

> 3. What do you think is one can select part of text or image in a webpage and bookmarking-to-tiddlywiki can add it as tiddler body (text)?

Also possible if I understand what you mean.  Regular copy and paste always works.  Do you mean pre-select text?

Thanks for asking these questions. You gave me an idea that maybe I can use a tiddler in the wiki as customization, or configuration tiddler for the form. 

[Atronoush Parsi]

On Mon, Oct 26, 2020 at 10:44 PM amreus <harl...@gmail.com> wrote:

> Please have a look at https://github.com/buggyj/tiddlyclip

I read the page - still don't know what it's for.

It is one the most powerful plugin for making bookmarks directly from Firexfox/Chrome. Clip part of webpage as a tiddler and much more

 

> 1. Is it possible to prevent overwriting an existing tiddler by adding a prefix number like 1, 2, ...?

Yes it's on my short list of things to do. 

> 2.Is it possible to have extra fields, especially Text field? I mean while a user is allowed to add a special tag, he/she can add some text!

Possible.  One aspect I like about using a bookmarklet is it is its' simplicity.  It's more accessible to the user for making customizations. Easier and more understandable than hacking a browser plugin.

> 3. What do you think is one can select part of text or image in a webpage and bookmarking-to-tiddlywiki can add it as tiddler body (text)?

Also possible if I understand what you mean.  Regular copy and paste always works.  Do you mean pre-select text?

Opening the target wiki to paste contents distract you from studying/searching in the browser. It would be great to add pre-selected text/image. It is kind of clipping.

Thanks for asking these questions. You gave me an idea that maybe I can use a tiddler in the wiki as customization, or configuration tiddler for the form. 

Thank you for sharing this useful tool.

 

On Monday, October 26, 2020 at 9:26:30 AM UTC-4 Atronoush wrote:

amreus,

 Please have a look at https://github.com/buggyj/tiddlyclip

 You can get some good idea to develop TiddlywikiBookmarklet

Atro

On Sunday, October 4, 2020 at 11:50:09 PM UTC+3:30 amreus wrote:

Just playing with an idea I might have read about on this forum.  It's not completely  functioning at moment, but enough of it is that I'm certain it can be made to work.

I made a browser bookmarklet that opens a popup window to your local node tiddlywiki, and appends to the wiki address the url and title of a web site. (Basically sends a HTTP GET request to your wiki, passing the site url and title in the query string.)

The wiki has a tiddler that parses the request back into a url and title variable, which can then be used to create tiddlers, etc.

I tried to write up some instructions here. Apologies if I'm terse. Please ask if you have questions or feedback.

Thanks for looking.

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/d48d97d2-1344-4dc1-bd6e-fef28d7ff2b6n%40googlegroups.com.

[Donald Coates]

Thank you for this.  I can confirm it works on my private server https://mainwiki.digitalap3.com

possibly in instructions specifically say add files directory in same directory as tiddlers

changed the url in forms.html and funcs.js

more specific on adding bookmarklet: I created a bookmark then edited it with your code, changing the url

confirmed that it will only add a bookmark if I am signed into the server.

It would be nice to have a link to the page you are bookmarking automatically added.  I am a hobbyist like you if I have time I'll play with that riffing off Kookma's additions in the issues section of your github page.

[Donald Coates]

edit to above I see the url is added a field.

[amreus]

Yes, please check out the dev branch -  that is the branch where I pushed some updates, including updated readme.

[Atronoush]

Good improvement amreus!

 Like Donald I also support the proposed idea on GitHub repo!

One issue is about the title is used for tiddler, it is good to resolve the issue of nasty character in tiddler title.

Atro

[amreus]

Sanitizing the characters [ ] { } | from the tiddler title is in the dev branch, I just neglected to mention it. 

[amreus]

I think there is a problem though with using the web site title as the tiddler title. As you know, web site titles are not unique but tiddler titles need to be unique.  For bookmarks, it is the url that should be used as the unique id of the bookmark.

So what's the solution to that? (Just looking for opinions.)

[Donald Coates]

Dev code is working beautifully.  I also added the tiddler as Mohammed suggested to get the link to show under the tags and above the text and it works beautifully.

I think there is a problem though with using the web site title as the tiddler title. As you know, web site titles are not unique but tiddler titles need to be unique.  For bookmarks, it is the url that should be used as the unique id of the bookmark.

So what's the solution to that? (Just looking for opinions.)

I think what you have is perfect where the message of a tiddler exists comes up and the text is shown.  For me I would use this to take notes on a site and copy/paste sections.  Many times I will wonder what the section I pasted means since there wasn't enough context and go back to the site to add more.  This is perfect for that.

[Atronoush]

amreus,

As the Tiddlyspot has gone for now, I suggest to have GitHub page for http://amreus.tiddlyspot.com/#markit

 

Thanks for looking.

[Atronoush]

If you look at  https://github.com/buggyj/tiddlyclip

you will see tiddlyclip smart enough to detect the duplicated title. If you bookmark the same webpage with different content it append the new text to previous bookmark tiddler

If the content is different it adds an ordinal number to title. 

[amreus]

In the long run and particularly for the case of sharing bookmark tiddlers, I think the web site titles need to be detached from tiddler titles.  I don't like the idea of modifying titles to make them unique.  Also, sites may change their titles at any time where the site location remains stable.  We are bookmarking the location not the site name.   It makes some sense to me to use the url as part of the unique identifier, and prefix tiddler titles with a system prefix such as $:/bookmark/.

It may be less convenient this way to write filters and perform a search, but its' just that - less convenient which is different than impossible. 

[TW Tones]

Amreus,

It is somewhat trivial to build a search that focuses on tiddlers prefixed $:/bookmark anyway, then the results in the search are restricted to actual bookmarks.

Tones

[amreus]

Just an update.  A recent update to Firefox has killed this concept for me.  Firefox now blocks pop-ups more strictly.  Even though the pop-ups are generated from a bookmark, they are considered originating from the site you are bookmarking and are blocked.  Not sure if there's some setting to go back to the previous behavior other than allowing all pop-ups which isn't something I want to do.

Tangentially related, I am tired of the trend with  browsers becoming gigantic, bloated memory hogs while taking away useful features and options that limit how people access the Internet.