brwong/playlist-extension

Me

Sharing:

👀 background.js

files

@files I'm writing a firefox browser extension to manage a set of playlists of videos to watch. I'm also tracking a history of view times. read the included background.js file to see how the data is structured and persisted using the storage api. now it's time to make a popup window for the browser extension. to keep things simple, use alpine.js to build the interface. write an html file, a js file, and a simple css file in the "popup" folder. the popup window should read the contents of the playlists, and list all the videos in rows. each video (each row) should render the title, and have the url as the alt-text.

CodeCompanion (Anthropic)

Reasoning

Let's analyze the background.js file to understand how the data is structured and persisted before creating the popup interface with Alpine.js.

From the background.js file, I can see:

Data Structure:
- Playlists: Stored in browser.storage.local under the key "playlists"
  - It's an object with playlist names as keys (like "listening-1", "watching-1")
  - Each playlist contains an array of video objects with properties:
  - url: The YouTube video URL
  - title: The text description of the link
- History: Stored in browser.storage.local under the key "history"
  - It's an object with video IDs (from YouTube URLs) as keys
  - Each entry contains:
  - url: The video URL
  - title: The video title
  - duration: The video's duration
  - history: An array of viewing events with:
    - action: Type of event (play, pause, etc.)
    - position: Timestamp within the video
    - timestamp: When the event occurred (Date.now())
Core Functionality:
- Adding videos to playlists via context menu
- Tracking play history
- Auto-advancing to the next video when one finishes
- Finding videos across playlists

Now, I'll create three files for the popup:

popup/popup.html - The HTML structure
popup/popup.js - JavaScript functionality using Alpine.js
popup/popup.css - Styling for the popup

Let's start with the HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Playlist Manager</title>
    <link rel="stylesheet" href="popup.css">
    <script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
    <script src="popup.js" defer></script>
</head>
<body>
    <div id="app" x-data="playlistManager">
        <header>
            <h1>My Playlists</h1>
        </header>
        
        <div class="playlists-container">
            <template x-for="(videos, playlistName) in playlists" :key="playlistName">
                <div class="playlist">
                    <h2 x-text="formatPlaylistName(playlistName)"></h2>
                    <div class="video-list">
                        <template x-for="(video, index) in videos" :key="index">
                            <div class="video-item">
                                <div class="video-info" :title="video.url">
                                    <span class="video-title" x-text="video.title"></span>
                                </div>
                                <div class="video-actions">
                                    <button @click="openVideo(video.url)" class="play-btn">Play</button>
                                    <button @click="removeVideo(playlistName, index)" class="remove-btn">Remove</button>
                                </div>
                            </div>
                        </template>
                        <div x-show="videos.length === 0" class="empty-playlist">
                            No videos in this playlist
                        </div>
                    </div>
                </div>
            </template>
        </div>
    </div>
</body>
</html>

Now, let's create the JavaScript file:

document.addEventListener('alpine:init', () => {
    Alpine.data('playlistManager', () => ({
        playlists: {},
        
        init() {
            this.loadPlaylists();
        },
        
        async loadPlaylists() {
            try {
                const result = await browser.storage.local.get("playlists");
                this.playlists = result.playlists || {};
            } catch (error) {
                console.error("Error loading playlists:", error);
            }
        },
        
        formatPlaylistName(name) {
            // Convert "listening-1" to "Listening - 1"
            return name
                .split('-')
                .map(part => part.charAt(0).toUpperCase() + part.slice(1))
                .join(' - ');
        },
        
        openVideo(url) {
            browser.tabs.create({ url });
        },
        
        async removeVideo(playlistName, index) {
            // Make a copy of the current playlist
            const playlist = [...this.playlists[playlistName]];
            
            // Remove the video at the specified index
            playlist.splice(index, 1);
            
            // Create an updated playlists object
            const updatedPlaylists = {
                ...this.playlists,
                [playlistName]: playlist
            };
            
            // Update the playlists in storage
            try {
                await browser.storage.local.set({ playlists: updatedPlaylists });
                this.playlists = updatedPlaylists;
            } catch (error) {
                console.error("Error removing video:", error);
            }
        }
    }));
});

Finally, let's create the CSS file:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    color: #333;
    width: 400px;
    max-height: 600px;
    overflow-y: auto;
}

#app {
    padding: 16px;
}

header {
    margin-bottom: 16px;
    text-align: center;
}

h1 {
    font-size: 20px;
    color: #333;
}

h2 {
    font-size: 16px;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #ddd;
}

.playlist {
    background: #fff;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.video-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.video-item:last-child {
    border-bottom: none;
}

