Add support for Chrome extension manifest v3

src/css/foundation.css

@@ -59,7 +59,7 @@ body {
   color: #222;
   padding: 0;
   margin: 0;
-  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+  font-family: "Inter", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
   font-weight: normal;
   font-style: normal;
   line-height: 1.5;
@@ -1144,7 +1144,7 @@ button, .button {
   border-style: solid;
   border-width: 0;
   cursor: pointer;
-  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+  font-family: "Inter", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
   font-weight: normal;
   line-height: normal;
   margin: 0 0 1.25rem;
@@ -1567,7 +1567,7 @@ select {
   border-color: #cccccc;
   padding: 0.5rem;
   font-size: 0.875rem;
-  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+  font-family: "Inter", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
   color: rgba(0, 0, 0, 0.75);
   line-height: normal;
   border-radius: 0;
@@ -1829,7 +1829,7 @@ meta.foundation-mq-topbar {
       color: #FFFFFF;
       padding: 12px 0 12px 0;
       padding-left: 0.9375rem;
-      font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+      font-family: "Inter", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
       font-size: 0.8125rem;
       font-weight: normal;
       text-transform: none; }
@@ -2838,15 +2838,15 @@ meta.foundation-mq-topbar {
     color: #EEEEEE;
     font-weight: normal;
     font-size: 1rem;
-    font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; }
+    font-family: "Inter", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; }
   .pricing-table .price {
     background-color: #F6F6F6;
     padding: 0.9375rem 1.25rem;
     text-align: center;
     color: #333333;
     font-weight: normal;
     font-size: 2rem;
-    font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; }
+    font-family: "Inter", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; }
   .pricing-table .description {
     background-color: #FFFFFF;
     padding: 0.9375rem;
@@ -3292,7 +3292,7 @@ meta.foundation-mq-topbar {
       background-color: #EFEFEF;
       color: #222222;
       padding: 1rem 2rem;
-      font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+      font-family: "Inter", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
       font-size: 1rem; }
       .tabs dd > a:hover, .tabs .tab-title > a:hover {
         background-color: #e1e1e1; }
@@ -3409,7 +3409,7 @@ ul.pagination {
   padding: 0.875rem 0;
   list-style-type: none;
   list-style-position: outside;
-  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; }
+  font-family: "Inter", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; }
   .side-nav li {
     margin: 0 0 0.4375rem 0;
     font-size: 0.875rem;
@@ -3425,7 +3425,7 @@ ul.pagination {
     .side-nav li.active > a:first-child:not(.button) {
       color: #1cc7ff;
       font-weight: normal;
-      font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; }
+      font-family: "Inter", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; }
     .side-nav li.divider {
       border-top: 1px solid;
       height: 0;
@@ -3455,7 +3455,7 @@ ul.pagination {
       color: #222222;
       padding: 1rem;
       display: block;
-      font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+      font-family: "Inter", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
       font-size: 1rem; }
       .accordion .accordion-navigation > a:hover, .accordion dd > a:hover {
         background: #e3e3e3; }
@@ -3649,7 +3649,7 @@ p {
 
 /* Default header styles */
 h1, h2, h3, h4, h5, h6 {
-  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+  font-family: "Inter", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
   font-weight: normal;
   font-style: normal;
   color: #222222;
@@ -4348,7 +4348,7 @@ blockquote p {
     float: left;
     margin-left: 1rem;
     margin-bottom: 0;
-    font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+    font-family: "Inter", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
     font-weight: normal;
     font-size: 0.875rem;
     color: #999999; }
@@ -4532,7 +4532,7 @@ blockquote p {
       right: auto; } }
 .label {
   font-weight: normal;
-  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+  font-family: "Inter", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
   text-align: center;
   text-decoration: none;
   line-height: 1;

src/js/background.js

@@ -2,61 +2,79 @@
  * Copyright (c) 2015 SugarCRM Inc. Licensed by SugarCRM under the Apache 2.0 license.
  */
 
-//Handle request from devtools
-chrome.extension.onConnect.addListener(function(port) {
-
-    //Listening to the extension page.
+// Handle requests from devtools panel.
+chrome.runtime.onConnect.addListener(function(port) {
+    // Forward panel messages to the content script.
     port.onMessage.addListener(function(message) {
-        // Sending to the content script.
         chrome.tabs.sendMessage(message.tabId, message);
     });
 
-    // Listening to the content script messages.
-    chrome.runtime.onMessage.addListener(function(message,sender,sendResponse) {
-        // Sending to the extension page.
+    // Forward content script messages to the panel.
+    // Keep a named reference so we can remove it when the panel closes.
+    function onRuntimeMessage(message) {
         port.postMessage(message);
+    }
+    chrome.runtime.onMessage.addListener(onRuntimeMessage);
+
+    port.onDisconnect.addListener(function() {
+        chrome.runtime.onMessage.removeListener(onRuntimeMessage);
     });
 });
 
 /**
- * Holds the state of debug mode. True means we should debug the page.
+ * In-memory cache of debug mode state, seeded from storage on every SW load.
+ * chrome.storage.session is the persistent source of truth across SW restarts.
+ *
+ * @type {boolean}
  */
 let debug = false;
-let hasAPIs = chrome.webRequest;
+
+const hasAPIs = chrome.webRequest;
+
+/**
+ * Restores badge and title from persisted storage, and seeds the in-memory
+ * cache. Called at top level so it runs on every service worker load.
+ */
+async function restoreDebugState() {
+    const { debug: stored = false } = await chrome.storage.session.get('debug');
+    debug = stored;
+    chrome.action.setTitle({ title: debug ? 'Sidecar Debug: ON' : 'Sidecar Debug: OFF' });
+    chrome.action.setBadgeText({ text: debug ? 'ON' : '' });
+}
+
+restoreDebugState();
 
 /**
  * Responds to clicks on the extension's icon. Toggles debug mode.
  */
-chrome.browserAction.onClicked.addListener((tab) => {
+chrome.action.onClicked.addListener(async (tab) => {
+    if (!tab.id) return;
 
     debug = !debug;
-    chrome.browserAction.setTitle({
-        title: debug ? 'Sidecar Debug: ON' : 'Sidecar Debug: OFF'
-    });
-    // chrome.browserAction.setIcon({
-    //     path: debug ? 'icon-on.png' : 'icon-off.png'
-    // });
-    chrome.browserAction.setBadgeText({
-        text: debug ? 'ON' : ''
-    });
 
-    chrome.tabs.update(tab.id, {url: tab.url, selected: tab.selected}, null);
+    // Persist before reloading so the webRequest listener reads the updated value.
+    await chrome.storage.session.set({ debug });
+
+    chrome.action.setTitle({ title: debug ? 'Sidecar Debug: ON' : 'Sidecar Debug: OFF' });
+    chrome.action.setBadgeText({ text: debug ? 'ON' : '' });
+
+    chrome.tabs.reload(tab.id);
 
-    // webRequest handlers changed (solves caching issues)
+    // Flush webRequest handler cache (resolves caching issues).
     hasAPIs && chrome.webRequest.handlerBehaviorChanged();
 });
 
 hasAPIs && chrome.webRequest.onCompleted.addListener((details) => {
 
-    // if we are in debug mode or the script is actually a sourcemap, skip
-    // the attachment (was probably added already from `sidecar.min.js` or
-    // `sidecar.js`)
-    if (!debug || details.url.indexOf('sidecar.min.js.map') > 0) {
+    // Skip if not in debug mode, if the tab ID is invalid, or if the script is
+    // a sourcemap (already attached from sidecar.min.js or sidecar.js).
+    if (!debug || details.tabId < 0 || details.url.indexOf('sidecar.min.js.map') > 0) {
         return;
     }
 
-    chrome.tabs.executeScript(details.tabId, {
-        file: 'js/debug-mode-injector.js',
+    chrome.scripting.executeScript({
+        target: {tabId: details.tabId},
+        files: ['js/debug-mode-injector.js']
     });
 
 }, {urls: ['*://*/*/sidecar.js*', '*://*/*/sidecar.min.js*']});

src/js/debug-mode-injector.js

@@ -14,7 +14,7 @@
 
     let s = document.createElement('script');
     s.type = 'text/javascript';
-    s.src = chrome.extension.getURL(scriptFiles[i]);
+    s.src = chrome.runtime.getURL(scriptFiles[i]);
 
     $body.append(s);
   }

src/js/inject/sidecar.debug.js

@@ -268,6 +268,14 @@
         };
 
         Debug.prototype._onHookLayoutRender = function() {
+            if (this.disposed) {
+                return;
+            }
+
+            if (_.isUndefined(_components[this.cid])) {
+                _.bind(Sidecar.Debug.prototype._onHookLayoutInitialize, this)();
+            }
+
             this.$el.attr('data-debug-cid', this.cid);
             _components[this.cid].renderCount = _components[this.cid].renderCount ? ++_components[this.cid].renderCount : 1;
             var performance = Array.prototype.slice.call(arguments, -1).pop();
@@ -289,6 +297,14 @@
         };
 
         Debug.prototype._onHookViewRender = function() {
+            if (this.disposed) {
+                return;
+            }
+
+            if (_.isUndefined(_components[this.cid])) {
+                _.bind(Sidecar.Debug.prototype._onHookViewInitialize, this)();
+            }
+
             this.$el.attr('data-debug-cid', this.cid);
             _components[this.cid].renderCount = _components[this.cid].renderCount ? ++_components[this.cid].renderCount : 1;
 
@@ -330,6 +346,14 @@
         };
 
         Debug.prototype._onHookFieldRender = function() {
+            if (this.disposed) {
+                return;
+            }
+
+            if (_.isUndefined(_components[this.cid])) {
+                _.bind(Sidecar.Debug.prototype._onHookFieldInitialize, this)();
+            }
+
             var parent = this.parent ? 'parent' : 'view';
 
             _components[this.cid].renderCount = _components[this.cid].renderCount ?++_components[this.cid].renderCount : 1;

src/js/page.js

@@ -238,12 +238,14 @@
         },
 
         consoleActivityArgs: function(id) {
-            var act = window.SUGAR.App.debug.AppStream.get(id);
+            var SugarApp = (window.SUGAR && window.SUGAR.App) || window.App;
+            var act = SugarApp.debug.AppStream.get(id);
             console.log(act.get('args'));
         },
 
         consoleActivityComponent: function(id) {
-            var act = window.SUGAR.App.debug.AppStream.get(id);
+            var SugarApp = (window.SUGAR && window.SUGAR.App) || window.App;
+            var act = SugarApp.debug.AppStream.get(id);
             console.log(act.get('instance'));
         },
 

src/manifest.json

@@ -1,28 +1,33 @@
 {
-    "manifest_version": 2,
+    "manifest_version": 3,
     "name": "Sidecar Debugger Tool",
-    "version": "0.2",
-    "description": "Sidecar Debugger Tool extension helps you debugging Sugar7, for a better productivity and faster development.",
+    "version": "0.3",
+    "description": "Sidecar Debugger Tool extension helps you debugging Sugar 7 and upward, for a better productivity and faster development.",
 
     "icons": {
         "128": "img/sugarcube.png"
     },
 
-    "browser_action": {
+    "action": {
         "default_icon": "img/sugarcube.png"
     },
 
     "devtools_page": "html/devtools.html",
 
     "permissions": [
-        "webRequest",
+        "scripting",
+        "storage",
+        "tabs",
+        "webRequest"
+    ],
+    "host_permissions": [
+        "*://*/*",
         "*://*/*/sidecar.js*",
-        "*://*/*/sidecar.min.js*",
-        "tabs"
+        "*://*/*/sidecar.min.js*"
     ],
 
     "background": {
-        "scripts": ["js/background.js"]
+        "service_worker": "js/background.js"
     },
 
     "content_scripts": [
@@ -38,11 +43,15 @@
     ],
 
     "web_accessible_resources": [
-        "js/inject/sidecar.debug.js"
+        {
+            "resources": ["js/inject/sidecar.debug.js"],
+            "matches": ["<all_urls>"]
+        }
     ],
 
-    "minimum_chrome_version": "50",
-
-    "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
-
+    "minimum_chrome_version": "130",
+    "content_security_policy": {
+        "extension_pages": "script-src 'self'; object-src 'self';",
+        "sandbox": "sandbox allow-scripts allow-forms allow-popups allow-modals; script-src 'self' 'unsafe-inline' 'unsafe-eval'; child-src 'self';"
+    }
 }