Chrome Extension Share Target API: Receive Shared Content from Other Apps

15 min read

Chrome Extension Share Target API: Receive Shared Content from Other Apps

Chrome Extension Share Target API: Receive Shared Content from Other Apps

The Chrome Extension Share Target API represents one of the most powerful yet underutilized features available to extension developers today. This API enables your Chrome extension to appear in the native share sheet on both desktop and mobile devices, allowing users to send content directly from any application to your extension with a single tap. Whether you want to create a bookmarking tool that saves articles from anywhere, a note-taking app that captures text snippets, or a productivity extension that organizes shared links, the Share Target API provides the foundation you need to build seamless integration with the broader ecosystem of apps on your users’ devices.

Understanding how to implement the Chrome extension share target functionality opens up tremendous possibilities for creating utility-focused extensions that solve real problems. Users today expect their applications to work together, and the Share Target API is the bridge that allows your extension to become a destination for content from hundreds of other apps. This comprehensive guide walks you through every aspect of implementing this API, from basic configuration to advanced handling of complex data types.


What is the Share Target API?

The Share Target API is a web platform feature that was first introduced for Progressive Web Apps (PWAs) and later extended to Chrome extensions. It allows websites and extensions to declare themselves as targets for shared content from other applications. When a user shares something from an app on their device, your extension appears in the list of available destinations alongside other apps, social platforms, and communication tools.

This capability fundamentally changes how users interact with your extension. Instead of requiring users to copy content, switch to their browser, find your extension, and paste the content, they can share directly to your extension in one fluid motion. This frictionless experience significantly increases engagement and makes your extension feel like a native part of the operating system.

The Chrome extension share API supports various types of content including plain text, URLs, HTML content, images in multiple formats, and files. Understanding which content types to support depends on your extension’s purpose. A reading list extension might focus on URLs and article text, while a photo organization extension would prioritize image support. You can configure your extension to accept one or multiple content types based on your use case.


How Share Target Works in Chrome Extensions

When you implement the Share Target API in your Chrome extension, the system performs a complex handoff process behind the scenes. The sharing app packages the content according to the Web Share Target specification, and Chrome acts as the intermediary that delivers this content to your extension. Your extension receives the shared data through its service worker, where you can process, store, or manipulate the content as needed.

The flow begins when a user selects your extension from the share menu. Chrome launches your extension’s background service worker if it is not already running and passes the shared data as parameters to the onShareTargetReceived event. Your service worker handler then processes this data and can trigger additional actions such as opening a popup, saving to storage, or sending a notification to confirm the share was received.

This event-driven architecture means your extension does not need to continuously run in the background waiting for shares. Chrome activates your service worker specifically when a share targeting your extension occurs, making the implementation efficient and resource-friendly. The service worker can then coordinate any necessary follow-up actions while conserving system resources when not in use.


Configuring manifest.json for Share Target

The foundation of implementing share to extension chrome functionality lies in properly configuring your extension’s manifest.json file. This configuration tells Chrome what types of content your extension can receive and how the sharing UI should present your extension to users. The manifest configuration is declarative, meaning you specify your intentions and Chrome handles the complexity of integrating with the operating system’s share functionality.

Your manifest.json must include the “share_target” key within the action or permissions section, depending on your extension type. This key contains an object that specifies the action URL where shared data will be sent and the types of content your extension accepts. The action URL typically points to a handler page in your extension that processes the incoming share.

The method property determines how the shared data is transmitted to your extension. Currently, “GET” and “POST” methods are supported, with POST being more common for handling larger amounts of data. When using GET, the shared data appears as URL query parameters. When using POST, the data arrives as form-encoded content that your handler can parse.

The enctype property specifies the MIME type of the incoming data. For text content, you would use “text/plain”, while URL handling typically uses “application/x-www-form-urlencoded”. If your extension needs to handle files, you would specify “multipart/form-data” and include a files array defining the accepted file types.

{
  "name": "My Share Extension",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_title": "Share to My App"
  },
  "share_target": {
    "action": "/handle-share.html",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "title": "title",
      "text": "text",
      "url": "url"
    }
  }
}

This basic configuration enables your extension to receive shared text, titles, and URLs. You can expand this configuration to handle images by adding an “images” array that specifies accepted image formats and dimensions.


Handling Shared Data in Your Extension

Once your manifest is configured, you need to create the handler that processes incoming shared content. The specific implementation depends on whether you are using the GET or POST method and what types of data you expect to receive. Understanding how to properly parse and validate this data is crucial for building a robust extension that handles sharing gracefully.

