make it work in firefox v120 (#19)

Author: zendive

.gitignore

@@ -8,9 +8,8 @@ node_modules/
 # os
 .DS_Store
 
-# typescript output
-.ts-built
-
-# application files not for git
+# application autogenerated files not for git
 *.js.map
 *.zip
+manifest.json
+bundle/js

.prettierignore

@@ -1,4 +1,3 @@
 /bundle/js
-.ts-built
 *.min.js
 pnpm-lock.yaml

Makefile

@@ -1,22 +1,25 @@
-ZIP_FILE="extension.zip"
+ZIP_CHROME_FILE="extension.chrome.zip"
+ZIP_FIREFOX_FILE="extension.firefox.zip"
 HASH_ALG="sha384"
 
 .PHONY:
-	install clean all lint dev prod zip
+	install clean all lint dev prod zip_chrome zip_firefox
+	tune2chrome tune2firefox
 
 install:
 	npm i -g pnpm
 	pnpm i
 
 clean:
 	rm -rf ./node_modules
-	rm -rf $(ZIP_FILE)
+	rm -rf $(ZIP_CHROME_FILE) $(ZIP_FIREFOX_FILE)
 	rm -rf ./bundle/js/
 
 all:
 	make lint
 	make prod
-	make zip
+	make zip_chrome
+	make zip_firefox
 
 lint:
 	npx prettier . --write
@@ -27,12 +30,28 @@ dev:
 		npx webpack --progress --watch --mode=development
 
 prod:
+	rm -rf ./bundle/js/
 	NODE_OPTIONS="--loader=ts-node/esm --no-warnings=ExperimentalWarning" \
 		NODE_ENV="production" \
 		npx webpack --mode=production
 
-zip:
-	rm -rf $(ZIP_FILE)
-	zip -r $(ZIP_FILE) ./bundle ./manifest.json > /dev/null
-	FILE_HASH=$$(openssl dgst -$(HASH_ALG) -binary $(ZIP_FILE) | openssl base64 -A); \
-		echo "$(ZIP_FILE) $(HASH_ALG):$$FILE_HASH"
+zip_chrome:
+	make tune2chrome
+	rm -rf $(ZIP_CHROME_FILE)
+	zip -r $(ZIP_CHROME_FILE) ./bundle ./manifest.json > /dev/null
+	zip --delete $(ZIP_CHROME_FILE) "bundle/js/firefox/*"
+	FILE_HASH=$$(openssl dgst -$(HASH_ALG) -binary $(ZIP_CHROME_FILE) | openssl base64 -A); \
+		echo "$(ZIP_CHROME_FILE) $(HASH_ALG):$$FILE_HASH"
+
+zip_firefox:
+	make tune2firefox
+	rm -rf $(ZIP_FIREFOX_FILE)
+	zip -r $(ZIP_FIREFOX_FILE) ./bundle ./manifest.json > /dev/null
+	FILE_HASH=$$(openssl dgst -$(HASH_ALG) -binary $(ZIP_FIREFOX_FILE) | openssl base64 -A); \
+		echo "$(ZIP_FIREFOX_FILE) $(HASH_ALG):$$FILE_HASH"
+
+tune2chrome:
+	cp manifest.chrome.json manifest.json
+
+tune2firefox:
+	cp manifest.firefox.json manifest.json

README.md

@@ -124,6 +124,7 @@ Historically, left side represents the old state and right side the new state.
 ```sh
 make install # to install dependencies
 make all # build for prod and make extension.zip
+make tune2chrome # or tune2firefox for relevant manifest
 make dev # local development
 ```
 

bundle/js/jsdiff-console.js

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "console.diff(...)",
-  "version": "3.0.4",
+  "version": "3.0.5",
   "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAlCx2Bl0li+3idvfrH9cQL/MzphafGFqMUA2P+0vbyhwxsxWl0llOaGQbkirX5qCoAVHoUCPqu3hCjpVCv35igPbfqDs5bdLZZmXt2F0HjEQnWI/eZKd9IKcKYMplEeL2BodmpU02VrP1UnUzQHZeeMWk9ybgWOqCimkwliILVubRj5dxNB9AidLwO4Z5iGq/OvW9AJMYdxKxrLP2lF6/GGNcCBg+iCJZwlQOhFB9LbUjytT4ws3bIEX4b5zmWLqGKR1NiZfGug2eCWXt9oEKg2WkbXmBBzFKqxnM/bBUrVR29N9qNgx0f42qnyhsW3Bo4kPzE3d0asXCV5nofLTLEwIDAQAB",
   "description": "Compare objects in memory with console.diff(old, new) devtools function",
   "minimum_chrome_version": "100.0",

bundle/js/jsdiff-devtools.js

@@ -0,0 +1,34 @@
+{
+  "manifest_version": 3,
+  "name": "console.diff(...)",
+  "version": "3.0.5",
+  "description": "Compare objects in memory with console.diff(old, new) devtools function",
+  "minimum_chrome_version": "100.0",
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "[email protected]",
+      "strict_min_version": "118.0"
+    }
+  },
+  "homepage_url": "https://github.com/zendive/jsdiff",
+  "author": "[email protected]",
+  "permissions": ["storage", "devtools", "activeTab"],
+  "host_permissions": ["<all_urls>"],
+  "background": {
+    "scripts": ["bundle/js/firefox/jsdiff-background.js"]
+  },
+  "devtools_page": "bundle/jsdiff-devtools.html",
+  "icons": {
+    "28": "bundle/img/panel-icon28.png",
+    "64": "bundle/img/panel-icon64.png",
+    "128": "bundle/img/panel-icon128.png"
+  },
+  "content_scripts": [
+    {
+      "js": ["bundle/js/jsdiff-console.js", "bundle/js/jsdiff-proxy.js"],
+      "matches": ["*://*/*"],
+      "all_frames": true,
+      "run_at": "document_start"
+    }
+  ]
+}

