No feature flags found for this page.
+See documentation for setup instructions.
+ `; + } + return `|
- ${flag.title} - ${flag.description} + ${flag.title || flag.key} + ${flag.description || ''} |
- + |
+ Feature Flags
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/popup.ts b/src/popup.ts
new file mode 100644
index 0000000..bc18cba
--- /dev/null
+++ b/src/popup.ts
@@ -0,0 +1,109 @@
+import type { FeatureFlag, FlagChangeEvent, StorageData } from './types';
+
+const flagsContainer = document.getElementById('flags-container') as HTMLElement;
+
+window.onload = function (): void {
+ // Replace deprecated chrome.tabs.getSelected with chrome.tabs.query
+ chrome.tabs.query(
+ { active: true, currentWindow: true },
+ (tabs: chrome.tabs.Tab[]): void => {
+ const tab = tabs[0];
+ if (!tab.windowId || !tab.id) {
+ console.error('Unable to get tab information');
+ return;
+ }
+
+ const storageKey = `${tab.windowId}_${tab.id}`;
+ chrome.storage.local.get(storageKey, (result: StorageData): void => {
+ const flags = result[storageKey];
+ flagsContainer.innerHTML = renderTable(flags, tab.windowId!, tab.id!);
+ bindEvents();
+ });
+ }
+ );
+};
+
+function bindEvents(): void {
+ const checks = document.getElementsByClassName('checks') as HTMLCollectionOfFeature flags not configured.
+Please see Readme.md : https://github.com/phenixcoder/feature-flags-chrome-plugin +
+No feature flags found for this page.
+See documentation for setup instructions.
+ `; + } + + return ` +|
+ ${escapeHtml(flag.title || flag.key)} + ${escapeHtml(flag.description || '')} + |
+ + + + | +
๐งน Logs cleared
';
+}
+
+// Initialize the application
+function initializeApp() {
+ log('๐ Feature Flags Test App initialized', 'info');
+ log('๐ก Instructions:', 'info');
+ log('1. Build and load the Feature Flags extension', 'info');
+ log('2. Refresh this page', 'info');
+ log('3. Click "Test Direct Registration" or wait for auto-registration', 'info');
+ log('4. Open the extension popup to toggle flags', 'info');
+
+ // Initialize UI with default flag values
+ featureFlags.forEach(flag => {
+ updateFeatureUI(flag.key, flag.value);
+ });
+
+ // Check if extension is already available
+ setTimeout(() => {
+ if (window.featureFlagsPluginRegister && !flagsRegistered) {
+ log('๐ Extension detected on page load', 'info');
+ testDirectRegistration();
+ } else if (!flagsRegistered) {
+ log('โณ Setting up race condition handler...', 'info');
+ testRaceConditionMethod();
+ }
+ }, 1000);
+}
+
+// Start the application when DOM is ready
+if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', initializeApp);
+} else {
+ initializeApp();
+}
diff --git a/test-app/index.html b/test-app/index.html
new file mode 100644
index 0000000..26517a6
--- /dev/null
+++ b/test-app/index.html
@@ -0,0 +1,173 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/test-app/server.js b/test-app/server.js
new file mode 100755
index 0000000..b0ec25b
--- /dev/null
+++ b/test-app/server.js
@@ -0,0 +1,85 @@
+#!/usr/bin/env node
+/**
+ * Simple HTTP server for testing the Feature Flags Chrome Extension
+ * Usage: node server.js [port]
+ * Default port: 8000
+ */
+
+const http = require('http');
+const fs = require('fs');
+const path = require('path');
+const url = require('url');
+
+// Default port
+const PORT = process.argv[2] || 8000;
+
+// MIME types
+const mimeTypes = {
+ '.html': 'text/html',
+ '.js': 'text/javascript',
+ '.css': 'text/css',
+ '.json': 'application/json',
+ '.png': 'image/png',
+ '.jpg': 'image/jpg',
+ '.gif': 'image/gif',
+ '.svg': 'image/svg+xml',
+ '.wav': 'audio/wav',
+ '.mp4': 'video/mp4',
+ '.woff': 'application/font-woff',
+ '.ttf': 'application/font-ttf',
+ '.eot': 'application/vnd.ms-fontobject',
+ '.otf': 'application/font-otf',
+ '.wasm': 'application/wasm'
+};
+
+const server = http.createServer((req, res) => {
+ const parsedUrl = url.parse(req.url);
+ let pathname = parsedUrl.pathname;
+
+ // Default to index.html
+ if (pathname === '/') {
+ pathname = '/index.html';
+ }
+
+ const filePath = path.join(__dirname, pathname);
+ const ext = path.parse(filePath).ext;
+ const mimeType = mimeTypes[ext] || 'text/plain';
+
+ fs.readFile(filePath, (err, data) => {
+ if (err) {
+ res.writeHead(404, { 'Content-Type': 'text/html' });
+ res.end(`
+
+
+ ๐ฉ Feature Flags Test Application
+ +
+ โ Feature Flags Extension Not Detected
+
+
+ This test application demonstrates integration with the Feature Flags Chrome Extension. + Load the extension and refresh this page to see it in action!
+ +
+
+
+ ๐ Dark Mode
+Toggle between light and dark themes
+ DISABLED +
+
+
+ ๐จ Beta UI Components
+Enable experimental user interface elements
+ DISABLED +
+
+
+ ๐ Advanced Analytics
+Enhanced tracking and reporting features
+ DISABLED +
+
+
+ ๐ Push Notifications
+Real-time browser notifications
+ DISABLED +
+
+
+
+
+
+
+
+ ๐ Application loaded. Waiting for extension...
+ 404 - File Not Found
+The requested file ${pathname} was not found.
- Feature Flags
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/plugin/popup.js b/plugin/popup.js
deleted file mode 100644
index 31164a4..0000000
--- a/plugin/popup.js
+++ /dev/null
@@ -1,61 +0,0 @@
-let flagsContainer = document.getElementById('flags-container');
-
-window.onload = function() {
- // Replace deprecated chrome.tabs.getSelected with chrome.tabs.query
- chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
- const tab = tabs[0];
- chrome.storage.local.get(`${tab.windowId}_${tab.id}`, (value) => {
- flagsContainer.innerHTML = renderTable(value[`${tab.windowId}_${tab.id}`], tab.windowId, tab.id);
- bindEvents();
- });
- });
-}
-
-function bindEvents() {
- var checks = document.getElementsByClassName('checks');
- if (checks.length) {
- for (let cIdx = 0; cIdx < checks.length; cIdx++) {
- const check = checks[cIdx];
- if (check) {
- check.addEventListener('change', checkChanged)
- }
- }
- }
-}
-
-function checkChanged(event) {
- var check = event.target;
- chrome.runtime.sendMessage({
- type: 'FLAG_UPDATED',
- key: check.getAttribute('name'),
- tab: check.getAttribute('tabId'),
- win: check.getAttribute('windowId'),
- value: check.checked
- });
-}
-
-function renderTable(flags, winId, tabId) {
- if (!flags || !Array.isArray(flags)) {
- return `
- Feature flags not configured.
-Please see Readme.md : https://github.com/phenixcoder/feature-flags-chrome-plugin -
-No feature flags found for this page.
-See documentation for setup instructions.
- `; - } - - return ` -|
- ${flag.title || flag.key} - ${flag.description || ''} - |
- - - - | -