For GET method shares, the shared data arrives as URL query parameters attached to your handler URL. Your JavaScript code can parse these parameters using the URLSearchParams API. This approach is straightforward for simple text and URL sharing but becomes unwieldy for large amounts of content.

For POST method shares, typically used with “multipart/form-data” enctype, you need to handle form data parsing. In a service worker context, you would read the incoming request body and parse accordingly. Chrome provides utilities that make this process more manageable, allowing you to extract the shared title, text, URL, and any files that were shared.

// Example handler for share target in service worker
chrome.runtime.onShareTargetReceived.addListener(async (shareData) => {
  const { title, text, url, files } = shareData;
  
  // Process the shared data
  if (text) {
    await saveToStorage({ 
      type: 'text', 
      content: text, 
      timestamp: Date.now() 
    });
  }
  
  if (url) {
    await saveToStorage({ 
      type: 'url', 
      url: url, 
      title: title,
      timestamp: Date.now() 
    });
  }
  
  // Handle any shared files
  if (files && files.length > 0) {
    for (const file of files) {
      await processSharedFile(file);
    }
  }
  
  // Show notification or update UI
  chrome.notifications.create({
    type: 'basic',
    iconUrl: '/icons/icon48.png',
    title: 'Content Shared',
    message: 'Your content has been saved to My Extension'
  });
});

This handler demonstrates the core pattern for receive shared data extension functionality. You extract the relevant fields from the shareData object, process them according to your extension’s logic, and provide feedback to the user through notifications or UI updates.


Supporting Different Content Types

Creating a truly useful extension that leverages the Chrome extension share API often requires supporting multiple content types. Users share various kinds of content, and your extension should be prepared to handle each type gracefully. The most common content types include plain text, formatted text with HTML, URLs pointing to web pages, and various media files including images and videos.

Plain text sharing is the most straightforward to implement. When users select your extension from the share menu after copying text, your extension receives that text through the “text” parameter. You can save this text directly to storage, process it with natural language processing, or use it as input for other extension features.

URL sharing is particularly powerful for creating bookmarking or reading list extensions. The URL parameter provides the web address, while the optional “title” parameter often contains the page title that you can use for display purposes. Some apps also share a “description” or “text” field alongside the URL that contains excerpts or notes about the link.

Image sharing enables creative use cases such as screenshot organizers, photo backup tools, or visual bookmarking extensions. When handling images, you receive file objects that you can read as data URLs, ArrayBuffers, or Blob objects. You can then store these images locally, upload them to cloud storage, or process them with image manipulation functions.

File sharing extends beyond images to include documents, PDFs, and other file types. Your manifest configuration specifies which file types your extension accepts, and the handler receives these as file objects that you can process appropriately. This capability is particularly valuable for extensions that organize documents or manage file workflows.


Best Practices for Share Target Implementation

Implementing the Share Target API effectively requires attention to several best practices that ensure a smooth user experience and reliable functionality. These practices emerge from real-world usage patterns and common pitfalls that developers encounter when building share-enabled extensions.

First, always provide user feedback when a share is received. Users need confirmation that their content successfully reached your extension. This feedback can come through chrome notifications, badge updates on your extension icon, or by opening your extension’s popup to display the received content. Without feedback, users may repeatedly attempt to share content, thinking the operation failed.

Second, handle offline scenarios gracefully. Users might share content while offline, and your extension should queue this content for processing when connectivity returns. Use the chrome.storage API’s sync or local storage capabilities to persist shared content until it can be fully processed. This offline-first approach ensures no data is lost regardless of network conditions.

Third, validate and sanitize all incoming shared data. While Chrome handles the basic packaging of shared content, you should never trust the data without validation. Check that text content meets your length requirements, validate URLs before storing them, and verify that any files match expected types and sizes. This validation prevents storage bloat and potential security issues.

Fourth, consider implementing share menu customization for different content types. Users appreciate context-aware sharing, so if your extension handles both text and images, you might register multiple share targets that appear differently based on what is being shared. This specialization makes your extension more discoverable in relevant sharing contexts.


Testing Your Share Target Implementation

Testing share target functionality presents unique challenges because it requires interaction with the operating system’s native sharing capabilities. Chrome provides several testing approaches that help ensure your implementation works correctly across different scenarios and content types.

The primary testing method uses Chrome’s internal testing page at chrome://extensions/. Enable developer mode, then find your extension and use the “Test share target” link. This interface allows you to simulate shares by entering title, text, and URL values directly. It also supports file testing by letting you select files from your local system.

