enya: the humming

unify interface and functionality between chrome and firefox hosts

Author: zendive

.gitignore

@@ -11,5 +11,6 @@ node_modules/
 # application autogenerated files not for git
 *.js.map
 *.zip
+*.crx
 manifest.json
 bundle/js

.vscode/settings.json

@@ -6,5 +6,6 @@
       "fileMatch": ["manifest.json"],
       "url": "https://json.schemastore.org/chrome-manifest.json"
     }
-  ]
+  ],
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

README.md

@@ -35,7 +35,7 @@ Chrome extension to compare objects in memory with console.diff(old, new) devtoo
 
   - JSDiff devtools panel reflects current state of comparison, regardless the tab[s] it was opened from.
 
-- Basic integration with search functionality within devtools:
+- Internal search inside comparison results
 
   - If search query contains at least one upper-case letter - the search will be case-sensitive.
 
@@ -69,6 +69,8 @@ Chrome extension to compare objects in memory with console.diff(old, new) devtoo
 
 - Compared objects, after being serialized, stored in `chrome.storage.local` wich has 10MB limit (before chrome v114 was 5MB).
 
+- In Firefox the API is under `jsdiff` object for now, cause extension API's not fully compatible.
+
 ### API
 
 - **console.diff(left, right)** - compare left and right arguments
@@ -113,7 +115,7 @@ Historically, left side represents the old state and right side the new state.
 
 - 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.
 
-### How it works
+### How it works (in chrome mv3)
 
 ![screenshot](./doc/design.png)
 
@@ -123,15 +125,15 @@ 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 all # build for prod and make extension.${browser}.zip
 make tune2chrome # or tune2firefox for relevant manifest
 make dev # local development
 ```
 
 ### Protection
 
 - How to protect your site from this extension:
-  - Well, tests show that even `Content-Security-Policy: default-src 'none';` header won't prevent injection of extension content-scripts...
+  - Well, tests on chrome show that even `Content-Security-Policy: default-src 'none';` header won't prevent injection of extension content-scripts...
   - Avoid assigning to `window` or `globalThis` any application object.
     See also [accidental global variables and memory leaks](https://www.tutorialspoint.com/explain-in-detail-about-memory-leaks-in-javascript).
   - In general, you can incapacitate console functions:

doc/design.plantuml

@@ -53,8 +53,8 @@ Panel ->o]: Display result
 deactivate Panel
 
 === Search in DevTools Panel ==
-[-> User: ctrl+F\ncmd+F
-User -> Panel: jsdiff-devtools-to-panel-search
+User -> Panel: ^+F\n⌘+F
+
 activate Panel
 Panel -> Panel: search in DOM
 Panel ->o]: Display result

doc/design.png

@@ -13,6 +13,7 @@
   },
   "keywords": [
     "devtools",
+    "diff",
     "chrome",
     "extension"
   ],
@@ -25,22 +26,24 @@
   "type": "module",
   "devDependencies": {
     "@types/chrome": "0.0.256",
+    "@types/diff-match-patch": "^1.0.36",
     "@types/firefox-webext-browser": "120.0.0",
     "@types/webpack-bundle-analyzer": "4.6.3",
-    "@vue/compiler-sfc": "3.4.9",
+    "@vue/compiler-sfc": "3.4.13",
     "clean-webpack-plugin": "4.0.0",
     "css-loader": "6.9.0",
     "diff-match-patch": "^1.0.5",
     "esbuild": "0.19.11",
     "esbuild-loader": "4.0.2",
     "jsondiffpatch": "0.6.0",
-    "prettier": "3.1.1",
+    "pinia": "^2.1.7",
+    "prettier": "3.2.2",
     "sass": "1.69.7",
     "sass-loader": "13.3.3",
     "style-loader": "3.3.4",
     "ts-node": "10.9.2",
     "typescript": "5.3.3",
-    "vue": "3.4.9",
+    "vue": "3.4.13",
     "vue-loader": "17.4.2",
     "webpack": "5.89.0",
     "webpack-bundle-analyzer": "4.10.1",

package.json

@@ -29,23 +29,10 @@ declare global {
     on: boolean;
   }
 
-  interface ISearchMessage {
-    source: 'jsdiff-devtools-to-panel-search';
-    params: ISearchOptions;
-  }
-
-  type TSearchCommands = 'performSearch' | 'nextSearchResult' | 'cancelSearch';
-
-  interface ISearchOptions {
-    cmd: TSearchCommands;
-    query: string | null;
-  }
-
   type TRuntimeMessageOptions =
     | ICompareMessage
     | IProgressMessage
-    | IErrorMessage
-    | ISearchMessage;
+    | IErrorMessage;
 
   interface Window {
     wrappedJSObject: { jsdiff: () => void };