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

@@ -3,16 +3,15 @@
  */
 
 //Handle request from devtools
-chrome.extension.onConnect.addListener(function(port) {
-
-    //Listening to the extension page.
+chrome.runtime.onConnect.addListener(function(port) {
+    // Listening to the extension page.
     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) {
+    chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
         // Sending to the extension page.
         port.postMessage(message);
     });
@@ -27,20 +26,17 @@ let hasAPIs = chrome.webRequest;
 /**
  * Responds to clicks on the extension's icon. Toggles debug mode.
  */
-chrome.browserAction.onClicked.addListener((tab) => {
-
+chrome.action.onClicked.addListener((tab) => {
     debug = !debug;
-    chrome.browserAction.setTitle({
+    chrome.action.setTitle({
         title: debug ? 'Sidecar Debug: ON' : 'Sidecar Debug: OFF'
     });
-    // chrome.browserAction.setIcon({
-    //     path: debug ? 'icon-on.png' : 'icon-off.png'
-    // });
-    chrome.browserAction.setBadgeText({
+    chrome.action.setBadgeText({
         text: debug ? 'ON' : ''
     });
 
-    chrome.tabs.update(tab.id, {url: tab.url, selected: tab.selected}, null);
+    chrome.tabs.update(tab.id, {url: tab.url, active: true});
+    chrome.tabs.reload();
 
     // webRequest handlers changed (solves caching issues)
     hasAPIs && chrome.webRequest.handlerBehaviorChanged();
@@ -55,8 +51,9 @@ hasAPIs && chrome.webRequest.onCompleted.addListener((details) => {
         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/manifest.json

@@ -1,28 +1,32 @@
 {
-    "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",
+        "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 +42,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';"
+    }
 }