Enhancement: Library detection package to identify more libraries (#555)

* Add new permission for scripting

* Remove catch console log from quick links

* Make LibraryData type more generic

* Refactor core

* Create new library detection component and refactor code

* Add more libaries and refactor gis and gsi libraries

* Add libraries to config

* Update types

* Refactor util exports

* Refactor worker

* Get createContext and useContextSelector from use-context-selector as currently being done in main

packages/common/src/libraryDetection.types.ts

@@ -32,14 +32,10 @@ export type DetectedSignature = {
 };
 
 export type LibraryData = {
-  gis: {
-    signatureMatches: number;
+  [key: string]: {
+    signatureMatches?: number;
     moduleMatch?: number;
-    matches: DetectedSignature[];
-  };
-  gsiV2: {
-    signatureMatches: number;
-    moduleMatch?: number;
-    matches: DetectedSignature[];
+    matches?: DetectedSignature[];
+    domQuerymatches?: [string] | null;
   };
 };

packages/design-system/src/components/landingPage/quickLinksList.tsx

@@ -54,7 +54,7 @@ const QuickLinksList = () => {
           setNews(newsArray);
         }
       } catch (error) {
-        console.warn('Error fetching latest news', error);
+        // Fail silently.
       }
     })();
   }, []);

packages/extension/src/manifest.json

@@ -17,7 +17,8 @@
     "cookies",
     "debugger",
     "management",
-    "contentSettings"
+    "contentSettings",
+    "scripting"
   ],
   "host_permissions": ["*://*/*"],
   "devtools_page": "devtools/devtools.html",

packages/library-detection/src/components/accordion/detectionMessage.tsx

@@ -0,0 +1,50 @@
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * External dependencies.
+ */
+import React from 'react';
+
+interface DetectionMessageProps {
+  libraryName: string;
+  provider: string;
+  supportURL: string;
+}
+
+const DetectionMessage = ({
+  libraryName,
+  provider,
+  supportURL,
+}: DetectionMessageProps) => {
+  return (
+    <p className="dark:text-bright-gray">
+      {libraryName} functionality may not work properly due to the phaseout of
+      third-party cookies. For more information, please visit the
+      {provider + ' '}
+      <a
+        target="_blank"
+        className="text-bright-navy-blue dark:text-jordy-blue"
+        href={supportURL}
+        rel="noreferrer"
+      >
+        support forum
+      </a>
+      .
+    </p>
+  );
+};
+
+export default DetectionMessage;

packages/library-detection/src/components/accordion/index.tsx

