trying out to connect with just a phoenix simplified websocket client

tasty_chrome/manifest.json

···
   "permissions": [
     "activeTab",
     "storage",
-    "tabs"
+    "tabs",
+    "contextMenus"
   ],
   "host_permissions": [
-    "http://localhost:4000/*"
+    "http://localhost:4000/*",
+    "ws://localhost:4000/*"
   ],
   "background": {
     "service_worker": "background.js"

tasty_chrome/phoenix_simple.js

···
+/**
+ * Simplified Phoenix WebSocket Client
+ * A lightweight alternative to the full Phoenix.js client
+ */
+
+class PhoenixSocket {
+  constructor(endpoint, opts = {}) {
+    this.endpoint = endpoint;
+    this.params = opts.params || {};
+    this.timeout = opts.timeout || 10000;
+    this.heartbeatIntervalMs = opts.heartbeatIntervalMs || 30000;
+    this.socket = null;
+    this.channels = {};
+    this.messageCallbacks = [];
+    this.connected = false;
+    this.heartbeatTimer = null;
+    this.pendingHeartbeatRef = null;
+    this.ref = 0;
+
+    // Bind methods to maintain context
+    this.handleOpen = this.handleOpen.bind(this);
+    this.handleMessage = this.handleMessage.bind(this);
+    this.handleError = this.handleError.bind(this);
+    this.handleClose = this.handleClose.bind(this);
+  }
+
+  connect() {
+    if (this.socket) {
+      return;
+    }
+
+    const url = this.buildUrl();
+    this.socket = new WebSocket(url);
+
+    this.socket.onopen = this.handleOpen;
+    this.socket.onmessage = this.handleMessage;
+    this.socket.onerror = this.handleError;
+    this.socket.onclose = this.handleClose;
+  }
+
+  disconnect() {
+    if (this.socket) {
+      this.stopHeartbeat();
+      this.socket.close();
+      this.socket = null;
+      this.connected = false;
+    }
+  }
+
+  handleOpen() {
+    console.log(`Connected to ${this.endpoint}`);
+    this.connected = true;
+    this.startHeartbeat();
+  }
+
+  handleMessage(event) {
+    try {
+      const message = JSON.parse(event.data);
+      console.log('Received message:', message);
+
+      // Handle heartbeat responses
+      if (message.ref === this.pendingHeartbeatRef) {
+        this.pendingHeartbeatRef = null;
+        clearTimeout(this.heartbeatTimer);
+        this.startHeartbeat();
+        return;
+      }
+
+      // Handle channel messages
+      const { topic, event: eventName, payload, ref } = message;
+
+      // Check if this is a response to a channel join
+      if (eventName === 'phx_reply' && this.channels[topic]) {
+        if (payload.status === 'ok') {
+          this.channels[topic].joined = true;
+          if (this.channels[topic].onJoin) {
+            this.channels[topic].onJoin(payload);
+          }
+        } else if (payload.status === 'error') {
+          if (this.channels[topic].onError) {
+            this.channels[topic].onError(payload);
+          }
+        }
+      }
+
+      // Forward to channel callbacks
+      if (this.channels[topic] && this.channels[topic].callbacks[eventName]) {
+        this.channels[topic].callbacks[eventName].forEach(callback => {
+          callback(payload, ref);
+        });
+      }
+
+      // Forward to general message callbacks
+      this.messageCallbacks.forEach(callback => {
+        callback(message);
+      });
+    } catch (error) {
+      console.error('Error parsing message:', error);
+    }
+  }
+
+  handleError(error) {
+    console.error('WebSocket error:', error);
+    this.stopHeartbeat();
+  }
+
+  handleClose(event) {
+    console.log(`WebSocket closed: ${event.code} ${event.reason}`);
+    this.connected = false;
+    this.stopHeartbeat();
+
+    // Clean up channels
+    Object.keys(this.channels).forEach(topic => {
+      this.channels[topic].joined = false;
+    });
+  }
+
+  channel(topic, params = {}) {
+    if (!this.channels[topic]) {
+      this.channels[topic] = {
+        topic,
+        params,
+        joined: false,
+        callbacks: {},
+        onJoin: null,
+        onError: null
+      };
+    }
+
+    return {
+      join: () => this.joinChannel(topic),
+      leave: () => this.leaveChannel(topic),
+      on: (event, callback) => this.on(topic, event, callback),
+      push: (event, payload) => this.push(topic, event, payload),
+      onJoin: (callback) => { this.channels[topic].onJoin = callback; },
+      onError: (callback) => { this.channels[topic].onError = callback; }
+    };
+  }
+
+  joinChannel(topic) {
+    if (!this.channels[topic]) {
+      throw new Error(`No channel found for topic: ${topic}`);
+    }
+
+    const ref = this.makeRef();
+    const message = {
+      topic,
+      event: 'phx_join',
+      payload: this.channels[topic].params,
+      ref
+    };
+
+    this.send(message);
+
+    return new Promise((resolve, reject) => {
+      const timeoutId = setTimeout(() => {
+        reject(new Error('Join timeout'));
+      }, this.timeout);
+
+      this.channels[topic].onJoin = (payload) => {
+        clearTimeout(timeoutId);
+        resolve(payload);
+      };
+
+      this.channels[topic].onError = (payload) => {
+        clearTimeout(timeoutId);
+        reject(new Error(payload.response?.reason || 'Join failed'));
+      };
+    });
+  }
+
+  leaveChannel(topic) {
+    if (!this.channels[topic]) {
+      return;
+    }
+
+    const ref = this.makeRef();
+    const message = {
+      topic,
+      event: 'phx_leave',
+      payload: {},
+      ref
+    };
+
+    this.send(message);
+    delete this.channels[topic];
+  }
+
+  on(topic, event, callback) {
+    if (!this.channels[topic]) {
+      throw new Error(`No channel found for topic: ${topic}`);
+    }
+
+    if (!this.channels[topic].callbacks[event]) {
+      this.channels[topic].callbacks[event] = [];
+    }
+
+    this.channels[topic].callbacks[event].push(callback);
+
+    return () => {
+      this.channels[topic].callbacks[event] = this.channels[topic].callbacks[event].filter(
+        cb => cb !== callback
+      );
+    };
+  }
+
+  push(topic, event, payload = {}) {
+    if (!this.channels[topic]) {
+      throw new Error(`No channel found for topic: ${topic}`);
+    }
+
+    const ref = this.makeRef();
+    const message = {
+      topic,
+      event,
+      payload,
+      ref
+    };
+
+    this.send(message);
+
+    return {
+      receive: (status, callback) => {
+        const replyEvent = `phx_reply`;
+
+        const removeListener = this.on(topic, replyEvent, (payload, msgRef) => {
+          if (msgRef === ref && payload.status === status) {
+            removeListener();
+            callback(payload.response);
+          }
+        });
+      }
+    };
+  }
+
+  onMessage(callback) {
+    this.messageCallbacks.push(callback);
+    return () => {
+      this.messageCallbacks = this.messageCallbacks.filter(cb => cb !== callback);
+    };
+  }
+
+  startHeartbeat() {
+    this.stopHeartbeat();
+    this.heartbeatTimer = setTimeout(() => {
+      if (this.connected) {
+        this.pendingHeartbeatRef = this.makeRef();
+        this.push('phoenix', 'heartbeat', {});
+      }
+    }, this.heartbeatIntervalMs);
+  }
+
+  stopHeartbeat() {
+    clearTimeout(this.heartbeatTimer);
+    this.heartbeatTimer = null;
+    this.pendingHeartbeatRef = null;
+  }
+
+  makeRef() {
+    this.ref += 1;
+    return this.ref.toString();
+  }
+
+  send(message) {
+    if (!this.connected) {
+      console.warn('Tried to send message while disconnected', message);
+      return false;
+    }
+
+    try {
+      this.socket.send(JSON.stringify(message));
+      return true;
+    } catch (error) {
+      console.error('Error sending message:', error);
+      return false;
+    }
+  }
+
+  buildUrl() {
+    // Append websocket suffix and params
+    let url = this.endpoint;
+    if (!url.endsWith('/websocket')) {
+      url = `${url}/websocket`;
+    }
+
+    // Add params as query string
+    if (Object.keys(this.params).length > 0) {
+      const params = new URLSearchParams();
+      Object.entries(this.params).forEach(([key, value]) => {
+        params.append(key, value);
+      });
+      url = `${url}?${params.toString()}`;
+    }
+
+    return url;
+  }
+}
+
+// Export globally
+window.PhoenixSocket = PhoenixSocket;

tasty_chrome/popup.html

···
     </div>
   </div>
 
-  <script src="phoenix.js"></script>
+  <script src="phoenix_simple.js"></script>
   <script src="popup.js"></script>
 </body>
 </html>

tasty_chrome/popup.js

···
     urlInput.value = currentTab.url || '';
   });
 
