2.7.1 load content script by URL on chrome and inline for firefox

Closes #450
chore: increase cypress retries (#448)

Author: HugoDF

README.md

@@ -14,14 +14,15 @@ Due to Chrome's Manifest v3 rollout, the extension had to be rewritten. As part
 - ✅ Highlight component in page on hover
 - ✅ Component data in console globals
 - ✅ High performance on nested data objects (🆕️, tested on ~10k data properties)
+- ✅ Component filtering (🆕)
 
 **Early Access** includes:
 
 - ✅ Store state viewing/editing (🆕)
 - ✅ Store data in console globals (🆕)
 - ✅ Warnings tab (inc. Alpine v3 support)
 - ✅ Jump to root element/scroll element into view (🆕)
-- 🔜 Time travel debugging of $data (🆕)
+- ✅ Time travel debugging of $data (🆕)
 
 # Alpine.js devtools
 

packages/browser-extension/cypress.config.js

@@ -5,7 +5,7 @@ export default defineConfig({
   fixturesFolder: false,
   chromeWebSecurity: false,
   retries: {
-    runMode: 1,
+    runMode: 2,
   },
 
   e2e: {

packages/browser-extension/manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "Alpine.js devtools - Early Access",
   "description": "DevTools extension for debugging Alpine.js applications.",
-  "version": "2.7.0",
+  "version": "2.7.1",
   "manifest_version": 3,
   "icons": {
     "16": "icons/16.png",

packages/browser-extension/package.json

@@ -1,7 +1,7 @@
 {
   "name": "browser-extension",
   "private": true,
-  "version": "2.7.0",
+  "version": "2.7.1",
   "description": "Alpine.js devtools with Chrome manifest v3 compatibility",
   "type": "module",
   "scripts": {

packages/browser-extension/src/scripts/content.ts

@@ -3,11 +3,17 @@ import { CONTENT } from '../devtools/ports';
 function loadScriptInRealWorld(path: string) {
   return new Promise(async (resolve, reject) => {
     const script = document.createElement('script');
-    // Was originally:
-    // script.src = chrome.runtime.getURL(path)
-    // which causes issues on sites with CSPs, see:
-    // https://github.com/alpine-collective/alpinejs-devtools/issues/445
-    script.innerHTML = await fetch(chrome.runtime.getURL(path)).then((res) => res.text());
+
+    const scriptPath = chrome.runtime.getURL(path);
+    if (scriptPath.startsWith('chrome-extension://')) {
+      script.src = chrome.runtime.getURL(path);
+    } else {
+      // On Firefox, loading from the extension path causes issues with
+      // with CSPs, see:
+      // https://github.com/alpine-collective/alpinejs-devtools/issues/445
+      script.innerHTML = await fetch(scriptPath).then((res) => res.text());
+    }
+
     script.type = 'module';
 
     script.addEventListener('error', (err) => reject(err));