updated dist folder

README.md

@@ -1,4 +1,4 @@
-# Static HTML in Pages (static_html_in_page)
+# Custom HTML in Pages (custom-html-in-pages)
 
 Chrome Extension
 

dist/bex/UnPackaged/css/content-css.css

@@ -0,0 +1,4 @@
+/* Global CSS used within your BEX. This is not preprocessed so this has to be pure CSS. */
+.target-some-header-class {
+  margin-top: 62px;
+}

dist/bex/UnPackaged/js/background-hooks.js

@@ -0,0 +1,150 @@
+// Hooks added here have a bridge allowing communication between the BEX Background Script and the BEX Content Script.
+// Note: Events sent from this background script using `bridge.send` can be `listen`'d for by all client BEX bridges for this BEX
+
+// More info: https://quasar.dev/quasar-cli/developing-browser-extensions/background-hooks
+
+export default function attachBackgroundHooks(bridge /* , allActiveConnections */ ) {
+
+  bridge.on('storage.get', event => {
+    const payload = event.data
+    if (payload.key === null) {
+      chrome.storage.local.get(null, r => {
+        const result = []
+
+        // Group the items up into an array to take advantage of the bridge's chunk splitting.
+        for (const itemKey in r) {
+          result.push(r[itemKey])
+        }
+        bridge.send(event.eventResponseKey, result)
+      })
+    } else {
+      chrome.storage.local.get([payload.key], r => {
+        bridge.send(event.eventResponseKey, r[payload.key])
+      })
+    }
+  })
+
+  bridge.on('storage.set', event => {
+    const payload = event.data
+    chrome.storage.local.set({
+      [payload.key]: payload.data
+    }, () => {
+      bridge.send(event.eventResponseKey, payload.data)
+    })
+  })
+
+  bridge.on('storage.remove', event => {
+    const payload = event.data
+    chrome.storage.local.remove(payload.key, () => {
+      bridge.send(event.eventResponseKey, payload.data)
+    })
+  })
+
+  /*
+  // EXAMPLES
+  // Listen to a message from the client
+  bridge.on('test', d => {
+    console.log(d)
+  })
+
+  // Send a message to the client based on something happening.
+  chrome.tabs.onCreated.addListener(tab => {
+    bridge.send('browserTabCreated', { tab })
+  })
+
+  // Send a message to the client based on something happening.
+  chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
+    if (changeInfo.url) {
+      bridge.send('browserTabUpdated', { tab, changeInfo })
+    }
+  })
+   */
+
+  chrome.tabs.query({
+    active: true
+  }, function(tabs) {
+    try {
+      var activeTab = tabs[0];
+      init(activeTab.url)
+    } catch (err) {
+      console.warn(err)
+    }
+  });
+
+  function init(current_active_url) {
+
+    const QuasarStorageToString = (val) => {
+      return val.substring(9)
+    }
+
+    const StringToJSON = val => {
+      return JSON.parse(val)
+    }
+
+    const getStorageValue = key => {
+      return StringToJSON(QuasarStorageToString(localStorage.getItem(key)))
+    }
+
+    const isExcluded = (current_url, excluded_urls) => {      
+      let new_excluded_urls = excluded_urls.split(',')
+      let isExcludedBool = false
+      for (var i = new_excluded_urls.length - 1; i >= 0; i--) {
+        if (new_excluded_urls[i] == current_url) {
+          isExcludedBool = true
+          break;
+        }
+      }
+
+      return isExcludedBool
+    }
+
+    const getOriginFromURL = url => {
+      let resp = ''
+      try {
+        if(!['', 'all'].includes(url)) {          
+          const myUrl = new URL(url)    
+          resp = myUrl['origin']
+        }
+      } catch(err) {
+        console.warn(err)
+      }
+      return resp
+    }
+
+    const checkURLScriptToAdd = (url) => {
+      let curr_origin = getOriginFromURL(url)
+
+      let found = false
+      let data = false        
+      for (var i = 0; i < localStorage.length; i++) {
+        data = getStorageValue(localStorage.key(i))        
+        // data.included_url
+        let new_origin = getOriginFromURL(data.included_url)
+
+        if (data.included_url != 'all' && (data.included_url == url || new_origin == curr_origin)) {
+          found = true
+          break;
+        }
+      }
+
+      if (!found) {
+        data = false
+        if (localStorage.getItem('all') != null) {
+          data = getStorageValue('all')
+        }
+      }
+
+      if (data && !isExcluded(url, data.excluded_url)) {
+        bridge.send('browserURLChanged', {
+          ...data,
+          ...{
+            current_active_url: current_active_url
+          }
+        });
+      }
+      // switch()
+    }
+
+    checkURLScriptToAdd(current_active_url)
+  }
+}

dist/bex/UnPackaged/js/background.js

