Extracting Images from Google Sheets with Sheets Image Exporter

Original here: How to Export Images from Google Sheets with Sheets Image Exporter

Google Sheets is a powerful tool for managing data, but unlike Microsoft Excel, it lacks a native feature for exporting images embedded in spreadsheets. Whether you’re working with product photos, visual assets, or other images, there’s no built-in way to extract them without manual effort, which can be time-consuming. The Sheets Image Exporter Chrome extension fills this gap, enabling users to export images from Google Sheets efficiently. This article explores how Sheets Image Exporter works, its practical applications, and key considerations for its use.

What Sheets Image Exporter Does

Sheets Image Exporter is a Chrome extension designed to extract images embedded in Google Sheets, a functionality not available natively in the platform. It enables the export of all images from a spreadsheet in a single operation, saving them as PNG or JPEG files. Users can choose to store the images on Google Drive or download them directly to their device. Additionally, file names can be customized based on cell values or sequential numbering for better organization.

The Core Innovation: Image Detection Mechanism

One of the biggest challenges in developing the Sheets Image Exporter was reliably identifying images embedded in Google Sheets, particularly distinguishing between selected and unselected images. Initially, I explored using the Google Sheets API, hoping to leverage methods like getUrl() from the OverGridImage class to retrieve image data. However, this approach quickly proved problematic.

The Problem with Google Sheets API

The Google Sheets API, while powerful for many tasks, has significant limitations when it comes to handling images. The OverGridImage class, which represents images floating over the grid in a spreadsheet, does not provide a robust way to differentiate one image from another or to determine whether an image is selected by the user. The getUrl() method, which was intended to retrieve the URL of an image, was inconsistent even in its early days. More recently, Google deprecated this method entirely, rendering it unusable.

As documented in the Google Apps Script Reference for OverGridImage, the getUrl() method is marked as deprecated with the following note:

Deprecated. For most newly inserted images, the source URL is unavailable.

This deprecation left a gap in the ability to programmatically access image data directly through the API, forcing a rethink of the approach.

A DOM-Based Solution

Faced with these limitations, I turned to the browser’s Document Object Model (DOM) for a solution. The idea was to bypass the Google Sheets API entirely and instead identify images directly in the webpage’s DOM structure. By inspecting the Google Sheets interface, I conducted experiments that revealed images embedded in the spreadsheet are represented as <img> elements with src attributes starting with blob:https://docs.google.com/ or filesystem:https://docs.google.com/. This discovery was pivotal, as it allowed the extension to detect images by querying the DOM rather than relying on the unreliable API.

To make this approach user-friendly and flexible, I implemented a CSS selector-based mechanism to locate images. The extension uses a default selector to identify images that the user has selected (highlighted) with the mouse, leveraging a specific CSS property in the Google Sheets interface. Specifically, selected images are contained within elements that have a style attribute including cursor: -webkit-grab. This led to the default selector defined in popupImages.js:

const defaultSelector = 'div.waffle-borderless-embedded-object-overlay[style*="cursor: -webkit-grab"]';

This selector targets <div> elements with the class waffle-borderless-embedded-object-overlay that have the cursor: -webkit-grab style, which corresponds to images actively selected by the user in the Google Sheets interface.

Flexibility with Custom Selectors

Recognizing that users might want to customize how images are detected, I added the ability to input a custom CSS selector through the extension’s popup interface. This allows advanced users to target specific elements in the DOM if needed. For example, to retrieve all images (including unselected ones), a user could use a selector like div.waffle-borderless-embedded-object-overlay[style*="cursor: default"], which targets images that are not actively selected.

The logic for handling selectors, including falling back to the default if a custom selector is invalid, is implemented in content.js:

try {
    selectedImageContainers = document.querySelectorAll(selector);
    console.log(`Found ${selectedImageContainers.length} containers with selector: ${selector}`);
} catch (e) {
    console.warn(`Invalid selector: ${selector}, falling back to default: ${defaultSelector}`);
    selector = defaultSelector;
    selectedImageContainers = document.querySelectorAll(defaultSelector);
    console.log(`Found ${selectedImageContainers.length} containers with default selector`);
}

This code ensures that if a user-provided selector is invalid, the extension gracefully reverts to the default selector, maintaining functionality while providing feedback via the console.

Processing Images in the DOM

Once the images are identified, the extension processes them by fetching their blob URLs and converting them to data URLs for further use (e.g., saving to Google Drive or downloading locally). This is handled in content.js with the following logic:

const img = container.querySelector('img[src^="blob:https://docs.google.com/"], img[src^="filesystem:https://docs.google.com/"]');
if (img) {
    processImage(img, index, () => {
        completed++;
        if (completed === selectedImageContainers.length) {
            const filteredDataUrls = dataUrls.filter(url => url !== null);
            console.log(`Sending ${filteredDataUrls.length} unique images.`);
            sendResponse({ images: filteredDataUrls, selectorUsed: selector });
        }
    });
}

This snippet demonstrates how the extension identifies <img> elements with blob or filesystem URLs, processes them into data URLs, and sends the results back to the popup script for display or export.

Why This Matters

The DOM-based image detection mechanism is the heart of the Sheets Image Exporter. By moving away from the Google Sheets API and leveraging the browser’s DOM, the extension overcomes the limitations of the deprecated getUrl() method and provides a reliable way to identify and extract images. The default selector ensures ease of use for most users, while the custom selector option adds flexibility for advanced scenarios. This approach not only solves the technical challenge but also enhances the user experience by making image extraction intuitive and robust.

Practical Applications

The extension is useful across various scenarios:

• E-commerce: Extract product images from inventory spreadsheets for use on websites or marketplaces.
• Education: Retrieve visual assets from teaching materials or student projects for reports or digital portfolios.
• Project Management: Export images, such as logos or screenshots, from project tracking sheets for inclusion in reports or presentations.
• Marketing: Access campaign visuals, like social media graphics or banners, directly from a spreadsheet.

These use cases illustrate how the extension addresses a critical need for users managing visual data in Google Sheets.

Key Features

Sheets Image Exporter provides several practical features:

• Batch Export: Extracts all images from a spreadsheet in one operation, addressing the absence of native export functionality.
• Output Formats: Saves images as PNG or JPEG, based on user preference.
• File Naming Options: Allows naming files using cell values or sequential numbers for organized output.
• Google Drive Integration: Enables saving images directly to Google Drive, keeping them accessible within the Google ecosystem.
• Local downloading: Download of all selected images to your device in a single ZIP archive.

The extension operates through the Chrome browser and has a straightforward interface, requiring minimal setup.

Considerations for Use

When using Sheets Image Exporter, a few factors should be kept in mind:

• Image Quality: The extension preserves the original resolution of images, so the quality of exported files depends on the quality of images uploaded to the spreadsheet.
• Google API Limits: For spreadsheets with many images, exporting may need to be done in batches to stay within Google’s API quotas.
• Image Types: The extension extracts images placed over cells but does not support exporting charts or drawings created within Google Sheets.

Conclusion

Sheets Image Exporter provides a critical capability that Google Sheets lacks: the ability to export images embedded in spreadsheets, a feature readily available in Microsoft Excel. For users managing visual data—whether for business, education, or personal projects—this Chrome extension offers a practical solution to a significant limitation. It is available through the Chrome Web Store and can be integrated into any Google Sheets workflow accessed via Chrome.