@@ -46,7 +46,7 @@ const Accordion = ({
   });
 
   return (
-    <div className={parentClass}>
+    <div className={parentClass} data-testid="library-detection-accordion">
       <AccordionHeading
         setIsOpen={setIsOpen}
         isOpen={isOpen}

packages/library-detection/src/components/index.tsx

@@ -16,3 +16,4 @@
 export { default as LibraryDetection } from './libraryDetection';
 export { default as Accordion } from './accordion';
 export { default as FeatureList } from './accordion/featureList';
+export { default as DetectionMessage } from './accordion/detectionMessage';

packages/library-detection/src/components/libraryDetection/index.tsx

@@ -22,61 +22,30 @@ import {
   COLOR_MAP,
   ProgressBar,
 } from '@ps-analysis-tool/design-system';
-import { extractUrl } from '@ps-analysis-tool/common';
 
 /**
  * Internal dependencies.
  */
-import {
-  filterMatchesBasedOnExceptions,
-  useLibraryDetection,
-  useLibraryDetectionContext,
-} from '../../core';
+import { useLibraryDetection, useLibraryDetectionContext } from '../../core';
 import LIBRARIES from '../../config';
-import type { LibraryData, DetectedSignature } from '../../types';
+import type { LibraryData, AccordionProps } from '../../types';
 
 const LibraryDetection = memo(function LibraryDetection() {
   useLibraryDetection();
 
-  const { libraryMatches, showLoader, tabDomain, isCurrentTabLoading } =
+  const { libraryMatches, showLoader, isCurrentTabLoading } =
     useLibraryDetectionContext(({ state }) => ({
       libraryMatches: state.libraryMatches,
       showLoader: state.showLoader,
-      tabDomain: state.tabDomain,
       isCurrentTabLoading: state.isCurrentTabLoading,
     }));
 
-  LIBRARIES.map((config) => {
-    let matches =
-      libraryMatches && libraryMatches[config.name as keyof LibraryData]
-        ? libraryMatches[config.name as keyof LibraryData]?.matches
-        : [];
-
-    const parsedUrl = extractUrl(tabDomain);
-
-    const parsedTabDomain = parsedUrl?.domain;
-
-    const isCurrentDomainExceptionDomain =
-      config?.exceptions?.[parsedTabDomain as string] &&
-      config?.exceptions?.[parsedTabDomain as string]?.signatures?.length > 0;
-
-    if (isCurrentDomainExceptionDomain) {
-      matches = filterMatchesBasedOnExceptions(
-        tabDomain,
-        config?.exceptions,
-        matches
-      );
-    }
-
-    libraryMatches[config.name as keyof LibraryData].matches = matches;
-
-    return matches;
-  });
-
   const names = Object.keys(libraryMatches);
 
   const detectedLibraryNames = names.filter(
-    (name) => libraryMatches[name as keyof LibraryData]?.matches?.length
+    (name) =>
+      libraryMatches[name as keyof LibraryData]?.matches?.length ||
+      libraryMatches[name as keyof LibraryData]?.domQuerymatches?.length
   );
 
   const dataMapping = [
@@ -90,16 +59,26 @@ const LibraryDetection = memo(function LibraryDetection() {
   const result =
     detectedLibraryNames.length > 0 ? (
       <>
-        {LIBRARIES.map((config) => {
-          const Component = config.component as React.FC<{
-            matches: DetectedSignature[];
-          }>;
+        {LIBRARIES.map((library) => {
+          const Component = library.component as React.FC<AccordionProps>;
+
           const matches =
-            libraryMatches && libraryMatches[config.name as keyof LibraryData]
-              ? libraryMatches[config.name as keyof LibraryData]?.matches
+            libraryMatches && libraryMatches[library.name as keyof LibraryData]
+              ? libraryMatches[library.name as keyof LibraryData]?.matches
               : [];
-
-          return <Component key={config.name} matches={matches} />;
+          const domQueryMatches =
+            libraryMatches && libraryMatches[library.name as keyof LibraryData]
+              ? libraryMatches[library.name as keyof LibraryData]
+                  ?.domQuerymatches
+              : null;
+
+          return (
+            <Component
+              key={library.name}
+              matches={matches}
+              domQueryMatches={domQueryMatches}
+            />
+          );
         })}
       </>
     ) : (

packages/library-detection/src/config.ts

@@ -18,17 +18,49 @@
  */
 import {
   GSIAccordion,
-  GISAccordion,
+  getGSIV2Matches,
   GSI_V2_SIGNATURE_STRONG_MATCHES,
   GSI_V2_SIGNATURE_WEAK_MATCHES,
+  GSI_HELP_URL,
+  GSI_V2_DOMAINS_TO_SKIP,
+} from './libraries/gsi';
+import {
+  GISAccordion,
+  getGISMatches,
   GIS_SIGNATURE_WEAK_MATCHES,
   GIS_HELP_URL,
-  GSI_HELP_URL,
   GIS_DOMAINS_TO_SKIP,
-  GSI_DOMAINS_TO_SKIP,
-  GSIv2_EXCEPTIONS,
-  GIS_EXCEPTIONS,
-} from './libraries';
+} from './libraries/gis';
+import {
+  FBCommentsAccordion,
+  FB_COMMENTS_HELP_URL,
+  fbCommentsDOMQuery,
+} from './libraries/fb-comments';
+import {
+  FBLikesAccordion,
+  fbLikesDOMQuery,
+  FB_LIKES_HELP_URL,
+} from './libraries/fb-likes';
+import {
+  DisqusCommentsAccordion,
+  disqusCommentsDOMQuery,
+  DISQUS_COMMENTS_HELP_URL,
+} from './libraries/disqus-comments';
+import {
+  JetpackCommentsAccordion,
+  jetpackCommentsDOMQuery,
+  JETPACK_COMMENTS_HELP_URL,
+} from './libraries/jetpack-comments';
+import {
+  JetpackLikesAccordion,
+  jetpackLikesDOMQuery,
+  JETPACK_LIKES_HELP_URL,
+} from './libraries/jetpack-likes';
+import {
+  ReCaptchaAccordion,
+  reCaptchaDOMQuery,
+  RECAPTCHA_HELP_URL,
+} from './libraries/reCaptcha';
 
 const LIBRARIES = [
   {
@@ -38,9 +70,9 @@ const LIBRARIES = [
       strongMatches: GSI_V2_SIGNATURE_STRONG_MATCHES,
       weakMatches: GSI_V2_SIGNATURE_WEAK_MATCHES,
     },
-    exceptions: GSIv2_EXCEPTIONS,
-    domainsToSkip: GSI_DOMAINS_TO_SKIP,
+    domainsToSkip: GSI_V2_DOMAINS_TO_SKIP,
     helpUrl: GSI_HELP_URL,
+    detectionFunction: getGSIV2Matches,
   },
   {
     name: 'gis',
@@ -49,9 +81,45 @@ const LIBRARIES = [
       strongMatches: [],
       weakMatches: GIS_SIGNATURE_WEAK_MATCHES,
     },
-    exceptions: GIS_EXCEPTIONS,
     domainsToSkip: GIS_DOMAINS_TO_SKIP,
     helpUrl: GIS_HELP_URL,
+    detectionFunction: getGISMatches,
+  },
+  {
+    name: 'fb-comments',
+    component: FBCommentsAccordion,
+    helpUrl: FB_COMMENTS_HELP_URL,
+    domQueryFunction: fbCommentsDOMQuery,
+  },
+  {
+    name: 'fb-likes',
+    component: FBLikesAccordion,
+    helpUrl: FB_LIKES_HELP_URL,
+    domQueryFunction: fbLikesDOMQuery,
+  },
+  {
+    name: 'disqus-comments',
+    component: DisqusCommentsAccordion,
+    helpUrl: DISQUS_COMMENTS_HELP_URL,
+    domQueryFunction: disqusCommentsDOMQuery,
+  },
+  {
+    name: 'jetpack-comments',
+    component: JetpackCommentsAccordion,
+    helpUrl: JETPACK_COMMENTS_HELP_URL,
+    domQueryFunction: jetpackCommentsDOMQuery,
+  },
+  {
+    name: 'jetpack-likes',
+    component: JetpackLikesAccordion,
+    helpUrl: JETPACK_LIKES_HELP_URL,
+    domQueryFunction: jetpackLikesDOMQuery,
+  },
+  {
+    name: 'reCaptcha',
+    component: ReCaptchaAccordion,
+    helpUrl: RECAPTCHA_HELP_URL,
+    domQueryFunction: reCaptchaDOMQuery,
   },
 ];