bundle/js/jsdiff-panel.js

@@ -1,6 +1,6 @@
 {
   "name": "jsdiff",
-  "version": "3.0.4",
+  "version": "3.0.5",
   "description": "Chrome extension to compare objects in memory with console.diff(old, new) devtools function",
   "private": true,
   "scripts": {
@@ -25,6 +25,7 @@
   "type": "module",
   "devDependencies": {
     "@types/chrome": "0.0.251",
+    "@types/firefox-webext-browser": "120.0.0",
     "@types/webpack-bundle-analyzer": "4.6.3",
     "@vue/compiler-sfc": "3.3.8",
     "clean-webpack-plugin": "4.0.0",
@@ -36,8 +37,8 @@
     "sass": "1.69.5",
     "sass-loader": "13.3.2",
     "style-loader": "3.3.3",
-    "ts-node": "10.9.1",
-    "typescript": "5.2.2",
+    "ts-node": "10.9.2",
+    "typescript": "5.3.3",
     "vue": "3.4.3",
     "vue-loader": "17.3.1",
     "webpack": "5.89.0",

bundle/js/jsdiff-proxy.js

@@ -46,4 +46,12 @@ declare global {
     | IProgressMessage
     | IErrorMessage
     | ISearchMessage;
+
+  interface Window {
+    wrappedJSObject: { jsdiff: () => void };
+  }
+
+  // firefox extension context
+  // currently not present in '@types/firefox-webext-browser'
+  function cloneInto(...args: any[]): any;
 }

manifest.json renamed to manifest.chrome.json

@@ -0,0 +1,22 @@
+// background script for firefox partial(?) MV3 implementation
+
+let ports = new Set<chrome.runtime.Port>();
+
+// Listen for connections from DevTools pages
+chrome.runtime.onConnect.addListener((port) => {
+  if (port.name === 'jsdiff-devtools-page-connect') {
+    ports.add(port);
+
+    port.onDisconnect.addListener(() => {
+      ports.delete(port);
+    });
+  }
+});
+
+// Listen for messages from content scripts
+// and forward the message to the DevTools page connected ports
+chrome.runtime.onMessage.addListener((msg) => {
+  for (const port of ports) {
+    port.postMessage(msg);
+  }
+});

manifest.firefox.json

@@ -1,6 +1,6 @@
 import { post, nativeClone, customClone } from '@/api/clone';
 
-Object.assign(console, {
+const consoleAPI = {
   diff: (...args: unknown[]) => {
     post(
       customClone,
@@ -31,6 +31,18 @@ Object.assign(console, {
         : { left: args[0], right: args[1], timestamp: Date.now() }
     );
   },
-});
+};
 
-console.debug(`✚ console.diff()`);
+if (typeof browser === 'undefined') {
+  // chrome
+  Object.assign(console, consoleAPI);
+  console.debug(`✚ console.diff()`);
+} else if (typeof cloneInto === 'function') {
+  // firefox
+  // the technic described in:
+  // @link: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Sharing_objects_with_page_scripts
+  window.wrappedJSObject.jsdiff = cloneInto(consoleAPI, window, {
+    cloneFunctions: true,
+  });
+  console.debug(`✚ jsdiff.diff()`);
+}

package.json

@@ -5,12 +5,14 @@ if (chrome.devtools.inspectedWindow.tabId !== null) {
     '/bundle/img/panel-icon28.png',
     '/bundle/jsdiff-panel.html',
     (panel) => {
-      panel.onSearch.addListener(async (cmd, query) => {
-        await chrome.runtime.sendMessage({
-          source: 'jsdiff-devtools-to-panel-search',
-          params: { cmd, query },
-        } as ISearchMessage);
-      });
+      if (typeof panel.onSearch?.addListener === 'function') {
+        panel.onSearch.addListener(async (cmd, query) => {
+          await chrome.runtime.sendMessage({
+            source: 'jsdiff-devtools-to-panel-search',
+            params: { cmd, query },
+          } as ISearchMessage);
+        });
+      }
     }
   );
 }

pnpm-lock.yaml

@@ -1,5 +1,4 @@
 import { createApp } from 'vue';
 import Panel from '@/view/panel.vue';
 
-const app = createApp(Panel);
-app.mount('#jsdiff-app');
+createApp(Panel).mount('#jsdiff-app');