sttf-url-generator — A Chrome/Edge Extension

In the past few days, I created a small Chrome/Edge extension, sttf-url-generator, and published it to both Chrome web store and Edge Add-ons. What this extension does is merely the user sharing use case that is described in the text fragment spec.

With text fragments, browsers may implement an option to ‘Copy URL to here’ when the user opens the context menu on a text selection. The browser can then generate a URL with the text selection appropriately specified, and the recipient of the URL will have the specified text conveniently indicated.

The idea of creating this extension was originated from an internal discussion with my colleagues. As customer engineers, we need to share document links with customers quite often. Quoting the text from the document directly in the email could make the email awfully long, while just sending a link may not help customers quickly locate the information in a long document. We need a better way to share the information so that the customer can get it quickly and accurately.

Text fragment is a perfect solution for this case. It is a new feature supported by browsers natively, and it is available in the latest version of Chrome and Edge. We just need a way to easily generate a url with the text fragment. Browsers might provide such a feature in the future, but before that I hope this extension can help to address the needs.

The implementation of the extension is quite simple and easy, just several lines of javascript. I don’t use any framework or libraries, and purely rely on the DOM when I need to deal with HTML elements. Node and webpack are used simply because I’d like to use eslint to sanitize the code and babel to minimize the js files.

The more interesting part is about packaging and submitting it to Chrome and Edge. To meet the requirements of these stores, I have to consider the permissions required by the extension carefully, create the images and assets, setup a home page with GitHub Pages, and even write a privacy policy by myself. These tasks took more time than the coding itself, but it’s a good experience of bringing an idea to production. I learned a lot from it.

The extension currently consists of 3 functions: copy the generated url, open the generated url in a new tab, and copy the text fragment and the generated url in the markdown format. I think these 3 features are more than enough for a single purpose extension.

Hope you enjoy it.