migrate to manifest version 3

Author: zendive

README.md

@@ -5,21 +5,58 @@
 Chrome devtools extension intended to display result of deep in-memory object
 comparisons with the help of dedicated console commands.
 
+### Based on
+
+- [jsondiffpatch](https://github.com/benjamine/jsondiffpatch) by Benjamín Eidelman
+- [vuejs](https://github.com/vuejs) by Evan You
+
 ### Features
 
 - compare objects from multiple tabs and/or between page reloads
 - function code included in comparison result in form of a string, may help to see if it was altered
 - document, dom-elements and other non-serializable objects are filtered-out from the results
 - self recurring references displayed only once, the rest of occurrences are filtered-out
 
+### Limitations and workarounds
+
+- some instances of objects may cause exception during preparations for comparison
+  - try to narrow compared contexts
+  - if it's some Browser API that causes an exception and not a framework, consider opening an issue,
+    so it will be possible to solve is on a permanent basis
+- while paused in debug mode, JSDiff panel won't reflect the result until runtime is resumed ([#10][i10])
+
+[i10]: https://github.com/zendive/jsdiff/issues/10
+
 ### API
 
+- **console.diff(left, right)** - compare left and right arguments
+
+```javascript
+console.diff({ a: 1, b: 1, c: 3 }, { a: 1, b: 2, d: 3 });
+```
+
+- **console.diffPush(next)** - shifts sides, right becomes left, next becomes right
+
+```javascript
+console.diffPush(Date.now());
+```
+
+- **console.diff(next)** - shorthand for `diffPush`
+
+```javascript
+console.diff(Date.now());
+```
+
+- **console.diffLeft(left)** - update the old value
+
 ```javascript
-console.diff(left, right); // compare left and right
-console.diff(next); // shorthand of diffPush while single argumented
-console.diffLeft(left); // update object on the left side only
-console.diffRight(right); // update object on the right side only
-console.diffPush(next); // shifts sides, right becomes left, next becomes right
+console.diffLeft(Date.now());
+```
+
+- **console.diffRight(right)** - update the new value
+
+```javascript
+console.diffRight(Date.now());
 ```
 
 ### Usage basics
@@ -30,25 +67,16 @@ Historically, left side represents the old state and right side the new state.
 - Things that are missing on the left side but present on the right side are colour-coded as green (new).
 
 To track changes of the same variable in timed manner you can push it with `diffPush` or `diff`
-with a single argument,
-that will shift objects from right to left, showing differences with previous push state.
+with a single argument, that will shift objects from right to left, showing differences with previous push state.
 
 ### How it works
 
-- `jsdiff-devtools` registers devtools panel
-  - injects console commands that send data to `jsdiff-proxy`
-  - injects `jsdiff-proxy` to farther communicate objects to the extension's `jsdiff-background`
-- when `console.diff` command invoked
-  - argument/s are cloned in a suitable form for sending between different window contexts and sent to `jsdiff-proxy`
-  - `jsdiff-proxy` catches the data and sends it to the `jsdiff-background` where it is stored for future consuming
-- when `jsdiff-panel` is mounted (visible in devtools) it listens to data expected to come from the `jsdiff-background`
-  and displays it
+- `jsdiff-devtools.js` registers devtools panel
+  - injects `console.diff` commands into inspected window's console interface
+    - each function stringifies arguments and sends them via `postMessage` to `jsdiff-proxy.js`
+  - injects `jsdiff-proxy.js` that listens on window message and sends it further to chrome runtime.
+- when `jsdiff-panel.js` is visible in devtools, it reflects result of last invocation and listens for future messages
 
 ### Screenshot
 
 ![screenshot](./src/img/screenshot-01.png)
-
-### Based on
-
-- [jsondiffpatch](https://github.com/benjamine/jsondiffpatch) by Benjamín Eidelman
-- [vuejs](https://github.com/vuejs) by Evan You

manifest.json

@@ -1,19 +1,15 @@
 {
   "name": "console.diff(...)",
-  "description": "Deep compare complex in-memory objects inside browser devtools panel with console.diff command.",
+  "description": "Compare in-memory objects and see the result inside devtools panel with a set of console.diff functions.",
   "version": "2.1",
-  "manifest_version": 2,
+  "manifest_version": 3,
   "minimum_chrome_version": "64.0",
   "devtools_page": "src/jsdiff-devtools.html",
   "icons": {
     "28": "src/img/panel-icon28.png",
     "64": "src/img/panel-icon64.png",
     "128": "src/img/panel-icon128.png"
   },
-  "background": {
-    "persistent": false,
-    "scripts": ["src/js/jsdiff-background.js"]
-  },
-  "content_security_policy": "script-src 'self'; object-src 'self'",
-  "permissions": ["http://*/*", "https://*/*", "clipboardWrite"]
+  "permissions": ["storage", "scripting", "activeTab", "clipboardWrite"],
+  "host_permissions": ["*://*/*"]
 }

src/js/bundle/jsdiff-panel.js

@@ -1,28 +1,19 @@
-// resistance is futile
-
-// Create panel
 chrome.devtools.panels.create(
   'JSDiff',
   '/src/img/panel-icon28.png',
   '/src/jsdiff-panel.html',
   (panel) => {
-    //panel.onSearch.addListener(sendMessage('jsdiff-panel-search'));
-    //panel.onShown.addListener(sendMessage('jsdiff-panel-shown'));
-    //panel.onHidden.addListener(sendMessage('jsdiff-panel-hidden'));
+    panel.onSearch.addListener(async (cmd, query) => {
+      await chrome.runtime.sendMessage({
+        source: 'jsdiff-panel-search',
+        params: { cmd, query },
+      });
+    });
   }
 );
 
-// Create a connection to the background page
+// tabId may be null if user opened the devtools of the devtools
 if (chrome.devtools.inspectedWindow.tabId !== null) {
-  // tabId may be null if user opened the devtools of the devtools
-  const backgroundPageConnection = chrome.runtime.connect({
-    name: 'jsdiff-devtools',
-  });
-  backgroundPageConnection.postMessage({
-    name: 'init',
-    tabId: chrome.devtools.inspectedWindow.tabId,
-  });
-
   injectScripts();
 }
 
@@ -33,6 +24,13 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
   }
 });
 
+// track api invocation - (api can be invoked prior opening of jsdiff panel)
+chrome.runtime.onMessage.addListener(async (req) => {
+  if ('jsdiff-devtools-extension-api' === req.source) {
+    await chrome.storage.local.set({ lastApiReq: req });
+  }
+});
+
 // Inject console api and messaging proxy
 // us shown at: https://developer.chrome.com/extensions/devtools#content-script-to-devtools
 function injectScripts() {
@@ -43,18 +41,32 @@ function injectScripts() {
     },
     (res, error) => {
       if (res && !error) {
-        // injected
-        chrome.tabs.executeScript(chrome.devtools.inspectedWindow.tabId, {
-          file: '/src/js/jsdiff-proxy.js',
-        });
+        const tabId = chrome.devtools.inspectedWindow.tabId;
+
+        chrome.scripting
+          .executeScript({
+            target: {
+              tabId,
+              allFrames: true,
+            },
+            files: ['/src/js/jsdiff-proxy.js'],
+          })
+          .then(
+            () => {
+              // console.log('script injected in all frames');
+            },
+            (error) => {
+              // console.error('script inject failed', error);
+            }
+          );
       }
     }
   );
 }
 
 function jsdiff_devtools_extension_api() {
   if (typeof console.diff === 'function') {
-    /*already injected*/
+    /* already injected */
     return false;
   }
 
@@ -89,17 +101,21 @@ function jsdiff_devtools_extension_api() {
           set = null;
         }
       });
