mvp chrome extension

tasty_chrome/README.md

···
+# Tasty Bookmarks Chrome Extension
+
+Chrome extension for the Tasty Bookmarks application.
+
+## Features
+
+- Save the current page as a bookmark with one click
+- Add a description and tags to your bookmarks
+- Quickly access your bookmarks from any device
+
+## Development Setup
+
+1. Clone this repository
+2. Navigate to `chrome://extensions/` in Chrome
+3. Enable "Developer mode" in the top right
+4. Click "Load unpacked" and select the `tasty_chrome` folder
+5. The extension is now installed
+
+## Building for Production
+
+When ready for production:
+
+1. Generate icons (if using the provided SVG):
+   ```
+   python generate_icons.py
+   ```
+
+2. Package the extension:
+   - Zip all files excluding `generate_icons.py` and `README.md`
+   - Upload to the Chrome Web Store
+
+## Authentication
+
+This extension requires an authentication token from the Tasty Bookmarks application:
+
+1. Log into your Tasty Bookmarks account at `http://localhost:4000`
+2. Go to your profile page
+3. Click "Generate WebSocket Token"
+4. Copy the token and paste it into the extension
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## License
+
+MIT

tasty_chrome/background.js

···
+// Background service worker for Tasty Bookmarks extension
+
+// Listen for installation event
+chrome.runtime.onInstalled.addListener(() => {
+  console.log('Tasty Bookmarks extension installed');
+});
+
+// Context menu for quick bookmarking
+chrome.runtime.onInstalled.addListener(() => {
+  chrome.contextMenus.create({
+    id: 'tastyBookmark',
+    title: 'Save to Tasty Bookmarks',
+    contexts: ['page', 'link']
+  });
+});
+
+chrome.contextMenus.onClicked.addListener((info, tab) => {
+  if (info.menuItemId === 'tastyBookmark') {
+    // Get the URL from the context
+    const url = info.linkUrl || tab.url;
+    const title = tab.title || url;
+
+    // Open the popup with pre-filled information
+    chrome.storage.local.set({
+      quickBookmark: {
+        url,
+        title
+      }
+    }, () => {
+      chrome.action.openPopup();
+    });
+  }
+});
+
+// Handle any icon badge updates or notifications here

tasty_chrome/generate_icons.py

···
+#!/usr/bin/env python3
+"""
+Generate PNG icons from SVG for Chrome extension
+"""
+
+import os
+import subprocess
+from pathlib import Path
+
+# Sizes needed for Chrome extension
+ICON_SIZES = [16, 32, 48, 128]
+
+def main():
+    """Generate icons in different sizes from SVG"""
+    script_dir = Path(__file__).parent
+    images_dir = script_dir / "images"
+    svg_path = images_dir / "icon.svg"
+
+    if not svg_path.exists():
+        print(f"Error: SVG file not found at {svg_path}")
+        return
+
+    for size in ICON_SIZES:
+        output_path = images_dir / f"icon{size}.png"
+        print(f"Generating {output_path}...")
+
+        try:
+            if os.name == 'nt':  # Windows
+                # For Windows, you might need ImageMagick installed
+                subprocess.run([
+                    "magick",
+                    "convert",
+                    "-background", "none",
+                    "-size", f"{size}x{size}",
+                    str(svg_path),
+                    str(output_path)
+                ], check=True)
+            else:  # macOS/Linux
+                # Try using native macOS tools first
+                try:
+                    subprocess.run([
+                        "sips",
+                        "-z", str(size), str(size),
+                        "-s", "format", "png",
+                        str(svg_path),
+                        "--out", str(output_path)
+                    ], check=True)
+                except (subprocess.SubprocessError, FileNotFoundError):
+                    # Fallback to convert if available (requires ImageMagick)
+                    subprocess.run([
+                        "convert",
+                        "-background", "none",
+                        "-size", f"{size}x{size}",
+                        str(svg_path),
+                        str(output_path)
+                    ], check=True)
+
+            print(f"✓ Generated {output_path}")
+        except (subprocess.SubprocessError, FileNotFoundError) as e:
+            print(f"Error generating {output_path}: {e}")
+            print("Make sure you have ImageMagick installed for image conversion.")
+
+    print("\nIcon generation complete!")
+    print("You can install ImageMagick with:")
+    print("- macOS: brew install imagemagick")
+    print("- Linux: sudo apt install imagemagick")
+    print("- Windows: Download from https://imagemagick.org/script/download.php")
+
+if __name__ == "__main__":
+    main()

tasty_chrome/images/bookmark.svg

···
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0 1 11.186 0Z"/>
+</svg>

tasty_chrome/images/icon.svg

···
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#6366f1" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0 1 11.186 0Z" />
+</svg>

tasty_chrome/manifest.json