For more comprehensive testing, you should test on actual devices. The desktop share target functionality works best when you have multiple applications installed that support sharing. On Chrome for Android, you can test sharing from other apps to your extension, which provides the most realistic user experience testing. Similarly, testing on macOS or Windows with native sharing enabled apps gives you confidence in real-world scenarios.

Pay particular attention to testing edge cases. What happens when shared text is extremely long? How does your extension handle URLs with complex query parameters or special characters? What occurs when users share multiple files simultaneously? These edge cases often reveal implementation issues that basic testing misses.


Advanced Share Target Features

Once you master the basics of implementing the Chrome extension share API, several advanced features can significantly enhance your extension’s capabilities. These features enable more sophisticated interactions and provide a more professional user experience.

One advanced feature is handling shared URLs with previews. When a URL is shared, some apps include Open Graph metadata that describes the linked page. Your extension can fetch this metadata and create rich previews that help users understand what they are saving. This fetching happens in your handler code after receiving the URL, using standard fetch() calls to retrieve the page and parse its meta tags.

Another advanced capability is implementing share analytics. Understanding how users interact with your share target helps improve your extension. Track metrics such as which content types are most commonly shared, what times of day sharing occurs most frequently, and which sharing sources (different apps) send the most traffic. This data informs product decisions and helps prioritize feature development.

You can also implement sophisticated routing logic in your share handler. Based on the type or amount of content being shared, your handler can make decisions about how to process the content. For example, very long text might be automatically truncated, URLs might be checked against existing saved items to prevent duplicates, and images might be resized before storage.


Common Issues and Troubleshooting

Developers frequently encounter several common issues when implementing share target functionality. Understanding these issues and their solutions helps you debug problems more efficiently and create more robust implementations.

One common issue is the share target not appearing in the share menu. This problem usually stems from incorrect manifest configuration. Double-check that your share_target key is properly formatted, that the action URL exists and is accessible, and that you have declared all required permissions. Also verify that your extension is properly installed and enabled in developer mode.

Another frequent issue involves data not arriving at your handler. If your handler receives undefined or empty values, ensure that the parameter names in your manifest match what the sharing app sends. Different apps use different parameter names for similar data, so you may need to handle multiple possible names or accept a broader set of parameters than you initially expected.

File handling issues also commonly arise, particularly around file size limits and type validation. Chrome imposes limits on shared file sizes, and your extension should handle cases where files exceed these limits gracefully. Additionally, ensure your manifest’s files array correctly specifies the MIME types and extensions you accept.


Use Cases and Examples

The Share Target API enables numerous practical use cases that demonstrate its versatility. Examining real-world examples helps inspire your own implementation and shows how to translate the API into valuable features for your users.

A bookmark manager represents the most common use case. Users encounter interesting articles, videos, or resources throughout their daily browsing and want to save them for later. With share to extension chrome functionality, users can share directly to your extension from their mobile browser while reading, from desktop apps while working, or from any app that supports sharing. Your extension receives the URL and optional title, then stores them in an organized way that users can browse and access later.

Note-taking applications benefit enormously from share target implementation. Users often want to capture text snippets from various sources, whether quotes from articles, meeting notes from email, or ideas that occur while browsing. Your extension can receive this text and automatically create notes, optionally tagging or categorizing them based on content or source.

Task management integrations make excellent use of the share API as well. Users can share URLs, text, or images to your extension to create tasks or add items to project lists. The shared content becomes the task description or attachment, and your extension can parse the content to extract relevant information for task creation.

Content curation extensions use share target to build collections around specific topics. Users can share content related to their interests from any app, and your extension organizes this content into themed collections. This capability transforms your extension into a powerful research and curation tool that aggregates information from across the user’s digital life.


Conclusion

The Chrome Extension Share Target API provides a powerful bridge between your extension and the native sharing capabilities of users’ devices. By implementing this API, you transform your extension from a tool users must actively open and use into a destination that receives content from their daily workflow. This passive, event-driven integration dramatically increases engagement and makes your extension feel like a native part of the operating system.

The implementation journey begins with proper manifest configuration, progresses through handler development, and continues with thorough testing across devices and content types. Following the best practices outlined in this guide ensures your implementation is robust, performant, and user-friendly. As users increasingly expect applications to work together seamlessly, the Share Target API becomes an essential tool in any extension developer’s toolkit.

Whether you are building a bookmark manager, note-taking application, task management tool, or any extension that benefits from receiving external content, the Chrome extension share target functionality provides the foundation for creating truly integrated user experiences. Start implementing today and discover how this API can transform your extension’s value proposition and user engagement.

No previous article
No next article