feat: add chrome extension (#145)

Author: smeijer

.babelrc

@@ -2,5 +2,10 @@
   "presets": [
     "@babel/preset-react",
     "@babel/preset-env"
+  ],
+  "plugins": [
+    ["@babel/plugin-proposal-class-properties", {
+      "loose": true
+    }]
   ]
 }

devtools/src/background/background.js

@@ -0,0 +1,3 @@
+// This import needs to be here, we don't use the bridge here directly. But
+// simply importing crx-bridge, is what creates the messaging proxy.
+import 'crx-bridge';

devtools/src/content-script/contentScript.js

@@ -0,0 +1,56 @@
+import Bridge from 'crx-bridge';
+import setupHighlighter from './highlighter';
+
+import parser from '../../../src/parser';
+import { getQueryAdvise } from '../../../src/lib';
+import inject from './lib/inject';
+import { setup } from '../window/testing-library';
+import onDocReady from './lib/onDocReady';
+
+function init() {
+  inject('../window/testing-library.js');
+  setup(window);
+
+  window.__TESTING_PLAYGROUND__ = window.__TESTING_PLAYGROUND__ || {};
+  const hook = window.__TESTING_PLAYGROUND__;
+
+  hook.highlighter = setupHighlighter({ view: window, onSelectNode });
+
+  function onSelectNode(node) {
+    const { data, suggestion } = getQueryAdvise({
+      rootNode: document.body,
+      element: node,
+    });
+
+    const result = parser.parse({
+      rootNode: document.body,
+      query: suggestion.expression,
+    });
+
+    Bridge.sendMessage('SELECT_NODE', { result, data, suggestion }, 'devtools');
+  }
+
+  Bridge.onMessage('PARSE_QUERY', function ({ data }) {
+    const result = parser.parse({
+      rootNode: document.body,
+      query: data.query,
+    });
+
+    if (data.highlight) {
+      hook.highlighter.highlight({
+        nodes: (result.elements || []).map((x) => x.target),
+        hideAfterTimeout: data.hideAfterTimeout,
+      });
+    }
+
+    return { result };
+  });
+
+  // when the selected element is changed by using the element inspector,
+  // this method will be called from devtools/main.js
+  hook.onSelectionChanged = function onSelectionChanged(el) {
+    onSelectNode(el);
+  };
+}
+
+onDocReady(init);

devtools/src/content-script/highlighter/Highlighter.js

@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) 2020, Stephan Meijer
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ **/
+
+import Overlay from './Overlay';
+
+const SHOW_DURATION = 2000;
+
+let timeoutID = null;
+let overlay = null;
+
+export function hideOverlay() {
+  timeoutID = null;
+
+  if (overlay !== null) {
+    overlay.remove();
+    overlay = null;
+  }
+}
+
+export function showOverlay(elements, hideAfterTimeout) {
+  if (window.document == null) {
+    return;
+  }
+
+  if (timeoutID !== null) {
+    clearTimeout(timeoutID);
+  }
+
+  if (elements == null) {
+    return;
+  }
+
+  if (overlay === null) {
+    overlay = new Overlay();
+  }
+
+  overlay.inspect(elements);
+
+  if (hideAfterTimeout) {
+    timeoutID = setTimeout(hideOverlay, SHOW_DURATION);
+  }
+}