Initial Commit

Author: Balwant Singh 🚀

README.md

@@ -0,0 +1,78 @@
+# Feature Flag Chrome Plugin
+
+Chrome Plugin to manage Feature Flags on any supported web app.
+
+Chrome Web Store Link : **TBC**
+
+---
+
+## Adding Feature Flag Support to your web app
+
+To enable chrome plugins on your web app you need to register your feature flags from your app code.
+
+To register, call the `featureFlagsPluginRegister` function on your window object.
+
+```javascript
+function featureFlagsPluginRegister(flags, listener);
+```
+
+Example:
+
+```javascript
+// Somewhere in you app's JS code
+
+// Declare Flags
+const flags = [
+  {
+    key: 'flag.one'
+    value: true, // current / initial state of feature flags in you app.
+    description: 'First feature description', // Optional
+    title: 'First feature', // Optional - If not passed, key will be used.
+  },
+  {
+    key: 'flag.two'
+    value: true, // current / initial state of feature flags in you app.
+    description: 'Second feature description', // Optional
+    title: 'Second feature', // Optional - If not passed, key will be used.
+  }
+];
+
+// This function will be called whenever a change happens in Chrome extension
+function listener(key, value) {
+    // Feature flag with key change and update value is in value.
+
+    // Make your changes in your app
+    toggleFeatureFlag(key, value);
+    updateApp();
+}
+
+
+// Register Feature Flags with plugin
+if (window.featureFlagsPluginRegister) {
+  window.featureFlagsPluginRegister(flags, listener);
+}
+```
+
+---
+
+### Testing Snippet
+
+```javascript
+window.featureFlagsPluginRegister(
+  [
+    {
+      key: 'flag.one',
+      value: true,
+      description: 'First feature description',
+      title: 'First feature',
+    },
+    {
+      key: 'flag.two',
+      value: true,
+      description: 'Second feature description',
+      title: 'Second feature',
+    },
+  ],
+  (key, value) => console.log('KV Received', key, value)
+);
+```

plugin/background.js

@@ -0,0 +1,28 @@
+chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
+  // We only accept messages from ourselves
+  switch (message.type) {
+    case 'REGISTER_FLAGS':
+        chrome.storage.local.set({[`${sender.tab.windowId}_${sender.tab.id}`] : message.flags})
+      break;
+  
+    case 'FLAG_UPDATED':
+      chrome.tabs.sendMessage(parseInt(message.tab, 10), message);
+
+      chrome.storage.local.get(`${message.win}_${message.tab}`, value => {
+        let flags = value[`${message.win}_${message.tab}`];
+        for (let fIdx = 0; fIdx < flags.length; fIdx++) {
+          const flag = flags[fIdx];
+          if (flag.key === message.key) {
+            flag.value = message.value;
+          }
+        }
+        chrome.storage.local.set({[`${message.win}_${message.tab}`] : flags})
+      })
+      break;
+  
+    default:
+      console.debug('Default case called in BG SVC', message, sender);
+      break;
+  }
+  return true;
+});

plugin/content-script.js

@@ -0,0 +1,46 @@
+;(function() {
+
+  chrome.runtime.onMessage.addListener(function (event) {
+    var injected = document.documentElement.appendChild(document.createElement('script'));
+    injected.text = '(' + function(key, value) {
+      if(window.featureFlagsPluginConfig && window.featureFlagsPluginConfig.listener) {
+        window.featureFlagsPluginConfig.listener(key, value)
+      }
+    } + `)('${event.key}', ${event.value})`;
+    injected.remove();
+  })
+
+  window.addEventListener("message", function(event) {
+    // We only accept messages from ourselves
+    if (event.source != window)
+    return;
+    
+    if (event.data.type && (event.data.type == "REGISTER_FLAGS")) {
+      chrome.runtime.sendMessage(event.data);
+    }
+  }, false);
+
+    function script() {
+      window.featureFlagsPluginConfig = {
+        listener: () => {},
+      }
+      function featureFlagsPluginRegister(flags, listener) {
+          console.debug('Register Called with', flags, listener);
+          window.postMessage({ type: "REGISTER_FLAGS", flags: flags }, "*");
+          window.featureFlagsPluginConfig.listener = listener;
+      }
+      window.featureFlagsPluginRegister = featureFlagsPluginRegister;
+      window.addEventListener('message', event => {
+
+      });
+      console.info('featureFlagsPluginRegister Registered :)');
+    }
+  
+    function inject(fn) {
+      const script = document.createElement('script')
+      script.text = `(${fn.toString()})();`
+      document.documentElement.appendChild(script)
+    }
+  
+    inject(script)
+  })()

