Clip To Discourse Chrome Extension - now with User API capability!

Customization 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 and drop it directly into my Discourse, from where I can incorporate it in a Note or a Journal entry.

Clip To Discourse now supports four clipping styles: Page Title + URL, Title + URL + Excerpt, Full Page Text, and selected text.

Privacy

Features

  • Clip a page as Title + URL, Title + URL + Excerpt, Full Page Text, or Text Selection.
  • Create new Topics with each clip, or append clips as replies to an existing Topic.
  • Authorize through the Discourse User API without needing an administrator to create an API key. An administrator-provided, user-scoped API key remains available as a fallback.
  • Supports multiple profiles for different Discourse instances, users, credentials, templates, and defaults. Profiles can be renamed, duplicated, or deleted.
  • Choose a destination category from the categories available to the connected account.
  • Customize title and body templates using page metadata, excerpts, full text, selected text, and date placeholders.
  • Choose System, Light, or Dark appearance.
  • Optionally change the Clip To Discourse toolbar icon to the selected profile’s site favicon, so you can easily tell where you’re clipping to.
  • Open the popup using Ctrl+Shift+K (Command+Shift+K on macOS), configurable at chrome://extensions/shortcuts.

Limitations

  • The Discourse site must enable User API keys and permit your account’s group to authorize them. If User API authorization is unavailable, a site administrator can provide a single-user API key with granular permissions.
  • 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 in Chrome or another compatible Chromium-based browser, version 127 or later, via the Chrome Web Store: https://chromewebstore.google.com/detail/clip-to-discourse/copdhiejkkdblhdcdjapcoalldkondhi
  • Optionally ‘Pin’ the extension to the browser’s toolbar.
  • Click the extension icon, open Settings, and enter your Discourse Base URL.
  • Select User API and click Authorize Clip To Discourse. Sign in to your Discourse account, enter the displayed device code if requested, and approve access.
  • If User API authorization is unavailable, use the Admin API Key tab with an administrator-provided, single-user API key. Avoid global API keys.
  • Choose your default clip style, destination, category or existing Topic ID, and optionally customize the templates.
  • Save settings and optionally test the connection.
  • Close Settings and clip stuff to test!

Authorising Clip To Discourse

userauth-01-authorizing-the-user-api
userauth-01-authorizing-the-user-api942×500 61.3 KB

userauth-02-enter-this-code-in-discourse
userauth-02-enter-this-code-in-discourse1212×619 66.9 KB

userauth-03-authorize-the-extension-koloki-demo-discourse
userauth-03-authorize-the-extension-koloki-demo-discourse1165×744 49.5 KB

userauth-04-authorization-complete
userauth-04-authorization-complete1120×630 15.4 KB

Clipping to Discourse

clipping-01-clip-to-discourse-popup
clipping-01-clip-to-discourse-popup1516×840 124 KB

clipping-02-the-clipped-page-koloki-demo-discourse
clipping-02-the-clipped-page-koloki-demo-discourse1380×977 142 KB

Roadmap

  • I’m not planning on a Firefox or Safari extension (as I don’t use those browsers), but would be happy for someone to take on the task of porting this extension. We could collaborate to keep it all in one repo and maintain feature parity.
  • Possible future additions include tags, additional keyboard shortcuts, and further clipping workflow refinements.

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

13 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
6

Some small updates to Clip To Discourse in version 0.19.2

  • Improved ‘Full Page’ clipping (uses Mozilla Readability to clip page text more accurately and readably).
  • Instituted a 50,000 character limit on text in posts (Discourse topic body cannot be larger than 50k chars or it returns errors)

Source: GitHub - koloki-co/clip-to-discourse-chromium-extension: A Chromium Browser extension which clips web content to your private Discourse. · GitHub
Chrome Web Store: https://chromewebstore.google.com/detail/copdhiejkkdblhdcdjapcoalldkondhi?utm_source=item-share-cb

1 Like
7

Update: v0.19.5 - Text Selection Support

Just released a new version of Clip To Discourse

What’s New

  • Automatic selection detection: When you have text selected on a page, the extension now detects it automatically and shows you exactly what will be clipped (character and word count)
  • New “Text Selection” clip style: Joins the existing Title+URL, Excerpt, and Full Text options as a 4th clip style
  • Smart auto-selection: When text is selected, the extension automatically switches to “Text Selection” mode so you know exactly what you’re clipping
  • Right-click context menu: Added a simple “Clip to Discourse” context menu item that opens the popup (works with or without selection)
  • Customizable template: The text selection template can be customized in settings, just like the other clip styles

This makes it super quick to highlight a quote or passage and clip it directly to your Discourse with proper context (page title + URL + your selected text).

Coming Soon

Currently working on implementing the Discourse User API flow, which will allow users to authorize the extension via OAuth without needing an Admin to create API keys. This will make the extension much easier to use on shared or public Discourse instances!

1 Like
8

A significant usability update: Clip To Discourse now supports the Discourse User API.

This means ordinary Discourse users no longer need an administrator to manually create an API key for them. Enter your Discourse URL, click Authorize Clip To Discourse, sign in, enter the displayed device code if requested, and approve access.

The site still needs User API keys to be enabled site-wide (enabled scopes: read and write, and a Group your user is a member of must be permitted to use the User API, but once that is configured the onboarding experience is dramatically simpler for non-admin users.

Administrator-provided, user-scoped API keys remain available as a fallback for sites where User API authorisation is unavailable.

Clip To Discourse on the Chrome Web Store