Is it possible to Export Images from Google Sheets?
Have you ever wondered how to download images from Google Sheets to your computer? Or at least upload them to Google Drive. I have. There is no such option. Yes, imagine, Excel has it, but here it doesn’t. So, since I write a lot of Google Apps scripts, I thought: «I’ll write another one that will close this gap.» In the end, I made an extension for Chrome, Sheets Image Exporter.
By the way, I was once puzzled by the lack of the ability to mass delete events in Google Calendar. Seriously, you still have to click on Delete one by one. But what if you have a bunch of events? Perhaps you are an event agency or simply schedule shifts, vacations or classes. So, I then wrote an add-on, Good Events Planner, which made up for this shortcoming.
However, I am not talking about it.
Easily save and export images from Google Sheets with Sheets Image Exporter. This Chrome extension simplifies image management by allowing you to save images to Google Drive or download them locally.
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 <div> 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
- Mouse-Based Image Selection: Select one or multiple images in Google Sheets using mouse clicks (hold Ctrl or Shift for multi-selection).
- Delete Images: Remove selected images from Sheets with the Delete key after saving.
- Customizable Image Quality: Choose PNG or JPEG format and adjust compression for local downloads.
- Save to Google Drive: Upload images to a specified Google Drive folder.
- Local Download: Download images as a ZIP archive in your preferred format.
- Custom CSS Selector: Use a custom or optimized default CSS selector for image selection.
- User-Friendly Interface: Preview and select images with checkboxes.
- Secure Authentication: Uses Google OAuth 2.0 for safe access to Google Drive.
How to Export Images from Google Sheets
- Open Google Sheets with images.
- Select images using Ctrl/Shift for multiple selections.
- Click the extension icon.
- Enter a Google Drive Folder ID (from
https://drive.google.com/drive/folders/FOLDER_ID) or leave blank for local download. - (Optional) Adjust the CSS selector or use the default. For example, if you replace «cursor: -webkit-grab» in the selector with «cursor: default», all images will be selected, not just the selected ones.
- Select images from the list and click «Save to Drive» or «Download Locally.»
- (Optional) Delete selected images with the Delete key.
Permissions
- Access to Google Sheets to extract images.
- Access to Google Drive to save images.
- Google authentication for secure file uploads.
Privacy and Security
We respect your privacy. This extension:
- Collects only necessary data (Folder ID, CSS selector, temporary OAuth token, images).
- Does not share data with third parties.
- Complies with Google API User Data Policy.
- Stores settings securely in Chrome storage and removes OAuth tokens after use.
See Privacy Policy for Sheets Image Exporter for details.
Support
Contact us at mypostmail77@gmail.com for assistance.
Simplify image management in Google Sheets with seamless Google Drive integration and local export!
Note: Requires a Google account with access to Google Sheets and Google Drive (for Drive saving).
Update
Today, I finally threw everything necessary for publishing this extension in the Google Chrome Store, I am waiting for review and approval.
As soon as it is approved, I will immediately post a link to the extension here.
Update 2
Approved, here is the link: Sheets Image Exporter, try it.
0 комментариев