Looking for Solutions to Connect a Chrome Extension with a Tauri System Tray App.

[molten nacelle]

My Tauri app runs in the system tray, and I want to make it possible to display its window by clicking a button in a Chrome extension. Additionally, I want to enable communication between the app and the extension, allowing the app to send commands to the extension and receive data from it.

I considered using WebSockets for this purpose, but as far as I know, SvelteKit doesn't have native support for WebSockets, and implementing it separately doesn't seem trivial or efficient. Both the app and the extension are built with SvelteKit.

I'm also using SurrealDB as the database, which does support WebSockets, but I haven't figured out if it's possible to leverage this for the communication between the extension and the app.

Do you have any suggestions on how I could implement this functionality?

[proper hollow]

There are several approaches you could consider:

1. Native Messaging

// In your Chrome extension manifest.json
{
  "permissions": ["nativeMessaging"],
  "native_messaging_hosts": ["com.your.app"]
}

// In your Chrome extension
chrome.runtime.sendNativeMessage('com.your.app',
  { message: "hello" },
  function(response) {
    console.log("Response:", response);
  }
);

// In your Tauri app
use tauri::Manager;

#[tauri::command]
async fn handle_native_message(message: String, app_handle: tauri::AppHandle) {
    // Process message from extension
    // Show window if needed
    app_handle.get_window("main").unwrap().show().unwrap();
}

2. WebSocket Server in Tauri

// In your Tauri app
use tokio::net::TcpListener;
use tokio_tungstenite::accept_async;

#[tauri::command]
async fn start_websocket_server() {
    let listener = TcpListener::bind("127.0.0.1:8080").await.unwrap();
    
    while let Ok((stream, _)) = listener.accept().await {
        let ws_stream = accept_async(stream).await.unwrap();
        // Handle WebSocket connection
    }
}

// In your Chrome extension
const ws = new WebSocket('ws://localhost:8080');
ws.onmessage = (event) => {
    console.log('Received:', event.data);
};

3. Local Storage with Polling

// In your Chrome extension
chrome.storage.local.set({ 'command': 'show_window' });

// In your Tauri app
use tauri::Manager;

#[tauri::command]
async fn check_commands(app_handle: tauri::AppHandle) {
    // Implement polling mechanism to check local storage
    // React to commands
}

4. HTTP Server in Tauri

// In your Tauri app
use warp::Filter;

#[tauri::command]
async fn start_http_server(app_handle: tauri::AppHandle) {
    let routes = warp::post()
        .and(warp::body::json())
        .map(move |command: serde_json::Value| {
            // Handle command
            // Show window if needed
            "OK"
        });

    warp::serve(routes)
        .run(([127, 0, 0, 1], 3030))
        .await;
}

// In your Chrome extension
fetch('http://localhost:3030', {
    method: 'POST',
    body: JSON.stringify({ command: 'show_window' })
});

5. Custom Protocol Handler

// In your Chrome extension manifest.json
{
  "permissions": ["protocol_handler"]
}

// In your Chrome extension
navigator.registerProtocolHandler(
  "web+yourapp",
  "chrome-extension://your-extension-id/handler.html?cmd=%s",
  "Your App"
);

// In your Tauri app
tauri::Builder::default()
    .setup(|app| {
        app.register_uri_scheme_protocol("yourapp", |request| {
            // Handle protocol requests
        });
        Ok(())
    })