BlurShot API Documentation
Integration guide for developers building extensions and integrations with BlurShot's privacy-first screenshot editing capabilities.
Overview
BlurShot is designed as a privacy-first, client-side application. All image processing happens in the browser using HTML5 Canvas APIs. There is no backend API for processing images, as this would violate our core privacy principles.
However, BlurShot provides several integration points for browser extensions, automation tools, and other applications that want to leverage our client-side processing capabilities.
JavaScript Integration
🔧 Browser Extension Integration
BlurShot can be embedded in browser extensions to provide screenshot editing capabilities directly in your extension's popup or side panel.
Loading an Image Programmatically
// Open BlurShot and load an image from a data URL
const imageDataUrl = 'data:image/png;base64,...';
window.location.href = `https://blurshot.io/?image=${encodeURIComponent(imageDataUrl)}`;
// Or use postMessage for iframe integration
const iframe = document.querySelector('iframe');
iframe.contentWindow.postMessage({
type: 'LOAD_IMAGE',
imageDataUrl: imageDataUrl
}, 'https://blurshot.io');Loading from Edit History
// Load a previously saved edit by ID
window.location.href = `https://blurshot.io/?edit=12345`;
// The edit ID is returned when sharing an image
// and can be used to reconstruct the edited stateURL Parameters
| Parameter | Description | Example |
|---|---|---|
| image | Load an image from a data URL or public URL | ?image=data:image/png... |
| edit | Load a previously saved edit from history by ID | ?edit=12345 |
Local Storage API
BlurShot uses IndexedDB for storing edit history. Extensions and integrations can access this data to build features like "recently edited" lists or batch processing workflows.
Reading Edit History
// Access BlurShot's IndexedDB
const db = await window.indexedDB.open('BlurShotHistory', 1);
// Get all edit history
const transaction = db.transaction(['edits'], 'readonly');
const store = transaction.objectStore('edits');
const allEdits = await store.getAll();
// Each edit contains:
// {
// id: number,
// timestamp: number,
// imageDataUrl: string,
// imageName: string,
// editCount: number,
// thumbnail: string
// }Browser Extension Example
Chrome Extension Manifest
{
"manifest_version": 3,
"name": "Screenshot Editor Extension",
"version": "1.0",
"permissions": ["activeTab", "storage"],
"action": {
"default_popup": "popup.html"
},
"content_security_policy": {
"extension_pages": "script-src 'self'; object-src 'self'"
}
}Extension Background Script
// Capture screenshot and send to BlurShot
chrome.action.onClicked.addListener(async (tab) => {
// Capture visible tab
const screenshot = await chrome.tabs.captureVisibleTab(
null,
{ format: 'png' }
);
// Open BlurShot with the screenshot
const blurShotUrl = `https://blurshot.io/?image=${encodeURIComponent(screenshot)}`;
chrome.tabs.create({ url: blurShotUrl });
});Privacy Considerations
⚠️ Important Privacy Note
When integrating BlurShot, ensure you respect user privacy:
- Never send images to external servers without explicit user consent
- Keep all processing client-side whenever possible
- If using iframe integration, use sandbox attributes appropriately
- Respect users' edit history privacy - don't sync or upload without permission
Support & Questions
Have questions about integrating BlurShot into your application or browser extension? For additional development tools, check out FormatKit for file format validation and conversion utilities.
Contact Support