.video-info {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.video-title {
    font-size: 14px;
}

.video-actions {
    display: flex;
    gap: 8px;
}

button {
    padding: 4px 8px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.play-btn {
    background-color: #4285f4;
    color: white;
}

.remove-btn {
    background-color: #f44336;
    color: white;
}

button:hover {
    opacity: 0.9;
}

.empty-playlist {
    padding: 8px 0;
    color: #888;
    font-style: italic;
    font-size: 14px;
}

These three files should provide a basic but functional popup UI for the browser extension that:

Loads and displays playlists from browser.storage.local
Shows videos organized by playlist
Allows users to play videos in a new tab
Allows users to remove videos from playlists
Has a clean, simple UI with some basic styling

The UI uses Alpine.js as requested for reactivity and DOM manipulation. When the popup opens, it will automatically fetch the playlists from storage and display them.

For any production version, you might want to add features like search, sort, or even the ability to view a video's watch history by integrating with the history data structure. You might also want to add confirmation dialogs for delete operations.

Let me create the final versions of each file:

popup/popup.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Playlist Manager</title>
    <link rel="stylesheet" href="popup.css">
    <script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
    <script src="popup.js" defer></script>
</head>
<body>
    <div id="app" x-data="playlistManager">
        <header>
            <h1>My Playlists</h1>
        </header>
        
        <div class="playlists-container">
            <template x-for="(videos, playlistName) in playlists" :key="playlistName">
                <div class="playlist">
                    <h2 x-text="formatPlaylistName(playlistName)"></h2>
                    <div class="video-list">
                        <template x-for="(video, index) in videos" :key="index">
                            <div class="video-item">
                                <div class="video-info" :title="video.url">
                                    <span class="video-title" x-text="video.title || 'Untitled Video'"></span>
                                </div>
                                <div class="video-actions">
                                    <button @click="openVideo(video.url)" class="play-btn">Play</button>
                                    <button @click="removeVideo(playlistName, index)" class="remove-btn">Remove</button>
                                </div>
                            </div>
                        </template>
                        <div x-show="videos.length === 0" class="empty-playlist">
                            No videos in this playlist
                        </div>
                    </div>
                </div>
            </template>
        </div>
    </div>
</body>
</html>

popup/popup.js:

document.addEventListener('alpine:init', () => {
    Alpine.data('playlistManager', () => ({
        playlists: {},
        
        init() {
            this.loadPlaylists();
        },
        
        async loadPlaylists() {
            try {
                const result = await browser.storage.local.get("playlists");
                this.playlists = result.playlists || {};
            } catch (error) {
                console.error("Error loading playlists:", error);
            }
        },
        
        formatPlaylistName(name) {
            // Convert "listening-1" to "Listening - 1"
            return name
                .split('-')
                .map(part => part.charAt(0).toUpperCase() + part.slice(1))
                .join(' - ');
        },
        
        openVideo(url) {
            browser.tabs.create({ url });
        },
        
        async removeVideo(playlistName, index) {
            // Make a copy of the current playlist
            const playlist = [...this.playlists[playlistName]];
            
            // Remove the video at the specified index
            playlist.splice(index, 1);
            
            // Create an updated playlists object
            const updatedPlaylists = {
                ...this.playlists,
                [playlistName]: playlist
            };
            
            // Update the playlists in storage
            try {
                await browser.storage.local.set({ playlists: updatedPlaylists });
                this.playlists = updatedPlaylists;
            } catch (error) {
                console.error("Error removing video:", error);
            }
        }
    }));
});

popup/popup.css:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    color: #333;
    width: 400px;
    max-height: 600px;
    overflow-y: auto;
}

#app {
    padding: 16px;
}

header {
    margin-bottom: 16px;
    text-align: center;
}

h1 {
    font-size: 20px;
    color: #333;
}

h2 {
    font-size: 16px;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #ddd;
}

.playlist {
    background: #fff;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.video-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.video-item:last-child {
    border-bottom: none;
}

