playlist-extension/2025-05-28-codemcp-fix-import-button-functionality.md

2025-05-28 - codemcp - fix import button functionality

User Request

the "import" button (at the bottom of the popup menu) doesn't seem to work. it might be due to a javascript expression in the html code (not CSP-compliant), and/or it might be that the import code is wrong (the former is more likely).

Problem Identified

The import button issue was caused by a CSP-violating JavaScript expression in the HTML file. On line 238 of popup.html, there was:

@change="importFile($event)"

This violates the Content Security Policy (CSP) that requires all Alpine.js code to be CSP-compliant, meaning no JavaScript expressions in HTML attributes.

Solution Applied

1. Added CSP-compliant binding in popup.js: Created a new importFileInput binding object that handles the change event:

   importFileInput: {
    ["@change"]() {
      this.importFile(this.$event);
    },
   },
   

2. Updated HTML to use binding: Replaced the CSP-violating inline JavaScript with the Alpine.js x-bind directive:

   x-bind="importFileInput"
   

Files Modified

• popup/popup.js: Added importFileInput binding object with change event handler
• popup/popup.html: Replaced @change="importFile($event)" with x-bind="importFileInput"

Result

The import button should now work correctly without violating CSP policies. The functionality remains the same - clicking the "Import Playlists" button will open a file dialog, and selecting a JSON file will trigger the import process.