TW-1180: Replace existing ads to slise xyz

src/contentScript.ts

@@ -1,13 +1,10 @@
 import { TemplePageMessage, TemplePageMessageType } from '@temple-wallet/dapp/dist/types';
 import browser from 'webextension-polyfill';
 
-import { ContentScriptType, WEBSITES_ANALYTICS_ENABLED } from 'lib/constants';
 import { IntercomClient } from 'lib/intercom/client';
 import { serealizeError } from 'lib/intercom/helpers';
 import { TempleMessageType, TempleResponse } from 'lib/temple/types';
 
-const TRACK_URL_CHANGE_INTERVAL = 5000;
-
 enum BeaconMessageTarget {
   Page = 'toPage',
   Extension = 'toExtension'
@@ -36,32 +33,6 @@ type BeaconMessage =
     };
 type BeaconPageMessage = BeaconMessage | { message: BeaconMessage; sender: { id: string } };
 
-// Prevents the script from running in an Iframe
-if (window.frameElement === null) {
-  browser.storage.local.get(WEBSITES_ANALYTICS_ENABLED).then(storage => {
-    if (storage[WEBSITES_ANALYTICS_ENABLED]) {
-      let oldHref = '';
-
-      const trackUrlChange = () => {
-        const newHref = window.parent.location.href;
-        if (oldHref !== newHref) {
-          oldHref = newHref;
-
-          browser.runtime.sendMessage({
-            type: ContentScriptType.ExternalLinksActivity,
-            url: newHref
-          });
-        }
-      };
-
-      trackUrlChange();
-
-      // Track url changes without page reload
-      setInterval(trackUrlChange, TRACK_URL_CHANGE_INTERVAL);
-    }
-  });
-}
-
 const SENDER = {
   id: browser.runtime.id,
   name: 'Temple - Tezos Wallet',

src/lib/constants.ts

@@ -2,6 +2,19 @@ export enum ContentScriptType {
   ExternalLinksActivity = 'ExternalLinksActivity'
 }
 
+export enum AdType {
+  EtherscanBuiltin = 'etherscan-builtin',
+  Bitmedia = 'bitmedia',
+  Coinzilla = 'coinzilla',
+  Cointraffic = 'cointraffic'
+}
+
 export const WEBSITES_ANALYTICS_ENABLED = 'WEBSITES_ANALYTICS_ENABLED';
 
 export const ACCOUNT_PKH_STORAGE_KEY = 'account_publickeyhash';
+
+export const ETHERSCAN_BUILTIN_ADS_WEBSITES = [
+  'https://etherscan.io',
+  'https://bscscan.com',
+  'https://polygonscan.com'
+];

src/lib/slise/get-ads-containers.ts

@@ -1,41 +1,85 @@
+import { AdType, ETHERSCAN_BUILTIN_ADS_WEBSITES } from 'lib/constants';
+
 interface AdContainerProps {
   element: HTMLElement;
   width: number;
+  height: number;
+  type: AdType;
 }
 
-const getFinalWidth = (element: Element) => {
+const getFinalSize = (element: Element) => {
   const elementStyle = getComputedStyle(element);
-  const rawWidthFromStyle = elementStyle.width;
-  const rawWidthFromAttribute = element.getAttribute('width');
+  const size = { width: 0, height: 0 };
+  const dimensions = ['width', 'height'] as const;
+
+  for (const dimension of dimensions) {
+    const rawDimensionFromStyle = elementStyle[dimension];
+    const rawDimensionFromAttribute = element.getAttribute(dimension);
+    const rawDimension = rawDimensionFromAttribute || rawDimensionFromStyle;
+
+    if (/\d+px/.test(rawDimension)) {
+      size[dimension] = Number(rawDimension.replace('px', ''));
+    } else {
+      size[dimension] = dimension === 'width' ? element.clientWidth : element.clientHeight;
+    }
+  }
 
-  return Number((rawWidthFromAttribute || rawWidthFromStyle).replace('px', '') || element.clientWidth);
+  return size;
 };
 
+const mapBannersWithType = (banners: NodeListOf<Element>, type: AdType) =>
+  [...banners].map(banner => ({ banner, type }));
+
 export const getAdsContainers = () => {
-  const builtInAdsImages = [...document.querySelectorAll('span + img')].filter(element => {
-    const { width, height } = element.getBoundingClientRect();
-    const label = element.previousElementSibling?.innerHTML ?? '';
+  const locationUrl = window.parent.location.href;
+  const builtInAdsImages = ETHERSCAN_BUILTIN_ADS_WEBSITES.some(urlPrefix => locationUrl.startsWith(urlPrefix))
+    ? [...document.querySelectorAll('span + img')].filter(element => {
+        const { width, height } = element.getBoundingClientRect();
+        const label = element.previousElementSibling?.innerHTML ?? '';
 
-    return (width > 0 || height > 0) && ['Featured', 'Ad'].includes(label);
-  });
-  const coinzillaBanners = [...document.querySelectorAll('.coinzilla')];
-  const bitmediaBanners = [...document.querySelectorAll('iframe[src*="media.bmcdn"], iframe[src*="cdn.bmcdn"]')];
+        return (width > 0 || height > 0) && ['Featured', 'Ad'].includes(label);
+      })
+    : [];
+  const coinzillaBanners = mapBannersWithType(
+    document.querySelectorAll('iframe[src*="coinzilla.io"], iframe[src*="czilladx.com"]'),
+    AdType.Coinzilla
+  );
+  const bitmediaBanners = mapBannersWithType(
+    document.querySelectorAll('iframe[src*="media.bmcdn"], iframe[src*="cdn.bmcdn"]'),
+    AdType.Bitmedia
+  );
+  const cointrafficBanners = mapBannersWithType(
+    document.querySelectorAll('iframe[src*="ctengine.io"]'),
+    AdType.Cointraffic
+  );
 
   return builtInAdsImages
     .map((image): AdContainerProps | null => {
       const element = image.closest('div');
 
-      return element && { element, width: getFinalWidth(image) };
+      return (
+        element && {
+          ...getFinalSize(image),
+          element,
+          type: AdType.EtherscanBuiltin
+        }
+      );
     })
     .concat(
-      [...bitmediaBanners, ...coinzillaBanners].map(banner => {
+      [...bitmediaBanners, ...coinzillaBanners, ...cointrafficBanners].map(({ banner, type }) => {
         const parentElement = banner.parentElement;
         const closestDiv = parentElement?.closest('div') ?? null;
-        const element = bitmediaBanners.includes(banner) ? closestDiv : parentElement;
+        const element = banner.tagName === 'div' ? parentElement : closestDiv;
         const widthDefinedElement = element?.parentElement ?? parentElement;
         const bannerFrame = banner.tagName === 'iframe' ? banner : banner.querySelector('iframe');
 
-        return element && { element, width: getFinalWidth(bannerFrame || widthDefinedElement!) };
+        return (
+          element && {
+            ...getFinalSize(bannerFrame || widthDefinedElement!),
+            element,
+            type
+          }
+        );
       })
     )
     .filter((element): element is AdContainerProps => Boolean(element));

src/lib/slise/get-slot-id.ts

@@ -1,7 +1,9 @@
 export const getSlotId = () => {
-  const hostnameParts = window.location.hostname.split('.').filter(part => part !== 'www');
+  const hostnameParts = window.parent.location.hostname.split('.').filter(part => part !== 'www');
   const serviceId = hostnameParts[0];
-  const pathnameParts = window.location.pathname.split('/').filter(part => part !== '' && !/0x[0-9a-f]+/i.test(part));
+  const pathnameParts = window.parent.location.pathname
+    .split('/')
+    .filter(part => part !== '' && !/(0x)?[0-9a-f]+/i.test(part) && !/[0-9a-z]{30,}/i.test(part));
 
   return [serviceId, ...pathnameParts].join('-');
 };

src/lib/temple/back/main.ts

@@ -5,7 +5,6 @@ import { BACKGROUND_IS_WORKER } from 'lib/env';
 import { encodeMessage, encryptMessage, getSenderId, MessageType, Response } from 'lib/temple/beacon';
 import { clearAsyncStorages } from 'lib/temple/reset';
 import { TempleMessageType, TempleRequest, TempleResponse } from 'lib/temple/types';
-import { getTrackedUrl } from 'lib/utils/url-track/get-tracked-url';
 
 import { ACCOUNT_PKH_STORAGE_KEY, ContentScriptType } from '../../constants';
 import * as Actions from './actions';
@@ -246,16 +245,12 @@ const processRequest = async (req: TempleRequest, port: Runtime.Port): Promise<T
 
 browser.runtime.onMessage.addListener(msg => {
   if (msg?.type === ContentScriptType.ExternalLinksActivity) {
-    const url = getTrackedUrl(msg.url);
-
-    if (url) {
-      browser.storage.local
-        .get(ACCOUNT_PKH_STORAGE_KEY)
-        .then(({ [ACCOUNT_PKH_STORAGE_KEY]: accountPkh }) =>
-          Analytics.client.track('External links activity', { url, accountPkh })
-        )
-        .catch(console.error);
-    }
+    browser.storage.local
+      .get(ACCOUNT_PKH_STORAGE_KEY)
+      .then(({ [ACCOUNT_PKH_STORAGE_KEY]: accountPkh }) =>
+        Analytics.client.track('External links activity', { url: msg.url, accountPkh })
+      )
+      .catch(console.error);
   }
 
   if (msg?.type === E2eMessageType.ResetRequest) {