···
+{
+  "name": "Tasty Bookmarks",
+  "version": "1.0.0",
+  "description": "Save bookmarks to your Tasty application",
+  "manifest_version": 3,
+  "permissions": [
+    "activeTab",
+    "storage",
+    "tabs"
+  ],
+  "host_permissions": [
+    "http://localhost:4000/*"
+  ],
+  "background": {
+    "service_worker": "background.js"
+  },
+  "action": {
+    "default_popup": "popup.html",
+    "default_icon": {
+      "16": "images/icon16.png",
+      "48": "images/icon48.png",
+      "128": "images/icon128.png"
+    }
+  },
+  "icons": {
+    "16": "images/icon16.png",
+    "48": "images/icon48.png",
+    "128": "images/icon128.png"
+  }
+}

tasty_chrome/phoenix.js

···
+/**
+ * Phoenix WebSocket Client
+ *
+ * This is a minimal version of the Phoenix WebSocket client
+ * Adapted from https://github.com/phoenixframework/phoenix/blob/master/assets/js/phoenix.js
+ */
+
+(function(global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+  typeof define === 'function' && define.amd ? define(factory) :
+  (global = global || self, global.Phoenix = factory());
+}(this, function() { 'use strict';
+
+  // Phoenix WebSocket client library
+  const VSN = "2.0.0";
+  const SOCKET_STATES = {connecting: 0, open: 1, closing: 2, closed: 3};
+  const DEFAULT_TIMEOUT = 10000;
+  const WS_CLOSE_NORMAL = 1000;
+
+  // Utility functions
+  const closure = (value) => {
+    if(typeof value === "function"){
+      return value
+    } else {
+      let closure = function(){ return value }
+      return closure
+    }
+  }
+
+  // Channel constructor
+  class Channel {
+    constructor(topic, params, socket) {
+      this.topic = topic
+      this.params = params || {}
+      this.socket = socket
+      this.bindings = []
+      this.bindingRef = 0
+      this.timeout = this.socket.timeout
+      this.joinedOnce = false
+      this.joinPush = new Push(this, CHANNEL_EVENTS.join, this.params, this.timeout)
+      this.pushBuffer = []
+      this.rejoinTimer = new Timer(
+        () => this.rejoinUntilConnected(),
+        this.socket.reconnectAfterMs
+      )
+      this.stateChangeRefs = []
+
+      this.joinPush.receive("ok", () => {
+        this.state = CHANNEL_STATES.joined
+        this.rejoinTimer.reset()
+        this.pushBuffer.forEach(pushEvent => pushEvent.send())
+        this.pushBuffer = []
+      })
+      this.joinPush.receive("error", () => {
+        this.state = CHANNEL_STATES.errored
+        if(this.socket.isConnected()){ this.rejoinTimer.scheduleTimeout() }
+      })
+      this.onClose(() => {
+        this.rejoinTimer.reset()
+        if(this.socket.hasLogger()) this.socket.log("channel", `close ${this.topic} ${this.joinRef()}`)
+        this.state = CHANNEL_STATES.closed
+        this.socket.remove(this)
+      })
+      this.onError(reason => {
+        if(this.socket.hasLogger()) this.socket.log("channel", `error ${this.topic}`, reason)
+        if(this.isJoining()){ this.joinPush.reset() }
+        this.state = CHANNEL_STATES.errored
+        if(this.socket.isConnected()){ this.rejoinTimer.scheduleTimeout() }
+      })
+      this.joinPush.receive("timeout", () => {
+        if(this.socket.hasLogger()) this.socket.log("channel", `timeout ${this.topic} (${this.joinRef()})`, this.joinPush.timeout)
+        let leavePush = new Push(this, CHANNEL_EVENTS.leave, closure({}), this.timeout)
+        leavePush.send()
+        this.state = CHANNEL_STATES.errored
+        this.joinPush.reset()
+        if(this.socket.isConnected()){ this.rejoinTimer.scheduleTimeout() }
+      })
+      this.on(CHANNEL_EVENTS.reply, (payload, ref) => {
+        this.trigger(this.replyEventName(ref), payload)
+      })
+    }
+
+    join(timeout = this.timeout){
+      if(this.joinedOnce){
+        throw new Error(`tried to join multiple times. 'join' can only be called a single time per channel instance`)
+      } else {
+        this.timeout = timeout
+        this.joinedOnce = true
+        this.rejoin()
+        return this.joinPush
+      }
+    }
+
+    push(event, payload, timeout = this.timeout){
+      payload = payload || {}
+      if(!this.joinedOnce){
+        throw new Error(`tried to push '${event}' to '${this.topic}' before joining. Use channel.join() before pushing events`)
+      }
+      let pushEvent = new Push(this, event, payload, timeout)
+      if(this.canPush()){
+        pushEvent.send()
+      } else {
+        pushEvent.startTimeout()
+        this.pushBuffer.push(pushEvent)
+      }
+
+      return pushEvent
+    }
+
+    leave(timeout = this.timeout){
+      this.rejoinTimer.reset()
+      this.state = CHANNEL_STATES.leaving
+      let onClose = () => {
+        if(this.socket.hasLogger()) this.socket.log("channel", `leave ${this.topic}`)
+        this.trigger(CHANNEL_EVENTS.close, "leave")
+      }
+      let leavePush = new Push(this, CHANNEL_EVENTS.leave, closure({}), timeout)
+      leavePush.receive("ok", () => onClose())
+      leavePush.receive("timeout", () => onClose())
+      leavePush.send()
+      if(!this.canPush()){ leavePush.trigger("ok", {}) }
+
+      return leavePush
+    }
+
+    on(event, callback){
+      let ref = this.bindingRef++
+      this.bindings.push({event, ref, callback})
+      return ref
+    }
+
+    off(event, ref){
+      this.bindings = this.bindings.filter((bind) => {
+        return !(bind.event === event && (typeof ref === "undefined" || ref === bind.ref))
+      })
+    }
+
+    canPush(){ return this.socket.isConnected() && this.state === CHANNEL_STATES.joined }
+
+    replyEventName(ref){ return `chan_reply_${ref}` }
+
+    isMember(topic, event, payload, joinRef){
+      if(this.topic !== topic){ return false }
+      let isLifecycleEvent = CHANNEL_LIFECYCLE_EVENTS.indexOf(event) >= 0
+
+      if(joinRef && isLifecycleEvent && joinRef !== this.joinRef()){
+        if(this.socket.hasLogger()) this.socket.log("channel", "dropping outdated message", {topic, event, payload, joinRef})
+        return false
+      } else {
+        return true
+      }
+    }
+
+    joinRef(){ return this.joinPush.ref }
+
+    rejoin(timeout = this.timeout){
+      if(this.isLeaving()){ return }
+      this.state = CHANNEL_STATES.joining
+      this.joinPush.resend(timeout)
+    }
+
+    trigger(event, payload, ref, joinRef){
+      let handledPayload = {event, payload, ref, joinRef}
+      this.bindings
+        .filter(bind => bind.event === event)
+        .map(bind => bind.callback(handledPayload.payload, handledPayload.ref, handledPayload.event))
+      return handledPayload
+    }
+
+    isJoined() { return this.state === CHANNEL_STATES.joined }
+    isJoining() { return this.state === CHANNEL_STATES.joining }
+    isLeaving() { return this.state === CHANNEL_STATES.leaving }
+    isClosed() { return this.state === CHANNEL_STATES.closed }
+    isErrored() { return this.state === CHANNEL_STATES.errored }
+    isConnected() { return this.socket.isConnected() }
+
+    rejoinUntilConnected(){
+      this.rejoinTimer.scheduleTimeout()
+      if(this.socket.isConnected()){
+        this.rejoin()
+      }
+    }
+  }
+
+  // Channel-related constants
+  const CHANNEL_EVENTS = {
+    close: "phx_close",
+    error: "phx_error",
+    join: "phx_join",
+    reply: "phx_reply",
+    leave: "phx_leave"
+  }
+
+  const CHANNEL_STATES = {
+    closed: "closed",
+    errored: "errored",
+    joined: "joined",
+    joining: "joining",
+    leaving: "leaving",
+  }
+
+  const CHANNEL_LIFECYCLE_EVENTS = [
+    CHANNEL_EVENTS.close,
+    CHANNEL_EVENTS.error,
+    CHANNEL_EVENTS.join,
+    CHANNEL_EVENTS.reply,
+    CHANNEL_EVENTS.leave
+  ]
+
+  // Push constructor
+  class Push {
+    constructor(channel, event, payload, timeout) {
+      this.channel = channel
+      this.event = event
+      this.payload = payload || {}
+      this.receivedResp = null
+      this.timeout = timeout
+      this.timeoutTimer = null
+      this.recHooks = []
+      this.sent = false
+      this.ref = this.channel.socket.makeRef()
+    }
+
+    resend(timeout) {
+      this.timeout = timeout
+      this.reset()
+      this.send()
+    }
+
+    send() {
+      if(this.hasReceived("timeout")) { return }
+      this.startTimeout()
+      this.sent = true
+      this.channel.socket.push({
+        topic: this.channel.topic,
+        event: this.event,
+        payload: this.payload,
+        ref: this.ref,
+        join_ref: this.channel.joinRef()
+      })
+    }
+
+    receive(status, callback) {
+      if(this.hasReceived(status)) {
+        callback(this.receivedResp.response)
+      }
+
+      this.recHooks.push({status, callback})
+      return this
+    }
+
+    reset() {
+      this.cancelRefEvent()
+      this.ref = null
+      this.refEvent = null
+      this.receivedResp = null
+      this.sent = false
+    }
+
+    matchReceive({status, response, ref}) {
+      this.recHooks.filter(h => h.status === status)
+        .forEach(h => h.callback(response))
+    }
+
+    cancelRefEvent() {
+      if(!this.refEvent) { return }
+      this.channel.off(this.refEvent)
+    }
+
+    cancelTimeout() {
+      clearTimeout(this.timeoutTimer)
+      this.timeoutTimer = null
+    }
+
+    startTimeout() {
+      if(this.timeoutTimer) { this.cancelTimeout() }
+      this.ref = this.channel.socket.makeRef()
+      this.refEvent = this.channel.replyEventName(this.ref)
+
+      this.channel.on(this.refEvent, payload => {
+        this.cancelRefEvent()
+        this.cancelTimeout()
+        this.receivedResp = payload
+        this.matchReceive(payload)
+      })
+
+      this.timeoutTimer = setTimeout(() => {
+        this.trigger("timeout", {})
+      }, this.timeout)
+    }
+
+    hasReceived(status) {
+      return this.receivedResp && this.receivedResp.status === status
+    }
+
+    trigger(status, response) {
+      this.channel.trigger(this.refEvent, {status, response})
+    }
+  }
+
+  // Timer constructor
+  class Timer {
+    constructor(callback, timerCalc) {
+      this.callback = callback
+      this.timerCalc = timerCalc
+      this.timer = null
+      this.tries = 0
+    }
+
+    reset() {
+      this.tries = 0
+      clearTimeout(this.timer)
+    }
+
+    scheduleTimeout() {
+      clearTimeout(this.timer)
+      this.timer = setTimeout(() => {
+        this.tries = this.tries + 1
+        this.callback()
+      }, this.timerCalc(this.tries + 1))
+    }
+  }
+
+  // Socket constructor
+  class Socket {
+    constructor(endPoint, opts = {}){
+      this.stateChangeCallbacks = {open: [], close: [], error: [], message: []}
+      this.channels = []
+      this.sendBuffer = []
+      this.ref = 0
+      this.timeout = opts.timeout || DEFAULT_TIMEOUT
+      this.transport = opts.transport || global.WebSocket || WebSocket
+      this.establishedConnections = 0
+      this.defaultEncoder = (payload, callback) => callback(JSON.stringify(payload))
+      this.defaultDecoder = (payload, callback) => callback(JSON.parse(payload))
+      this.closeWasClean = false
+      this.unloaded = false
+      this.binaryType = opts.binaryType || "arraybuffer"
+      this.connectClock = 1
+      if(this.transport !== WebSocket){
+        this.encode = opts.encode || this.defaultEncoder
+        this.decode = opts.decode || this.defaultDecoder
+      } else {
+        this.encode = this.defaultEncoder
+        this.decode = this.defaultDecoder
+      }
+      if(opts.params){ this.params = opts.params }
+      this.logger = opts.logger || null
+      this.longpollerTimeout = opts.longpollerTimeout || 20000
+      this.heartbeatIntervalMs = opts.heartbeatIntervalMs || 30000
+      this.reconnectAfterMs = opts.reconnectAfterMs || function(tries){
+        return [1000, 2000, 5000, 10000][tries - 1] || 10000
+      }
+      this.encode = opts.encode || this.defaultEncoder
+      this.decode = opts.decode || this.defaultDecoder
+      const vsn = opts.vsn || VSN
+      this.vsn = vsn
+      this.heartbeatTimer = null
+      this.pendingHeartbeatRef = null
+      this.reconnectTimer = new Timer(() => {
+        this.teardown(() => this.connect())
+      }, this.reconnectAfterMs)
+      this.endPoint = `${endPoint}/${TRANSPORTS.websocket}`
+    }
+
+    connect() {
+      if(this.conn){ return }
+      this.connectClock++
+      this.closeWasClean = false
+      this.conn = new this.transport(this.endPointURL())
+      this.conn.binaryType = this.binaryType
+      this.conn.timeout = this.longpollerTimeout
+      this.conn.onopen = () => this.onConnOpen()
+      this.conn.onerror = error => this.onConnError(error)
+      this.conn.onmessage = event => this.onConnMessage(event)
+      this.conn.onclose = event => this.onConnClose(event)
+    }
+
+    disconnect(callback, code, reason){
+      this.connectClock++
+      this.closeWasClean = true
+      this.reconnectTimer.reset()
+      this.teardown(callback, code, reason)
+    }
+
+    teardown(callback, code, reason){
+      if(!this.conn){
+        return callback && callback()
+      }
+
+      this.waitForBufferDone(() => {
+        if(this.conn){
+          if(code){ this.conn.close(code, reason || "") } else { this.conn.close() }
+        }
+
+        this.waitForSocketClosed(() => {
+          this.conn = null
+          callback && callback()
+        })
+      })
+    }
+
+    waitForBufferDone(callback, tries = 1){
+      if(tries === 5 || !this.conn || !this.conn.bufferedAmount){
+        callback()
+        return
+      }
+
+      setTimeout(() => this.waitForBufferDone(callback, tries + 1), 150 * tries)
+    }
+
+    waitForSocketClosed(callback, tries = 1){
+      if(tries === 5 || !this.conn || this.conn.readyState === SOCKET_STATES.closed){
+        callback()
+        return
+      }
+
+      setTimeout(() => this.waitForSocketClosed(callback, tries + 1), 150 * tries)
+    }
+
+    onConnOpen(){
+      if(this.hasLogger()) this.log("transport", `connected to ${this.endPointURL()}`)
+      this.unloaded = false
+      this.closeWasClean = false
+      this.establishedConnections++
+      this.flushSendBuffer()
+      this.reconnectTimer.reset()
+      this.resetHeartbeat()
+      this.stateChangeCallbacks.open.forEach(callback => callback())
+    }
+
+    resetHeartbeat(){ if(this.conn && this.heartbeatIntervalMs > 0){
+      this.stopHeartbeat()
+      this.heartbeatTimer = setTimeout(() => this.sendHeartbeat(), this.heartbeatIntervalMs)
+    }}
+
+    stopHeartbeat(){
+      clearTimeout(this.heartbeatTimer)
+      this.heartbeatTimer = null
+      clearTimeout(this.pendingHeartbeatRef)
+      this.pendingHeartbeatRef = null
+    }
+
+    onConnClose(event){
+      if(this.hasLogger()) this.log("transport", "close", event)
+      this.triggerChanError()
+      this.stopHeartbeat()
+      this.stateChangeCallbacks.close.forEach(callback => callback(event))
+      if(this.closeWasClean){
+        this.reconnectTimer.reset()
+      } else {
+        this.reconnectTimer.scheduleTimeout()
+      }
+    }
+
+    onConnError(error){
+      if(this.hasLogger()) this.log("transport", error)
+      this.triggerChanError()
+      this.stateChangeCallbacks.error.forEach(callback => callback(error))
+    }
+
+    triggerChanError(){
+      this.channels.forEach(channel => {
+        if(!(channel.isErrored() || channel.isLeaving() || channel.isClosed())){
+          channel.trigger(CHANNEL_EVENTS.error)
+        }
+      })
+    }
+
+    connectionState(){
+      switch(this.conn && this.conn.readyState){
+        case SOCKET_STATES.connecting: return "connecting"
+        case SOCKET_STATES.open: return "open"
+        case SOCKET_STATES.closing: return "closing"
+        default: return "closed"
+      }
+    }
+
+    isConnected(){ return this.connectionState() === "open" }
+
+    remove(channel){
+      this.channels = this.channels.filter(c => c.joinRef() !== channel.joinRef())
+    }
+
+    channel(topic, chanParams = {}){
+      let chan = new Channel(topic, chanParams, this)
+      this.channels.push(chan)
+      return chan
+    }
+
+    push(data){
+      if(this.hasLogger()){
+        let {topic, event, payload, ref, join_ref} = data
+        this.log("push", `${topic} ${event} (${join_ref}, ${ref})`, payload)
+      }
+
+      if(this.isConnected()){
+        this.encode(data, result => this.conn.send(result))
+      } else {
+        this.sendBuffer.push(() => this.encode(data, result => this.conn.send(result)))
+      }
+    }
+
+    makeRef(){
+      let newRef = this.ref + 1
+      if(newRef === this.ref){ this.ref = 0 } else { this.ref = newRef }
+
+      return this.ref.toString()
+    }
+
+    sendHeartbeat(){
+      if(!this.isConnected()){ return }
+      if(this.pendingHeartbeatRef){ return }
+      this.pendingHeartbeatRef = this.makeRef()
+      this.push({topic: "phoenix", event: "heartbeat", payload: {}, ref: this.pendingHeartbeatRef})
+      this.heartbeatTimer = setTimeout(() => this.heartbeatTimeout(), this.heartbeatIntervalMs)
+    }
+
+    heartbeatTimeout(){
+      if(this.pendingHeartbeatRef){
+        this.pendingHeartbeatRef = null
+        if(this.hasLogger()) this.log("transport", "heartbeat timeout. Attempting to re-establish connection")
+        this.abnormalClose("heartbeat timeout")
+      }
+    }
+
+    abnormalClose(reason){
+      this.closeWasClean = false
+      if(this.conn){
+        this.conn.close(WS_CLOSE_NORMAL, reason)
+      }
+    }
+
+    flushSendBuffer(){
+      if(this.isConnected() && this.sendBuffer.length > 0){
+        this.sendBuffer.forEach(callback => callback())
+        this.sendBuffer = []
+      }
+    }
+
+    onConnMessage(rawMessage){
+      this.decode(rawMessage.data, msg => {
+        let {topic, event, payload, ref, join_ref} = msg
+        if(ref && ref === this.pendingHeartbeatRef){
+          this.pendingHeartbeatRef = null
+          clearTimeout(this.heartbeatTimer)
+          this.heartbeatTimer = setTimeout(() => this.sendHeartbeat(), this.heartbeatIntervalMs)
+        }
+
+        if(this.hasLogger()) this.log("receive", `${payload.status || ""} ${topic} ${event} ${ref && "(" + ref + ")" || ""}`, payload)
+
+        for(let i = 0; i < this.channels.length; i++){
+          const channel = this.channels[i]
+          if(!channel.isMember(topic, event, payload, join_ref)){ continue }
+          channel.trigger(event, payload, ref, join_ref)
+        }
+
+        for(let i = 0; i < this.stateChangeCallbacks.message.length; i++){
+          let [, callback] = this.stateChangeCallbacks.message[i]
+          callback(msg)
+        }
+      })
+    }
+
+    leaveOpenTopic(topic){
+      let dupChannel = this.channels.find(c => c.topic === topic && (c.isJoined() || c.isJoining()))
+      if(dupChannel){
+        if(this.hasLogger()) this.log("transport", `leaving duplicate topic "${topic}"`)
+        dupChannel.leave()
+      }
+    }
+
+    endPointURL(){
+      return this.appendParams(this.endPoint, Object.assign({}, this.params, {vsn: this.vsn}))
+    }
+
+    appendParams(url, params){
+      if(Object.keys(params).length === 0){ return url }
+
+      let prefix = url.match(/\?/) ? "&" : "?"
+      return `${url}${prefix}${this.serializeParams(params)}`
+    }
+
+    serializeParams(params){
+      return params ? Object.entries(params).map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`).join("&") : ""
+    }
+
+    hasLogger(){ return this.logger !== null }
+
+    log(kind, msg, data){ this.logger(kind, msg, data) }
+  }
+
+  // Transport-related constants
+  const TRANSPORTS = {
+    longpoll: "longpoll",
+    websocket: "websocket"
+  }
+
+  // Export Socket and Channel classes
+  return { Channel, Socket }
+}));

tasty_chrome/popup.html

···
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Tasty Bookmarks</title>
+  <meta charset="utf-8">
+  <style>
+    body {
+      width: 360px;
+      min-height: 400px;
+      margin: 0;
+      padding: 0;
+      font-family: 'Courier New', monospace;
+      background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
+      color: #e0e0e0;
+    }
+    .container {
+      padding: 16px;
+    }
+    .header {
+      margin-bottom: 16px;
+      text-align: center;
+    }
+    .title {
+      font-size: 20px;
+      font-weight: bold;
+      color: #4ade80;
+      margin: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .title span {
+      color: #f59e0b;
+    }
+    .form-group {
+      margin-bottom: 12px;
+    }
+    label {
+      display: block;
+      margin-bottom: 4px;
+      color: #9ca3af;
+    }
+    input[type="text"], input[type="url"], textarea {
+      width: 100%;
+      padding: 8px;
+      border: 1px solid #4c1d95;
+      border-radius: 4px;
+      background-color: #111827;
+      color: #e0e0e0;
+      font-family: 'Courier New', monospace;
+      box-sizing: border-box;
+    }
+    textarea {
+      resize: vertical;
+      min-height: 80px;
+    }
+    .tags-input {
+      width: 100%;
+      padding: 8px;
+      border: 1px solid #4c1d95;
+      border-radius: 4px;
+      background-color: #111827;
+      color: #e0e0e0;
+      font-family: 'Courier New', monospace;
+      box-sizing: border-box;
+    }
+    .tags-container {
+      display: flex;
+      flex-wrap: wrap;
+      margin-top: 8px;
+      gap: 4px;
+    }
+    .tag {
+      background-color: #4c1d95;
+      color: #e0e0e0;
+      padding: 2px 8px;
+      border-radius: 12px;
+      font-size: 12px;
+      display: flex;
+      align-items: center;
+    }
+    .tag .remove {
+      margin-left: 4px;
+      cursor: pointer;
+      color: #d1d5db;
+    }
+    .button {
+      width: 100%;
+      padding: 10px;
+      background: linear-gradient(90deg, #4ade80 0%, #3b82f6 100%);
+      border: none;
+      border-radius: 4px;
+      color: white;
+      font-weight: bold;
+      cursor: pointer;
+      transition: transform 0.2s;
+      margin-top: 8px;
+    }
+    .button:hover {
+      transform: scale(1.02);
+    }
+    .button:disabled {
+      background: #6b7280;
+      cursor: not-allowed;
+      transform: none;
+    }
+    .status {
+      margin-top: 12px;
+      text-align: center;
+      font-size: 14px;
+    }
+    .error {
+      color: #ef4444;
+    }
+    .success {
+      color: #10b981;
+    }
+    .token-input {
+      margin-bottom: 16px;
+    }
+    .loader {
+      border: 3px solid #1f2937;
+      border-top: 3px solid #3b82f6;
+      border-radius: 50%;
+      width: 16px;
+      height: 16px;
+      animation: spin 1s linear infinite;
+      margin: 0 auto;
+      display: none;
+    }
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+    .cursor {
+      display: inline-block;
+      width: 8px;
+      height: 16px;
+      background-color: #4ade80;
+      margin-left: 4px;
+      animation: blink 1s step-end infinite;
+    }
+    @keyframes blink {
+      from, to { opacity: 1; }
+      50% { opacity: 0; }
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="header">
+      <h1 class="title">
+        Tasty<span>@</span>Bookmarks<div class="cursor"></div>
+      </h1>
+    </div>
+
+    <div class="form-group token-input">
+      <label for="token">Authentication Token:</label>
+      <input type="text" id="token" placeholder="Paste your WebSocket token here...">
+    </div>
+
+    <form id="bookmark-form">
+      <div class="form-group">
+        <label for="title">Title:</label>
+        <input type="text" id="title" required>
+      </div>
+
+      <div class="form-group">
+        <label for="url">URL:</label>
+        <input type="url" id="url" required>
+      </div>
+
+      <div class="form-group">
+        <label for="description">Description (optional):</label>
+        <textarea id="description"></textarea>
+      </div>
+
+      <div class="form-group">
+        <label for="tags">Tags (optional):</label>
+        <input type="text" id="tags-input" class="tags-input" placeholder="Add tags separated by commas...">
+        <div class="tags-container" id="tags-container"></div>
+      </div>
+
+      <button type="submit" class="button" id="save-button">
+        Save Bookmark <span>▶</span>
+      </button>
+    </form>
+
+    <div class="status" id="status">
+      <div class="loader" id="loader"></div>
+      <div id="message"></div>
+    </div>
+  </div>
+
+  <script src="phoenix.js"></script>
+  <script src="popup.js"></script>
+</body>
+</html>

tasty_chrome/popup.js

···
+document.addEventListener('DOMContentLoaded', () => {
+  // DOM elements
+  const form = document.getElementById('bookmark-form');
+  const titleInput = document.getElementById('title');
+  const urlInput = document.getElementById('url');
+  const descriptionInput = document.getElementById('description');
+  const tagsInput = document.getElementById('tags-input');
+  const tagsContainer = document.getElementById('tags-container');
+  const tokenInput = document.getElementById('token');
+  const saveButton = document.getElementById('save-button');
+  const loader = document.getElementById('loader');
+  const message = document.getElementById('message');
+
+  // Get current tab information and fill the form
+  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+    const currentTab = tabs[0];
+    titleInput.value = currentTab.title || '';
+    urlInput.value = currentTab.url || '';
+  });
+
+  // Load saved token from storage
+  chrome.storage.local.get(['token'], (result) => {
+    if (result.token) {
+      tokenInput.value = result.token;
+    }
+  });
+
+  // Save token when it changes
+  tokenInput.addEventListener('change', () => {
+    const token = tokenInput.value.trim();
+    if (token) {
+      chrome.storage.local.set({ token });
+    }
+  });
+
+  // Tags handling
+  const tags = [];
+
+  function updateTagsDisplay() {
+    tagsContainer.innerHTML = '';
+    tags.forEach((tag, index) => {
+      const tagElement = document.createElement('div');
+      tagElement.className = 'tag';
+      tagElement.innerHTML = `
+        #${tag}
+        <span class="remove" data-index="${index}">×</span>
+      `;
+      tagsContainer.appendChild(tagElement);
+    });
+
+    // Add click event to remove buttons
+    document.querySelectorAll('.tag .remove').forEach(button => {
+      button.addEventListener('click', (e) => {
+        const index = parseInt(e.target.getAttribute('data-index'));
+        tags.splice(index, 1);
+        updateTagsDisplay();
+      });
+    });
+  }
+
+  tagsInput.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' || e.key === ',') {
+      e.preventDefault();
+      const value = tagsInput.value.trim();
+      if (value && !tags.includes(value)) {
+        tags.push(value);
+        tagsInput.value = '';
+        updateTagsDisplay();
+      }
+    }
+  });
+
+  tagsInput.addEventListener('blur', () => {
+    const value = tagsInput.value.trim();
+    if (value) {
+      const newTags = value.split(',').map(tag => tag.trim()).filter(tag => tag && !tags.includes(tag));
+      tags.push(...newTags);
+      tagsInput.value = '';
+      updateTagsDisplay();
+    }
+  });
+
+  // Form submission
+  form.addEventListener('submit', async (e) => {
+    e.preventDefault();
+
+    const token = tokenInput.value.trim();
+    if (!token) {
+      showMessage('Please enter your authentication token', 'error');
+      return;
+    }
+
+    // Disable form and show loader
+    saveButton.disabled = true;
+    loader.style.display = 'block';
+    message.textContent = '';
+
+    try {
+      // Connect to Phoenix socket
+      const socket = new Phoenix.Socket("ws://localhost:4000/socket", {
+        params: { token }
+      });
+
+      socket.connect();
+
+      // Join the client channel
+      const channel = socket.channel(`bookmark:client:${token}`);
+
+      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();
+        });
+
+    } catch (error) {
+      console.error('Connection error:', error);
+      showMessage(`Connection error: ${error.message}`, 'error');
+      resetForm();
+    }
+  });
+
+  function sendBookmark(channel) {
+    const payload = {
+      title: titleInput.value,
+      url: urlInput.value,
+      description: descriptionInput.value,
+      tags: tags
+    };
+
+    channel.push("bookmark:create", payload)
+      .receive("ok", resp => {
+        console.log("Bookmark created", 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');
+        resetForm();
+      });
+  }
+
+  function formatErrors(errors) {
+    if (!errors) return 'Unknown error';
+
+    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;
+  }
+
+  function resetForm() {
+    saveButton.disabled = false;
+    loader.style.display = 'none';
+  }
+});

tasty_chrome/styles.css

···
+/* Tasty Bookmarks - Extension Styles */
+
+:root {
+  --color-primary: #6366f1;
+  --color-primary-hover: #4f46e5;
+  --color-text: #0f172a;
+  --color-text-light: #64748b;
+  --color-background: #f8fafc;
+  --color-border: #e2e8f0;
+  --color-success: #10b981;
+  --color-error: #ef4444;
+  --radius: 6px;
+  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  width: 380px;
+  min-height: 400px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  background: var(--color-background);
+  color: var(--color-text);
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+header {
+  text-align: center;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--color-border);
+}
+
+h1 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: 4px;
+  color: var(--color-primary);
+}
+
+.subtitle {
+  color: var(--color-text-light);
+  font-size: 0.9rem;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.form-group label {
+  font-weight: 500;
+  font-size: 0.9rem;
+}
+
+input, textarea {
+  padding: 8px 12px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  font-size: 0.9rem;
+  transition: border-color 0.15s ease;
+  width: 100%;
+}
+
+input:focus, textarea:focus {
+  border-color: var(--color-primary);
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
+}
+
+textarea {
+  resize: vertical;
+  min-height: 80px;
+}
+
+.tags-input-container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.tags-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.tag {
+  background: rgba(99, 102, 241, 0.1);
+  color: var(--color-primary);
+  border-radius: var(--radius);
+  padding: 4px 8px;
+  font-size: 0.85rem;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.tag .remove {
+  cursor: pointer;
+  font-weight: bold;
+  font-size: 1.1rem;
+  margin-left: 2px;
+}
+
+.tag .remove:hover {
+  color: var(--color-error);
+}
+
+button {
+  cursor: pointer;
+  background: var(--color-primary);
+  color: white;
+  border: none;
+  border-radius: var(--radius);
+  padding: 10px 16px;
+  font-weight: 500;
+  transition: background-color 0.15s ease;
+}
+
+button:hover {
+  background: var(--color-primary-hover);
+}
+
+button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.loader {
+  display: none;
+  margin: 0 auto;
+  width: 24px;
+  height: 24px;
+  border: 3px solid rgba(99, 102, 241, 0.3);
+  border-radius: 50%;
+  border-top-color: var(--color-primary);
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.message {
+  padding: 8px 12px;
+  border-radius: var(--radius);
+  font-size: 0.9rem;
+  text-align: center;
+}
+
+.message.success {
+  background-color: rgba(16, 185, 129, 0.1);
+  color: var(--color-success);
+}
+
+.message.error {
+  background-color: rgba(239, 68, 68, 0.1);
+  color: var(--color-error);
+}
+
+footer {
+  margin-top: 8px;
+  font-size: 0.8rem;
+  color: var(--color-text-light);
+  text-align: center;
+}