CC Open Source Blog

CC Search Extension: Wrapping up GSoC 2020

gravatar

by Mayank Nader on 2020-08-27

This blog is part of the series: GSoC 2020: CC Search Browser Extension

In this post, I'll give an overview of the improvements and features that were added to the CC Search browser extension. I am delighted to state that the goals that were set for Google Summer of Code 2020 have been successfully completed.

Widen the integration with CC Catalog API

Both CC Search and CC Search Extension are powered by CC Catalog REST API. The API allows programmatic access to search for CC-licensed and public domain digital media. Better integration with the API was one of the major targets during this internship because it significantly improves and adds new searching workflows to the extension.

This can be sub-divided into New Filters, Browse By Sources, search by tags, and related images.

New Filters

The /image endpoint of the API is used for searching. We can also provide several query parameters that can filter the result. Previously, the extension only supported filtering the content using license, sources, and use case. Now, besides these filters, the extension also supports filtering by image type, file type, aspect ratio, and image size.

Filters in the old version

Filters in the new version

Rationale: This will allow users to be more precise in their queries when searching.

Browsing by source

The extension now has a dynamically updated "sources" section. Clicking a source link triggers a request to the /image endpoint to get the images associated with it.

Source section

Source section in dark mode

Rationale: This opens an avenue for exploration of all the different sources which are available in the catalog. This is advantageous for the users who are not familiar with the type of content a particular source provides. They might run into a source that has a huge catalog of high-quality images that they are looking for.

Search by tags

Most of the images have some tags associated with them, which are also sent along with the image data by the API. This, and the flexibility of the /image endpoint, paved the way for the addition of searching for images using image-tags.

Search by image tag

Rational - Image tags will allow users to incrementally make their queries better and more specific.

In the image detail section of any particular image, you can now see several recommendations. This has been made possible by adding support for the /recommendations/images/{identifier} endpoint of the API.

Image recommendations

Rationale - This will help users find a variety of images that fit their requirements and also explore the images that would not usually show up on the initial pages of the search result.

Improvements to bookmarks section

The bookmark section has great prominence in CC Search Extension because the export/import workflow is tied to it and unlike the search result data, the bookmarks data is preserved across user sessions (closing the extension does not wipe out the bookmarks). It has undergone some crucial improvements like caching, voluntary loading and increase in the number bookmarks that it can hold (the limit now is 300 which earlier was ~50).

The bookmarks section is significantly faster now as caching has eliminated the need to make many simultaneous network requests to the API when bookmarks are loaded. Voluntary loading also helps reduce perceived lag by reducing the number of bookmarks that load at once.

Though the improvement in performance is better recognized when you are using the extension, I tried to demonstrate that by comparing the rendering of the bookmarked images.

Bookmark section in the old version

Bookmarks section in the new version

A better use of sync storage

The bookmarks and the user settings are synced between user systems. There are very tight write limits and bytes quotas associated with this storage(documentation link). Due to this, the way the extension used this storage, and the assumptions it made about its schema was improved multiple times. Since the extension was already in production, and had around 5,000 weekly users, the code for migrating the user's sync storage was pushed along with these updates. Also, the support was added for legacy bookmark files that some users might still be using.

Integration with Vocabulary

The extension now supports the latest version of CC vocabulary. The challenging part of this was to rethink, mold, and update each and every workflow of the extension according to the new design.

Old version — Image detail

New version — Image detail

Old version — Deleting bookmarks

New version — Deleting bookmarks

Old version — Dark mode

New version — Dark mode

Release on Microsoft Edge

I am also testing the extension on Microsoft Edge. We also have it listed on the Edge store. You can soon expect the latest version of CC Search Extension available for install there.

Code

The project repository is hosted on Github. During this period, I have made more than 320 commits.

The Major pull requests: #249, #255, #268, #270, #271, #272, #275, #276

Also, during this period, 5 updates of the extension were pushed to the extension stores. You can check out the releases page.

Acknowledgements

I would like to thank Alden and Kriti for their valuable guidance during this journey. Special thanks to Fransisco, for designing the mockups of the extension, and to the wonderful contributors of CC Vocabulary.