Magic Feed Chrome Extension

Magic Feed is a customizable Material Design 3 Chrome extension for sharing the current page, composing a poster-style share card, copying a clean title-and-link pair, and opening selected text with search or custom targets.

Introduction

This extension is designed to enhance the social sharing experience by integrating directly into the Chrome browser. With just a couple of clicks, users can share interesting articles, blog posts, or any web page they are browsing. Additionally, users can open a link with selected text, making it easy to use the text in various contexts. The extension is highly customizable, allowing users to add, edit, and delete custom share targets.

Magic Feed lives in the browser's side panel. Clicking the toolbar icon toggles the panel, which then follows whichever tab is active — it loads once and stays loaded, so there is no per-open startup cost.

Share cards

The Share card tab composes the current page into a poster and exports it as a PNG you can copy or save. Thirteen styles are available, ported from the magic-feed Flutter app: Dark, Light, Frosted Glass, Neon Mecha, Cyberpunk, Heroic sci-fi, High fantasy, Infernal, Ancient realm, Arcane academy, Digital rain, Retro Desktop, and Platinum Desktop. Every card carries a QR code to the page and its own designed header for pages that have no cover image.

Cards render at a fixed 520px poster width and are scaled to fit the panel, so the exported PNG is identical no matter how wide the panel is.

Cover images and permissions

Reading a page's og:image from a third-party domain requires host access, so <all_urls> is declared as an optional permission and requested only when you press Allow in the card view. Without it, cards fall back to their built-in headers and everything else still works.

Installation

To install the Magic Feed Chrome extension, follow these steps:

1. Download the extension files from the GitHub repository:

   git clone https://github.com/ShinChven/crx-share.git
   

2. Open Chrome and navigate to chrome://extensions/.

3. Enable "Developer mode" by toggling the switch in the top-right corner.

4. Click on "Load unpacked" and select the repository's dist directory.

5. The Magic Feed extension should now appear in your list of installed extensions and is ready for use.

Development

The side panel and the options page are built with React and Vite.

npm install
npm run dev

Create the production Chrome extension bundle with:

npm run build

The complete unpacked extension is written to dist/.

CI and releases

Every push to main and every pull request runs the production build and uploads the unpacked dist/ directory as a workflow artifact.

To publish a GitHub Release, keep the versions in package.json and public/manifest.json identical, then push a matching version tag:

git tag v2.1.0
git push origin v2.1.0

The release workflow builds the extension, creates magic-feed-2.1.0.zip plus its SHA-256 checksum, and attaches both files to the GitHub Release. The same workflow can also be started manually from the Actions tab by entering a version.

Usage

After installation, the Magic Feed extension is simple to use:

1. Navigate to any web page you wish to share.

2. Click the Magic Feed toolbar icon to open the Material Design 3 share panel. Choose a destination, copy the title and link, or switch between light and dark themes.

3. Alternatively, right-click anywhere on the page to open the context menu.

4. Hover over the "Share this page" menu item to reveal the sharing options.

5. Select one of the following options to share the current page:

   • Share on X: Share the current page on X.
   • Share on Facebook: Share the current page on Facebook.
   • Share on Reddit: Share the current page on Reddit.
   • Share on LinkedIn: Share the current page on LinkedIn.
   • Share on WhatsApp or Email: Continue sharing through a messaging or email app.
   • Custom targets: Use destinations configured in Preferences.
   • Copy title and link: Copy the page title and URL to the clipboard.

6. If you choose to share on a social media platform, a new tab will open with the sharing dialogue pre-populated with the page title, description, and URL.

7. If you choose to copy the sharing text, the page title and URL will be copied to your clipboard and the extension will show a non-blocking confirmation.

Open Selected Text with

1. Select any text on a web page.

2. Right-click to open the context menu.

3. Hover over the "Open Selected Text with" menu item to reveal the options.

4. Select one of the following options to open a link with the selected text:

   • Google Search: Search the selected text on Google.
   • Custom Targets: Open a link with the selected text using your configured custom targets.

Side Panel

The side panel provides quick access to sharing options directly from the extension's icon in the Chrome toolbar. It has two tabs: Share, with a button for each supported platform plus a button to copy the page details to the clipboard, and Share card, the poster composer. The panel follows the active tab, so switching pages updates it in place.

To open the preferences page from the panel, click the gear icon (⚙️) in the panel header.

Preferences Page

The preferences page allows users to manage custom share targets. Users can add, edit, and delete custom targets with specific titles, templates, button colors, and text colors. These custom targets will appear in the context menu and side panel for easy access.

Code Files

public/background.js

This file handles the creation of context menu items for sharing the current page on various social media platforms. It also manages the execution of scripts to retrieve page details and open the appropriate sharing URLs, and sets the toolbar icon to toggle the side panel.

src/PanelApp.jsx

This React entry implements the side panel: sharing destinations, the share card composer, theme controls, clipboard feedback, and custom target shortcuts.

src/cards/

One module per poster style, plus the shared card primitives (hero image, QR callout, brand footer) and the style registry in index.jsx.

src/lib/

Live tab tracking, hero image loading, the seed-color scheme, QR generation, and the PNG export path.

src/OptionsApp.jsx

This React entry implements the Material Design 3 preferences page for managing custom share and selected-text targets.

Contributing

Contributions to the Magic Feed extension are welcome. Please feel free to fork the repository, make changes, and submit pull requests. You can also open issues if you find bugs or have feature requests.

License

This project is licensed under the MIT License - see the LICENSE file for details.