plugin/images/switch128.png

@@ -0,0 +1,42 @@
+{
+    "name": "Feature Flags",
+    "version": "1.0",
+    "description": "Chrome Extension to manage Feature Flags in supported web apps",
+    "permissions": [
+        "tabs",
+        "activeTab",
+        "storage"
+    ],
+    "background": {
+        "scripts": [
+            "background.js"
+        ],
+        "persistent": false
+    },
+    "content_scripts": [
+        {
+            "matches": [
+                "<all_urls>"
+            ],
+            "js": [
+                "content-script.js"
+            ]
+        }
+    ],
+    "browser_action": {
+        "default_popup": "popup.html",
+        "default_icon": {
+            "16": "images/switch16.png",
+            "32": "images/switch32.png",
+            "48": "images/switch48.png",
+            "128": "images/switch128.png"
+        }
+    },
+    "icons": {
+        "16": "images/switch16.png",
+        "32": "images/switch32.png",
+        "48": "images/switch48.png",
+        "128": "images/switch128.png"
+    },
+    "manifest_version": 2
+}

plugin/images/switch16.png

@@ -0,0 +1,75 @@
+<html>
+
+<head>
+    <style>
+        body {
+            min-width: 340px;
+            padding: 20px;
+        }
+
+        td {
+            padding-bottom: 20px;
+            font-size: 12px;
+        }
+
+        strong {
+            font-size: 14px;
+        }
+
+        input[type=checkbox] {
+            height: 0;
+            width: 0;
+            visibility: hidden;
+        }
+
+        label {
+            cursor: pointer;
+            text-indent: -9999px;
+            width: 40px;
+            height: 20px;
+            background: grey;
+            display: block;
+            border-radius: 20px;
+            position: relative;
+        }
+
+        label:after {
+            content: '';
+            position: absolute;
+            top: 1px;
+            left: 1px;
+            width: 18px;
+            height: 18px;
+            background: #fff;
+            border-radius: 18px;
+            transition: 0.3s;
+        }
+
+        input:checked+label {
+            background: #bada55;
+        }
+
+        input:checked+label:after {
+            left: calc(100% - 1px);
+            transform: translateX(-100%);
+        }
+
+        label:active:after {
+            width: 20px;
+        }
+    </style>
+</head>
+
+<body>
+    <h1>Feature Flags</h1>
+    <div id="flags-container">
+        <p>Feature flags not configured. </p>
+        <p>Please see Readme.md : <a target="_blank"
+                href="https://github.com/phenixcoder/feature-flags-chrome-plugin">https://github.com/phenixcoder/feature-flags-chrome-plugin</a>
+        </p>
+    </div>
+    </div>
+    <script src="popup.js"></script>
+</body>
+
+</html>

plugin/images/switch32.png

@@ -0,0 +1,55 @@
+let flagsContainer = document.getElementById('flags-container');
+
+window.onload = function() {
+  chrome.tabs.getSelected(null,function(tab) {
+    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) {
+  return `
+    <table width="100%">
+      ${flags.map(flag => `
+      <tr>
+        <td>
+          <strong>${flag.title}</strong><br />
+          ${flag.description}
+        </td>
+        <td valign="top">
+          <input type="checkbox" id="${flag.key}" windowId="${winId}" tabId="${tabId}" class="checks" name="${flag.key}" ${flag.value ? 'checked' : ''} />
+          <label for="${flag.key}">${flag.title}</label>
+        </td>
+      </tr>
+      `).join('')}
+    </table>
+  `;
+  
+}