+  // Check for quick bookmark data from context menu
+  chrome.storage.local.get(['quickBookmark'], (result) => {
+    if (result.quickBookmark) {
+      titleInput.value = result.quickBookmark.title || '';
+      urlInput.value = result.quickBookmark.url || '';
+      // Clear the stored data
+      chrome.storage.local.remove(['quickBookmark']);
+    }
+  });
+
   // Load saved token from storage
   chrome.storage.local.get(['token'], (result) => {
     if (result.token) {
···
     const token = tokenInput.value.trim();
     if (token) {
       chrome.storage.local.set({ token });
+      console.log('Token saved to storage');
     }
   });
 
···
     message.textContent = '';
 
     try {
-      // Connect to Phoenix socket
-      const socket = new Phoenix.Socket("ws://localhost:4000/socket", {
+      console.log('Connecting to Phoenix socket...');
+
+      // Connect to Phoenix socket with our simplified client
+      const socket = new PhoenixSocket("ws://localhost:4000/socket", {
         params: { token }
       });
 
       socket.connect();
 
-      // Join the client channel
-      const channel = socket.channel(`bookmark:client:${token}`);
+      // Create a timeout to handle connection failures
+      const connectionTimeout = setTimeout(() => {
+        showMessage('Connection timeout. Server not responding.', 'error');
+        resetForm();
+      }, 5000);
 
-      channel.join()
-        .receive("ok", resp => {
-          console.log("Joined successfully", resp);
-          sendBookmark(channel);
-        })
-        .receive("error", resp => {
-          console.error("Unable to join", resp);
-          showMessage(`Error connecting: ${resp.reason || 'Unauthorized'}`, 'error');
-          resetForm();
-        });
+      // Wait for connection to establish
+      setTimeout(() => {
+        if (socket.connected) {
+          clearTimeout(connectionTimeout);
+
+          // Join the client channel
+          const channelTopic = `bookmark:client:${token}`;
+          console.log(`Joining channel: ${channelTopic}`);
+          const channel = socket.channel(channelTopic);
+
+          try {
+            // Join the channel
+            channel.join()
+              .then(() => {
+                console.log('Channel joined successfully');
+                sendBookmark(socket, channel);
+              })
+              .catch(error => {
+                console.error('Error joining channel:', error);
+                showMessage(`Error joining channel: ${error.message}`, 'error');
+                resetForm();
+              });
 
+            // Add error handler
+            channel.onError((resp) => {
+              console.error('Channel error:', resp);
+              showMessage(`Channel error: ${resp.reason || 'Unknown error'}`, 'error');
+              resetForm();
+            });
+          } catch (error) {
+            console.error('Error setting up channel:', error);
+            showMessage(`Error: ${error.message}`, 'error');
+            resetForm();
+          }
+        } else {
+          clearTimeout(connectionTimeout);
+          console.error('WebSocket not connected');
+          showMessage('Could not establish WebSocket connection', 'error');
+          resetForm();
+        }
+      }, 1000);
     } catch (error) {
       console.error('Connection error:', error);
       showMessage(`Connection error: ${error.message}`, 'error');
···
     }
   });
 
-  function sendBookmark(channel) {
+  function sendBookmark(socket, channel) {
+    console.log('Preparing to send bookmark data');
+
     const payload = {
       title: titleInput.value,
       url: urlInput.value,
···
       tags: tags
     };
 
-    channel.push("bookmark:create", payload)
-      .receive("ok", resp => {
-        console.log("Bookmark created", resp);
+    console.log('Bookmark payload:', payload);
+
+    try {
+      const pushResult = channel.push('bookmark:create', payload);
+
+      pushResult.receive('ok', (resp) => {
+        console.log('Bookmark created successfully:', resp);
         showMessage('Bookmark saved successfully!', 'success');
-        setTimeout(() => window.close(), 1500);
-      })
-      .receive("error", resp => {
-        console.error("Failed to create bookmark", resp);
-        showMessage(`Error: ${formatErrors(resp.errors)}`, 'error');
+
+        // Close the popup after success
+        setTimeout(() => {
+          socket.disconnect();
+          window.close();
+        }, 1500);
+      });
+
+      pushResult.receive('error', (resp) => {
+        console.error('Failed to create bookmark:', resp);
+        showMessage(`Error: ${formatErrors(resp)}`, 'error');
+        socket.disconnect();
         resetForm();
       });
+
+      // Set a timeout in case we don't get a response
+      setTimeout(() => {
+        if (saveButton.disabled) {
+          console.warn('No response received from server');
+          showMessage('No response from server. Your bookmark may or may not have been saved.', 'error');
+          socket.disconnect();
+          resetForm();
+        }
+      }, 10000);
+    } catch (error) {
+      console.error('Error sending bookmark:', error);
+      showMessage(`Error: ${error.message}`, 'error');
+      socket.disconnect();
+      resetForm();
+    }
   }
 
   function formatErrors(errors) {
     if (!errors) return 'Unknown error';
 
+    if (typeof errors === 'string') return errors;
+
     return Object.entries(errors)
       .map(([field, messages]) => `${field}: ${Array.isArray(messages) ? messages.join(', ') : messages}`)
       .join('; ');
···
   function showMessage(text, type) {
     message.textContent = text;
     message.className = type;
+    console.log(`Message (${type}): ${text}`);
   }
 
   function resetForm() {