Art Institute of Chicago Browser Extension

A browser extension that presents a random work of art from the Art Institute of Chicago's collection with each new tab.

In September 2019, the Art Institute of Chicago (AIC) launched its data API for public use. The API provides information and access to over 100,000 artworks.

Using the data API and IIIF's image API, AIC's browser extension presents an artwork from the museum's collection in your browser every time a new tab is opened. The extension focuses on selecting from over 50,000 works marked for public domain use.

For public use, this extension is available in the Chrome Web Store. If you'd like to install the plugin for local development, follow the instructions below.

This repo serves as an example of using the Art Institute of Chicago's data API.

Screenshot of the extension in action

Features

Presents artwork from the Art Institute's collection in new browser tab
Demonstrates use of the Art Institute's data API

Requirements

Chrome browser in Developer Mode

Installing

Clone or download the project:

git clone https://github.com/art-institute-of-chicago/browser-extension.git
cd browser-extension

If you downloaded a zip file from GitHub, unzip the package
From Chrome menu choose Window - Extensions
Toggle on "Developer Mode"
Click "Load Unpacked"
Select the browser-extension folder you cloned
Optionally toggle "Developer Mode" off

Screenshot of Chrome Windows menu with Extensions highlighted

Screenshot of the Extensions window

Configuration

In script.js, you'll find the query that fetches a random artwork:

let timeStamp = Math.floor(Date.now() / 1000);
    let artworkRequest = {
        "resources": "artworks",
        "fields": [
            "id",
            "title",
            "artist_title",
            "image_id",
            "date_display",
        "thumbnail"
        ],
        "boost": false,
        "limit": 1,
        "query": {
            "function_score": {
                "query": {
                    "bool": {
                            "must": [
                                {
                                    "term": {
                                        "is_public_domain": true
                                    },
                                },
                                {
                                    "exists": {
                                        "field": "image_id",
                                    },
                                },
                            ],
                        },
                    }
                },
                "boost_mode": "replace",
                "random_score": {
                    "field": "id",
                    "seed": timeStamp
                }
            }
        }
    };

Contributing

We encourage your contributions. Please fork this repository and make your changes in a separate branch. To better understand how we organize our code, please review our version control guidelines.

# Clone the repo to your computer
git clone git@github.com:your-github-account/browser-extension.git

# Enter the folder that was created by the clone
cd browser-extension

# Install dependencies (we use Yarn)
yarn install --frozen-lockfile

# Start a feature branch
git checkout -b feature/good-short-description

# ... make some changes, commit your code

# Push your branch to GitHub
git push origin feature/good-short-description

On github.com, create a Pull Request to merge your changes into our develop branch.

This project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.

We welcome bug reports and questions under GitHub's Issues. For other concerns, you can reach our engineering team at engineering@artic.edu

Code Formatting

We use Prettier to perform standard formatting across all the JS, CSS, HTML, and Markdown files in the project. If you've installed the project dependencies correctly with Yarn, a pre-commit hook that formats all your staged files should automatically execute when you run git commit.

Alternatively, you could manually run Prettier like so:

yarn prettier --write "$(pwd)/**/*.(js|css|html|md)

Acknowledgements

AIC's browser extension was conceived in the Experience Design department during the 2018 internship program, Diversifying Art Museum Leadership Initiative (DAMLI). Thanks to our intern, Abdur Khan, for helping make this project possible.

Additional thanks to Mark Dascoli, Illya Moskvin, Tina Shah, Kirsten Southwell, and nikhil trivedi, for helping complete version 1 of the browser extension.

Inspiration for this project came from the following browser extension projects:

The following tutorial helped us get started: How to Create and Publish a Chrome Extension in 20 minutes from freeCodeCamp.org

Licensing

This project is licensed under the GNU Affero General Public License Version 3.