Added CSP executeScript fallback (#80)

* Added CSP executeScript fallback

* Fixed lints

* Build workflow -> node 14

* Fixed discovery double init

* Build workflow -> node 16

* CR fixes

* CR fixes

* CR fixes

* Updated discovery to 1.0.0-beta.66

CHANGELOG.md

@@ -1,3 +1,10 @@
+## 1.13.0 (15-07-2022)
+
+* Fixed bug when CSP broke JSON display on the page
+* Fixed work of extension for raw.github* pages
+* Updated `esbuild` to `0.14.49`
+* Updated `discovery` to `1.0.0-beta.66`
+
 ## 1.12.2 (29-04-2022)
 
 * Updated `discovery` to `1.0.0-beta.65`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jsondiscovery",
-  "version": "1.12.2",
+  "version": "1.13.0",
   "description": "Browser (Chrome, Firefox) extension for JSON discovery",
   "author": "[email protected]",
   "license": "MIT",
@@ -11,10 +11,10 @@
     "build": "NODE_ENV=production node ./scripts/build.js && node ./scripts/zip.js"
   },
   "devDependencies": {
-    "@discoveryjs/discovery": "1.0.0-beta.65",
+    "@discoveryjs/discovery": "1.0.0-beta.66",
     "@discoveryjs/json-ext": "^0.5.7",
     "css-tree": "^2.1.0",
-    "esbuild": "^0.14.25",
+    "esbuild": "^0.14.49",
     "eslint": "^8.10.0",
     "jszip": "^3.7.1",
     "mime": "^3.0.0"

scripts/build.js

@@ -53,9 +53,11 @@ async function build(browser) {
     // build bundle
     const result = await esbuild.build({
         entryPoints: [
+            path.join(indir, 'background.js'),
             path.join(indir, 'content/discovery.css'),
             path.join(indir, 'content/preloader.css'),
             path.join(indir, 'content/discovery.js'),
+            path.join(indir, 'content/discovery-esm.js'),
             path.join(indir, 'content/init.js')
         ],
         format: 'esm',
@@ -77,7 +79,9 @@ async function build(browser) {
             ? processCss(file.text, outdir, 'assets')
             : file.contents;
 
-        fs.writeFileSync(file.path, content);
+        const filePath = path.join(outdir, path.basename(file.path));
+
+        fs.writeFileSync(filePath, content);
     }
 }
 

src/background.js

@@ -0,0 +1,5 @@
+chrome.runtime.onMessage.addListener((message, { tab }) => {
+    if (message.type === 'initDiscovery') {
+        chrome.tabs.executeScript(tab.id, { file: 'discovery.js' });
+    }
+});

src/content/discovery-esm.js

@@ -0,0 +1 @@
+export { initDiscovery } from '../discovery';

src/content/discovery.js

@@ -1 +1,7 @@
-export { initDiscovery } from '../discovery';
+import { initDiscovery } from '../discovery';
+
+initDiscovery(...window.__discoveryOptions) // eslint-disable-line no-underscore-dangle
+    .then(() => {
+        window.__discoveryPreloader.el.remove(); // eslint-disable-line no-underscore-dangle
+    });
+

src/content/init.js

@@ -159,34 +159,47 @@ async function checkLoaded(settings) {
         pushChunk(null); // end of input
 
         const [{ initDiscovery }, json] = await Promise.all([
-            import(chrome.runtime.getURL('discovery.js')),
+            import(chrome.runtime.getURL('discovery-esm.js')),
             data
         ]);
 
-        await initDiscovery({
-            node: document.body,
-            raw: Object.defineProperties({}, {
-                firstSlice: {
-                    value: totalSize < firstSliceMaxSize * 2 ? null : firstSlice
-                },
-                size: {
-                    value: totalSize
-                },
-                json: totalSize <= firstSliceMaxSize ? { value: firstSlice } : {
-                    configurable: true,
-                    get() {
-                        return Object.defineProperty(this, 'json', {
-                            value: pre.textContent
-                        }).json;
+        const discoveryOptions = [
+            {
+                node: document.body,
+                raw: Object.defineProperties({}, {
+                    firstSlice: {
+                        value: totalSize < firstSliceMaxSize * 2 ? null : firstSlice
+                    },
+                    size: {
+                        value: totalSize
+                    },
+                    json: totalSize <= firstSliceMaxSize ? { value: firstSlice } : {
+                        configurable: true,
+                        get() {
+                            return Object.defineProperty(this, 'json', {
+                                value: pre.textContent
+                            }).json;
+                        }
                     }
-                }
-            }),
-            settings,
-            styles: [chrome.runtime.getURL('index.css')],
-            progressbar: preloader.progressbar
-        }, json);
+                }),
+                settings,
+                styles: [chrome.runtime.getURL('index.css')],
+                progressbar: preloader.progressbar
+            }, json
+        ];
+
+        // In case of sandboxed CSP pages await import will fail
+        // so here we send message to bg which executes discovery initiation via chrome API
+        if (typeof initDiscovery !== 'function') {
+            window.__discoveryPreloader = preloader; // eslint-disable-line no-underscore-dangle
+            window.__discoveryOptions = discoveryOptions; // eslint-disable-line no-underscore-dangle
+
+            await chrome.runtime.sendMessage({ type: 'initDiscovery' });
+        } else {
+            await initDiscovery(...discoveryOptions);
 
-        preloader.el.remove();
+            preloader.el.remove();
+        }
     }
 }
 

src/manifest.json

@@ -12,16 +12,21 @@
     },
     "permissions": [
         "<all_urls>",
-        "storage"
+        "storage",
+        "tabs"
     ],
     "content_scripts": [{
         "js": ["init.js"],
         "run_at": "document_start",
         "matches": ["<all_urls>"]
     }],
+    "background": {
+        "scripts": ["background.js"]
+    },
     "web_accessible_resources": [
         "discovery.css",
         "discovery.js",
+        "discovery-esm.js",
         "preloader.css",
         "icons/*",
         "assets/*"