ShadowDOM support

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "probely-record-sequence",
-  "version": "0.0.4",
-  "description": "Probely Record login/sequence",
+  "name": "snyk-api-and-web-record-sequence",
+  "version": "0.0.7",
+  "description": "Snyk API & Web Record login/sequence",
   "license": "MIT",
   "scripts": {
     "build": "node utils/build.js",

src/manifest-chrome.json

@@ -1,6 +1,6 @@
 {
   "manifest_version": 3,
-  "name": "Probely Sequence Recorder",
+  "name": "Snyk API & Web Sequence Recorder",
   "action": {
     "default_popup": "popup.html",
     "default_icon": {

src/manifest-firefox.json

@@ -1,6 +1,6 @@
 {
-  "name": "Probely Sequence Recorder",
-  "version": "0.0.4",
+  "name": "Snyk API & Web Sequence Recorder",
+  "version": "0.0.7",
   "browser_specific_settings": {
     "gecko": {
       "id": "sequence-recorder@probely.com",

src/manifest.json

@@ -1,6 +1,6 @@
 {
   "manifest_version": 3,
-  "name": "Probely Sequence Recorder",
+  "name": "Snyk API & Web Sequence Recorder",
   "action": {
     "default_popup": "popup.html",
     "default_icon": {

src/pages/Content/modules/collectEvents.js

@@ -22,7 +22,22 @@ let stoMouseover = false;
 
 export function interceptEvents(event, doc, ifrSelector, callback) {
   let hasKeyReturn = false;
-  const tgt = event.target;
+  let tgt = null;
+  let composedPath = null;
+  if (event && event.composed && event.composedPath) {
+    composedPath = event.composedPath();
+  }
+  let shadowRootIdx = -1;
+  if (composedPath && composedPath.length > 0) {
+    shadowRootIdx = composedPath.findIndex(
+      (item) => item instanceof ShadowRoot
+    );
+  }
+  if (shadowRootIdx > -1) {
+    tgt = composedPath[0];
+  } else {
+    tgt = event.target;
+  }
   const type = event.type;
   let nodeName = null;
   let nodeType = null;
@@ -74,12 +89,20 @@ export function interceptEvents(event, doc, ifrSelector, callback) {
   if (selector && selector.toLowerCase() === 'html') {
     return;
   }
-  const xpath = getXPath(bestElm, doc);
+  let xpath = null;
+  try {
+    xpath = getXPath(bestElm, doc);
+  } catch (ex) {
+    // ignore
+  }
+  if (shadowRootIdx > -1) {
+    xpath = '/html/node/shadow';
+  }
 
   let oEventBase = {
     timestamp: new Date().getTime(),
     css: selector || tgt,
-    xpath: xpath,
+    xpath: xpath || '',
   };
 
   let oEventToSend = {};

src/pages/Popup/Popup.jsx

@@ -3,7 +3,7 @@ import logo from '../../assets/img/logo_probely.svg';
 import help from '../../assets/img/help.svg';
 import './Popup.css';
 
-const helpURL = 'https://help.probely.com/';
+const helpURL = 'https://help.probely.com/en/articles/5402869-how-to-record-a-sequence-with-probely-s-sequence-recorder-plugin';
 
 const Popup = (props) => {
   // 🔴
@@ -146,7 +146,7 @@ const Popup = (props) => {
       type: "text/plain;charset=utf-8"
      });
     var a = document.createElement('a');
-    a.download = 'probely-recording.json';
+    a.download = 'snyk-api-and-web-recording.json';
     a.rel = 'noopener';
     a.href = URL.createObjectURL(blob);
     try {
@@ -181,7 +181,7 @@ const Popup = (props) => {
       </header>
       <div className="App-container">
         <p>
-        Use this plugin to record a sequence of steps to be followed by Probely during a scan.{' '}
+        Use this plugin to record a sequence of steps to be followed by Snyk API & Web during a scan.{' '}
         When you finish recording, upload the script to your target settings. 
         </p>
         <p className="help-container">

src/pages/Review/Review.jsx

@@ -103,7 +103,7 @@ const Review = (props) => {
       return;
     }
     const a = document.createElement('a');
-    a.download = 'probely-recording.json';
+    a.download = 'snyk-api-and-web-recording.json';
     a.rel = 'noopener';
     a.href = URL.createObjectURL(blob);
     try {
@@ -255,7 +255,7 @@ const Review = (props) => {
     <div className="App">
       <header className="instructions">
         <div className="header">
-          <img src={logo} alt="probely" />
+          <img src={logo} alt="Snyk API & Web" />
           <h1>Sequence Recorder</h1>
         </div>
       </header>
@@ -285,7 +285,7 @@ const Review = (props) => {
               onChange={(ev) => { onChangeReviewAdvanced(ev); }}
             /><label htmlFor="review_advanced_options" className="review_advanced_options_text">Advanced options</label>
           </div>
-          <p>After saving your sequence, make sure to import it to your target settings at Probely, so it is followed during scans.</p>
+          <p>After saving your sequence, make sure to import it to your target settings at Snyk API & Web, so it is followed during scans.</p>
         </>
         : <h3><strong>No data has been recorded</strong></h3>}
         <div className="copy-status-container">

src/pages/Start/Start.jsx

@@ -6,7 +6,7 @@ const Start = (props) => {
     <div className="App">
       <header className="instructions">
         <div className="header">
-          <img src={logo} alt="probely" />
+          <img src={logo} alt="Snyk API & Web" />
           <h1>Sequence Recorder</h1>
         </div>
       </header>