'Clip To Discourse' Chrome Extension

Plugin Extras
,
1

Dear Discourse Community, here’s my little :wrapped_gift: Christmas present :christmas_tree: to you all. It’s simple but useful, and was built purely because I wanted it.

Inspired by Simon Willison’s great blog about using LLMs for development, I vibe-coded this over Christmas, in between social events, watching movies, and wrapping presents! I wrote none of the code, but I have reviewed code and supervised the LLM. Everything was driven from spec.md and roadmap.md.

What is it for?

I use a self-hosted, personal Discourse as a Notebook, Journal, Blog, CV, Wiki, AI tool and developer knowledgebase. Frequently I find myself wanting to ‘clip’ content from the web (page title + URL) anbd drop it directly into my Discourse, from where I can incorporate it in a Note or a Journal entry.

My needs are simple so this is fairly bare-bones, it just posts Page Title and URL, although I would like in the future to add ‘Include page excerpt’ and ‘Clip entire page’ as options.

Privacy

Features

  • Clips page title and URL. Optional ‘page excerpt’ or ‘full page text’ are mplemented but it’s a bit unsophisticated (however your Discourse AI could summarise it for you later on your Discourse instance?..)
  • Create new Topics with each clip, or append clips as replies to an existing Topic.
  • Supports multiple profiles, allowing you to store multiple API keys, destination Discourses, and default settings - for different use-cases.
  • Clip To Discourse icon will automatically change to reflect the Currently selected Profile’s site Favicon, so you can easily tell where you’re clipping to!

Limitations

  • The main limitation is that an Admin needs to create a user-scoped API key for you, on the Discourse instance you are clipping to. For me this isn’t a problem as I am the primary Admin on all the Discourses I intend to use this for.

  • Clearly if Clip To Discourse capability was enabled for too many users, it could produce a lot of low-quality posting, on a shared or public Discourse instance. So I primarily aim this Extension towards those of you who are, like me, using Discourse as a personal notebook.

How To Install

  • Install to any Chromium-based browser (Chrome, Edge, Brave, etc) via the link to Chrome Web Store https://chromewebstore.google.com/detail/clip-to-discourse/copdhiejkkdblhdcdjapcoalldkondhi

  • (Optional but recommended) ‘Pin’ the extension to the browser’s toolbar.

  • Create a Single User API key with the following Granular scopes: Topics: read (used for the connection test only), write, and update

  • Determine which Category you want Clips to go into. If you want each clip to be a new Topic, then you only need the CategoryID. When viewing the Category, this ID is in the URL like this: https://discourse.yourdomain.com/c/CategoryName/CategoryID)

  • You can also set a Topic to reply to, and all Clips will be appended as new replies to this Topic. To get the Topic ID you also get it from the URL: When viewing the Topic, this ID is in the URL like this: https://discourse.yourdomain.com/t/TopicTitle/TopicID)

  • Click on the extension icon to get the popup, and go to Settings to configure the API key and set your defaults. Note that you can have multiple ‘profiles’ for various different Discourses that you might want to use.

  • Save settings and (optionally) test the connection, which will read one topic to ensure the API connection works.

  • Close Settings and clip stuff to test!

Images

Clipping Settings
Clipping Settings1366×2446 191 KB

Demo Clip to New Topic
Demo Clip to New Topic1920×1306 616 KB

Demo Clipped Topic
Demo Clipped Topic2162×1353 216 KB

Demo Clipped as a Reply
Demo Clipped as a Reply2162×1764 226 KB

Roadmap

  • ‘Include page excerpt’ and ‘Clip entire page’ might need a bit of testing and refinement. Alternatively this feature could allow the user to select the area of text to be clipped as the excerpt.

  • I’m not planning on a Firefox or Safari extension (as I don’t use those browsers) but would happy for someone to take on the task of porting this extension over. Could collaborate to keep it all in one repo and keep feature parity.

  • May consider implementing the Discourse User API flow, so that API keys don’t have to be created by Admins, however the User API works via an OAuth flow so wouldn’t be a drop-in alternative.

Related discussions

Request for basically this tool: Chrome/Firefox extension "Share to discourse" - #28 by supermathie

A related post, suggesting additional features when clipping a Discourse: Need Web Clipper for Discourse Post

Social Share is a related concept, but uses simple URLs Social Share

Feedback, Ideas, and Contributing

This topic is a pretty good place to put any feedback you have. I am open to ideas for improvements as long as they don’t overcomplicate the extension and/or make it less useful for me!

If you want to open issues or make PRs, the GitHub repo is here:

This extension is a free, open-source, and privacy-first tool, created for the Discourse community by my company Koloki.co

12 Likes
Chrome/Firefox extension "Share to discourse"
2

Well done on this extension :clap:

1 Like
3

This could be my use case as well. Ideally, when clipping to a new topic, it would use the featured link, I make heavy use of this (ignore the custom layout):

image
image1075×261 12.4 KB

I’d also be happy if clipping would import the currently selected text on the page, I’m not sure if this is possible.

I’d imagine this: I’m on a page with an interesting text. I select the text, I clip to a new topic, and it:

  • Put the page link as a featured link
  • Set the title as the clipped page title
  • Set the selected HTML content as the post body

Edit: for the first two steps, david’s excellent solution works very well. It requires me to manually post the topic, but for my use I think it’s ok :thinking:

1 Like
4

I had the same idea a long time ago, but only finally managed to set it up a week ago.

Separately from Discourse, the method I have personally used for a long time is the SingleFile browser extension. It saves the site you are currently viewing as a single HTML file, preserving it as closely as possible to what you see, so that you can read it offline. There are countless HTML files sleeping in my ~/Downloads folder.

Because information on the internet does not stay there forever, the most reliable way is to save what you currently see on your own computer exactly as it is.

I already have many HTML files saved, and many more will be added in the future, so I have been thinking about a feature that would let me bring these files into Discourse to view and manage them there.

If you are planning to add a feature to “scrap” or clip website content, it will end up overlapping quite a lot with what the SingleFile extension already does well.

It would be great if there were a way to integrate with SingleFile directly or to import HTML files.

2 Likes
5

Thanks for sharing the SingleFile extension - that’s a great tool and one I probably wouldn’t try to replicate or overlap with too much. I also have the same use-case - wanting to simply preserve a working version of the page in a single HTML file, so I have just installed SingleFile as well. I didn’t know about this great extension!

Once you have ‘Clipped To Discourse’ you could also upload that HTML file as an attachment to the Post. This is how I would probably use it, as an alternative to archive.org.

For future versions of Clip To Discourse I think I’ll focus on:

  • User-selected text range to be clipped as the Excerpt
  • Improved Markdown formatting of that Excerpt content