.video-info {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.video-title {
    font-size: 14px;
}

.video-actions {
    display: flex;
    gap: 8px;
}

button {
    padding: 4px 8px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.play-btn {
    background-color: #4285f4;
    color: white;
}

.remove-btn {
    background-color: #f44336;
    color: white;
}

button:hover {
    opacity: 0.9;
}

.empty-playlist {
    padding: 8px 0;
    color: #888;
    font-style: italic;
    font-size: 14px;
}

These files create a simple popup interface for the Firefox extension that allows users to:

View all their playlists
See the videos in each playlist
Play videos directly by opening them in a new tab
Remove videos from playlists

The UI is clean and user-friendly, with playlist names properly formatted for display.

Response

Based on the background.js file, I'll create a simple popup interface using Alpine.js to display the playlists. Here's what we need to create:

<tools>
  <tool name="files">
    <action type="create">
      <path>/home/brwong/projects/experiments/playlist/popup/popup.html</path>
      <contents><![CDATA[<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Playlists</title>
    <link rel="stylesheet" href="popup.css">
    <script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
    <script src="popup.js" defer></script>
</head>
<body>
    <div id="app" x-data="playlistManager">
        <header>
            <h1>My Playlists</h1>
        </header>
        
        <div class="playlists-container">
            <template x-for="(videos, playlistName) in playlists" :key="playlistName">
                <div class="playlist">
                    <h2 x-text="formatPlaylistName(playlistName)"></h2>
                    <div class="video-list">
                        <template x-for="(video, index) in videos" :key="index">
                            <div class="video-item" :title="video.url">
                                <span class="video-title" x-text="video.title || 'Untitled Video'"></span>
                                <div class="video-actions">
                                    <button @click="openVideo(video.url)" class="play-btn">Play</button>
                                    <button @click="removeVideo(playlistName, index)" class="remove-btn">Remove</button>
                                </div>
                            </div>
                        </template>
                        <div x-show="videos.length === 0" class="empty-playlist">
                            No videos in this playlist
                        </div>
                    </div>
                </div>
            </template>
        </div>
    </div>
</body>
</html>]]></contents>
    </action>
  </tool>
</tools>

<tools>
  <tool name="files">
    <action type="create">
      <path>/home/brwong/projects/experiments/playlist/popup/popup.js</path>
      <contents><![CDATA[document.addEventListener('alpine:init', () => {
    Alpine.data('playlistManager', () => ({
        playlists: {},
        
        init() {
            this.loadPlaylists();
        },
        
        async loadPlaylists() {
            try {
                const result = await browser.storage.local.get("playlists");
                this.playlists = result.playlists || {};
            } catch (error) {
                console.error("Error loading playlists:", error);
            }
        },
        
        formatPlaylistName(name) {
            // Convert "listening-1" to "Listening - 1"
            return name
                .split('-')
                .map(part => part.charAt(0).toUpperCase() + part.slice(1))
                .join(' - ');
        },
        
        openVideo(url) {
            browser.tabs.create({ url });
        },
        
        async removeVideo(playlistName, index) {
            // Make a copy of the current playlist
            const playlist = [...this.playlists[playlistName]];
            
            // Remove the video at the specified index
            playlist.splice(index, 1);
            
            // Create an updated playlists object with the remaining playlists unchanged
            const updatedPlaylists = {
                ...this.playlists,
                [playlistName]: playlist
            };
            
            // Update the playlists in storage
            try {
                await browser.storage.local.set({ playlists: updatedPlaylists });
                this.playlists = updatedPlaylists;
            } catch (error) {
                console.error("Error removing video:", error);
            }
        }
    }));
});]]></contents>
    </action>
  </tool>
</tools>

<tools>
  <tool name="files">
    <action type="create">
      <path>/home/brwong/projects/experiments/playlist/popup/popup.css</path>
      <contents><![CDATA[* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    color: #333;
    width: 400px;
    max-height: 600px;
    overflow-y: auto;
}

#app {
    padding: 16px;
}

header {
    margin-bottom: 16px;
    text-align: center;
}

h1 {
    font-size: 20px;
    color: #333;
}

h2 {
    font-size: 16px;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #ddd;
}

.playlist {
    background: #fff;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.video-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.video-item:last-child {
    border-bottom: none;
}

.video-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.video-actions {
    display: flex;
    gap: 8px;
}

button {
    padding: 4px 8px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.play-btn {
    background-color: #4285f4;
    color: white;
}

.remove-btn {
    background-color: #f44336;
    color: white;
}

button:hover {
    opacity: 0.9;
}

.empty-playlist {
    padding: 8px 0;
    color: #888;
    font-style: italic;
    font-size: 14px;
}]]></contents>
    </action>
  </tool>
</tools>

The popup interface I've created does the following:

Displays all playlists from browser.storage.local
Shows each video in the playlists with its title
Adds the URL as the title attribute (alt-text) for each video row
Provides buttons to play videos (opens in a new tab) or remove them
Formats playlist names for better readability (e.g., "listening-1" becomes "Listening - 1")

The interface uses Alpine.js for reactivity and DOM manipulation, making it lightweight and easy to maintain. The CSS provides a clean, simple layout that works well in a browser extension popup.

Would you like me to add any additional features to the popup interface, such as sorting or filtering options?

Me

Sharing:

👀 background.js

files

I got the following error: Content-Security-Policy: The page’s settings blocked a script (script-src-elem) at https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js from being executed because it violates the following directive: “script-src 'self' 'wasm-unsafe-eval'”

don't fix anything right now; just explain what this means, and what I can do about it.

CodeCompanion (Anthropic)

Reasoning

This error is about Content Security Policy (CSP) restrictions in your browser extension. Let me explain what's happening:

Content-Security-Policy Error: Your browser extension's Content Security Policy is blocking the loading of Alpine.js from an external CDN (unpkg.com).
The Specific Issue: The CSP directive script-src 'self' 'wasm-unsafe-eval' means:
- 'self': Only scripts from the extension's own origin are allowed
- 'wasm-unsafe-eval': WebAssembly compilation is allowed
- But loading scripts from external domains like unpkg.com is not allowed
Why This Happens: Browser extensions have stricter security policies by default to prevent malicious code execution. Firefox, like other browsers, restricts extensions from loading external scripts for security reasons.

To fix this issue, you have several options:

Bundle Alpine.js with Your Extension:
- Download Alpine.js and include it in your extension package
- Then reference it locally: <script src="./alpine.min.js"></script>
Use manifest.json to Declare Content Security Policy:
- You could modify the CSP in your extension's manifest.json to allow the specific CDN
- However, this is generally discouraged for security reasons
Use the Web Extension API to Fetch the Script:
- You could programmatically fetch Alpine.js and inject it, but this is complex

The simplest and most secure solution is the first option - to include Alpine.js directly in your extension instead of loading it from a CDN.

Response

Content Security Policy (CSP) Error Explanation

This error occurs because your browser extension's Content Security Policy is blocking Alpine.js from loading via an external CDN (unpkg.com).

What this means:

Browser extensions have strict security policies to protect users. The policy directive script-src 'self' 'wasm-unsafe-eval' specifically:

Allows scripts from your extension's own files ('self')
Allows WebAssembly evaluation ('wasm-unsafe-eval')
Does NOT allow scripts from external domains like unpkg.com

Solutions:

Include Alpine.js locally in your extension (recommended):
- Download Alpine.js and save it in your extension's directory
- Update the script reference to use the local file: <script src="alpine.min.js"></script>
Modify the extension's Content Security Policy:
- You could add the CDN to allowed sources in your manifest.json
- However, this is generally discouraged for security reasons
Use the browser.tabs.executeScript API:
- For dynamic script injection (more complex solution)

The simplest and most secure approach is to download Alpine.js and include it directly in your extension files rather than loading it from an external source.

Would you like me to modify the popup files to use a local version of Alpine.js instead?

Me

Sharing:

👀 background.js

files

I followed your first suggestion, and now I have a local copy of alpine.min.js. now I'm getting a slightly different error: Content-Security-Policy: The page’s settings blocked a JavaScript eval (script-src) from being executed because it violates the following directive: “script-src 'self' 'wasm-unsafe-eval'” (Missing 'unsafe-eval')

CodeCompanion (Anthropic)

Reasoning

This new error is a bit different but related to the first. Now that you're using a local copy of Alpine.js, the issue is that Alpine.js itself is trying to use JavaScript's eval() function (or similar evaluation features) internally, but your extension's Content Security Policy doesn't allow it.

The specific error mentions "Missing 'unsafe-eval'" which means Alpine.js is trying to use JavaScript features that require the 'unsafe-eval' directive in your CSP, but your extension's CSP only includes 'self' and 'wasm-unsafe-eval'.

Here are the solutions to this problem:

Add 'unsafe-eval' to your extension's Content Security Policy in the manifest.json file. This would look something like:

"content_security_policy": "script-src 'self' 'unsafe-eval' 'wasm-unsafe-eval'; object-src 'self'"

However, there's a catch: Manifest V3 extensions (the newer format) don't allow 'unsafe-eval' in the CSP because it's considered a security risk. If you're using Manifest V3, you'll need a different approach.

Use Alpine.js without eval: Alpine.js has a version specifically built for environments where eval is not allowed. This version is sometimes referred to as the "CSP build" or "no-eval build".
Switch to a different framework that doesn't rely on eval() internally. Frameworks like Preact, lit-html, or some versions of Vue can work without eval.

Let me explain these options so you can make an informed decision:

Response

Alpine.js CSP Eval Restriction Issue

This new error indicates that Alpine.js is trying to use JavaScript eval() or similar evaluation features internally, but your extension's Content Security Policy doesn't allow it.

What's happening:

The error specifically mentions "Missing 'unsafe-eval'" which means:

Alpine.js requires JavaScript's dynamic evaluation capabilities
Your extension's CSP only allows 'self' and 'wasm-unsafe-eval', but not 'unsafe-eval'

Solutions:

Use Alpine.js CSP build (recommended):
- Alpine.js provides a special CSP-compatible build that doesn't use eval
- Download the file named alpine.js (not alpine.min.js) from their CDN or GitHub
- This version is specifically designed for environments with strict CSPs
Modify manifest.json (if using Manifest V2):
```
"content_security_policy": "script-src 'self' 'unsafe-eval' 'wasm-unsafe-eval'; object-src 'self'"
```
Note: This won't work in Manifest V3 extensions, which don't allow 'unsafe-eval'
Switch to a different framework:
- Consider using Preact, lit-html, or other frameworks designed to work without eval
- These alternatives are more CSP-friendly out of the box

The safest and most straightforward approach is to use Alpine's CSP-compatible build, which is designed specifically for environments like browser extensions.

Would you like me to help you implement one of these solutions?

Me

Sharing:

👀 background.js

files

the error is gone, but I'm still getting the following warning: Alpine Error: Alpine is unable to interpret the following expression using the CSP-friendly build: "playlistManager"

because of this, the playlists don't render.

CodeCompanion (Anthropic)

Reasoning

This error indicates that you're now using the CSP-friendly build of Alpine.js, but there's an issue with how Alpine is trying to interpret the playlistManager expression.

In the CSP-friendly build of Alpine.js, there are limitations on how data and functions can be defined and accessed. The typical x-data="playlistManager" approach doesn't work in the CSP-friendly build because it tries to evaluate the string "playlistManager" as code.

Here's how we need to fix it:

Instead of using the Alpine.data('playlistManager', ...) approach, we need to directly define the data object in the HTML using a function or directly in the x-data attribute.
We'll modify the popup.html file to use the inline approach for defining the data.
We'll also need to modify the popup.js file to expose the required functions without relying on the Alpine.data registration.

Let's update both files:

Response

Alpine CSP-Build Expression Issue

The CSP-friendly build of Alpine.js has limitations on how data is initialized. The error occurs because the CSP-friendly build cannot interpret string references like x-data="playlistManager", as this would require evaluation.

Solution:

We need to modify our approach to use direct object initialization instead of named components:

Replace Alpine.data with direct initialization:
- Instead of Alpine.data('playlistManager', () => ({...}))
- Use x-data with a directly defined object: x-data="{...}"
Make all functions available globally or inline:
- Define functions directly in the x-data object
- Or make them available on the window object

Here's how to fix it:

// popup.js - new approach
window.playlistApp = {
  playlists: {},
  
  async init() {
    await this.loadPlaylists();
  },
  
  async loadPlaylists() {
    try {
      const result = await browser.storage.local.get("playlists");
      this.playlists = result.playlists || {};
    } catch (error) {
      console.error("Error loading playlists:", error);
    }
  },
  
  formatPlaylistName(name) {
    return name
      .split('-')
      .map(part => part.charAt(0).toUpperCase() + part.slice(1))
      .join(' - ');
  },
  
  openVideo(url) {
    browser.tabs.create({ url });
  },
  
  async removeVideo(playlistName, index) {
    // Implementation remains the same
  }
};

<!-- In popup.html -->
<div id="app" x-data="window.playlistApp" x-init="init()">
  <!-- Rest of your template -->
</div>

This approach avoids string evaluation by using direct object references that are CSP-compliant, while maintaining the same functionality.

Would you like me to provide the complete updated files?

Me

Sharing:

👀 background.js

files

2025-03-31-6-claude-popup-window-initialization.md 29 KB Permalink Histórico Raw

Me

CodeCompanion (Anthropic)

Reasoning

Response

Me

CodeCompanion (Anthropic)

Reasoning

Response

Content Security Policy (CSP) Error Explanation

What this means:

Solutions:

Me

CodeCompanion (Anthropic)

Reasoning

Response

Alpine.js CSP Eval Restriction Issue

What's happening:

Solutions:

Me

CodeCompanion (Anthropic)

Reasoning

Response

Alpine CSP-Build Expression Issue

Solution:

Me

2025-03-31-6-claude-popup-window-initialization.md 29 KB

Permalink Histórico Raw