+
       window.postMessage(
-        { payload, source: 'jsdiff-devtools-extension-api' },
+        {
+          payload,
+          source: 'jsdiff-devtools-extension-api',
+        },
         '*'
       );
     } catch (e) {
       console.error(
-        '%cJSDiff',
+        '%cconsole.diff',
         `
         font-weight: 700;
         color: #000;
-        background-color: yellow;
+        background-color: #ffbbbb;
         padding: 2px 4px;
         border: 1px solid #bbb;
         border-radius: 4px;
@@ -110,25 +126,15 @@ function jsdiff_devtools_extension_api() {
   }
 
   Object.assign(console, {
-    diff(left, right) {
-      post(right === undefined ? { push: left } : { left, right });
-    },
-
-    diffLeft(left) {
-      post({ left });
-    },
-
-    diffRight(right) {
-      post({ right });
-    },
-
-    diffPush(push) {
-      post({ push });
-    },
+    diff: (left, right) =>
+      post(right === undefined ? { push: left } : { left, right }),
+    diffLeft: (left) => post({ left }),
+    diffRight: (right) => post({ right }),
+    diffPush: (push) => post({ push }),
   });
 
   console.debug(
-    '%c✚ console.diff(left, right);',
+    '%c✚ console.diff',
     `
       font-weight: 700;
       color: #000;
@@ -141,9 +147,3 @@ function jsdiff_devtools_extension_api() {
 
   return true;
 }
-
-function sendMessage(message) {
-  return function () {
-    chrome.runtime.sendMessage(message);
-  };
-}

src/js/jsdiff-background.js

@@ -1,14 +1,10 @@
-(function (w, x) {
-  'use strict';
-  w.addEventListener('message', function jsdiff_devtools_extension_proxy(e) {
+(async () => {
+  window.addEventListener('message', (e) => {
     if (
-      // message from the same frame
-      e.source === w &&
-      e.data &&
       typeof e.data === 'object' &&
       e.data.source === 'jsdiff-devtools-extension-api'
     ) {
-      x && x.sendMessage(e.data);
+      chrome.runtime.sendMessage(e.data);
     }
   });
-})(window, chrome.runtime);
+})();