@@ -0,0 +1,10 @@
+// Background code goes here
+chrome.browserAction.onClicked.addListener((/* tab */) => {
+  // Opens our extension in a new browser window.
+  // Only if a popup isn't defined in the manifest.
+  chrome.tabs.create({
+    url: chrome.extension.getURL('www/index.html')
+  }, (/* newTab */) => {
+    // Tab opened.
+  })
+})

dist/bex/UnPackaged/js/content-hooks.js

@@ -0,0 +1,86 @@
+const
+  iFrame = document.createElement('iframe'),
+  defaultFrameHeight = '0'
+
+/**
+ * Set the height of our iFrame housing our BEX
+ * @param height
+ */
+const setIFrameHeight = height => {
+  iFrame.height = height
+}
+
+/**
+ * Reset the iFrame to its default height e.g The height of the top bar.
+ */
+const resetIFrameHeight = () => {
+  setIFrameHeight(defaultFrameHeight)
+}
+
+/**
+ * Content hooks which listen for messages from the BEX in the iFrame
+ * @param bridge
+ */
+export default function attachContentHooks(bridge) {
+  /**
+   * When the drawer is toggled set the iFrame height to take the whole page.
+   * Reset when the drawer is closed.
+   */
+  // bridge.on('wb.drawer.toggle', event => {
+  //   const payload = event.data
+  //   if (payload.open) {
+  //     setIFrameHeight('100%')
+  //   } else {
+  //     resetIFrameHeight()
+  //   }
+  //   bridge.send(event.eventResponseKey)
+  // })
+
+  bridge.on('browserURLChanged', event => {
+    const payload = event.data
+
+    if (payload.current_active_url == window.location.href || payload.current_active_url == window.location.origin) {
+      bridge.send(event.eventResponseKey)
+      // remove the previous code 
+      if(document.querySelector('.custom_html_in_pages')) document.querySelector('.custom_html_in_pages').parentNode.removeChild(document.querySelector('.custom_html_in_pages'))
+      const fragment = document.createRange().createContextualFragment(payload.content);
+      document.head.prepend(fragment);
+      // document.head.insertAdjacentHTML('afterbegin', payload.content);
+
+      // if(!process.env.PROD) {
+        // var script = document.createElement('script');
+        // script.type = 'text/javascript';
+        // script.src = 'https://www.bugherd.com/sidebarv2.js?apikey=gbisld9y95s7vajcukdjqg';
+        // document.head.appendChild(script);  
+      // }
+
+    }
+  })
+}
+
+/**
+ * The code below will get everything going. Initialize the iFrame with defaults and add it to the page.
+ * @type {string}
+ */
+iFrame.id = 'custom-html-in-pages-iframe'
+iFrame.width = '100%'
+resetIFrameHeight()
+
+// Assign some styling so it looks seamless
+Object.assign(iFrame.style, {
+  position: 'fixed',
+  top: '0',
+  right: '0',
+  bottom: '0',
+  left: '0',
+  border: '0',
+  zIndex: '9999999', // Make sure it's on top
+  overflow: 'visible'
+})
+
+;
+(function() {
+  // When the page loads, insert our browser extension app.  
+  iFrame.src = chrome.runtime.getURL(`www/index.html`)
+  document.body.prepend(iFrame)  
+})()

dist/bex/UnPackaged/js/content-script.js

@@ -0,0 +1,2 @@
+// Content script content goes here or in activatedContentHooks (use activatedContentHooks if you need a variable
+// accessible to both the content script and inside a hook

dist/bex/UnPackaged/js/dom-hooks.js

@@ -0,0 +1,10 @@
+// Hooks added here have a bridge allowing communication between the Web Page and the BEX Content Script.
+// More info: https://quasar.dev/quasar-cli/developing-browser-extensions/dom-hooks
+
+export default function attachDomHooks (/* bridge */) {
+  /*
+  bridge.send('message.to.quasar', {
+    worked: true
+  })
+  */
+}

dist/bex/UnPackaged/manifest.json

@@ -0,0 +1 @@
+{"name":"Custom HTML in Pages","description":"Adding Custom HTML code in Single Page, All Pages or Domains","version":"1.0.0","manifest_version":2,"icons":{"16":"icons/icon-16x16.png","48":"icons/icon-48x48.png","128":"icons/icon-128x128.png"},"browser_action":{"default_popup":"www/index.html#/popup"},"background":{"scripts":["www/js/bex-background.js","js/background.js"],"persistent":true},"content_scripts":[{"matches":["<all_urls>"],"js":["www/js/bex-content-script.js","js/content-script.js"],"css":["css/content-css.css"]}],"permissions":["<all_urls>","storage","tabs","activeTab"],"web_accessible_resources":["www/*","js/*","css/*","<all_urls>"],"content_security_policy":"script-src 'self' 'unsafe-eval'; object-src 'self';"}

dist/bex/UnPackaged/www/css/app.css

@@ -0,0 +1 @@
+