@temple-wallet/extension-ads 8.1.0 → 9.0.0-dev.1

package/src/execute-ads-actions/process-insert-ad-action.ts

@@ -33,7 +33,16 @@ const processInsertAdActionOnce = async (
   insertionPoint: HTMLDivElement | HTMLTableCellElement,
   onAdsStackError: (error: Error) => void
 ) => {
-  const { elementStyle = {}, stylesOverrides = [], adsMetadata, wrapperType, originalHeight, originalWidth } = action;
+  const {
+    elementStyle = {},
+    stylesOverrides = [],
+    adsMetadata,
+    wrapperType,
+    originalHeight,
+    originalWidth,
+    shouldUseBlurredBackground,
+    adCategories
+  } = action;
 
   stylesOverrides.sort((a, b) => a.parentDepth - b.parentDepth);
 
@@ -42,15 +51,15 @@ const processInsertAdActionOnce = async (
   const adId = nanoid();
   const adElement = document.createElement('iframe');
   adElement.loading = 'lazy';
-  adElement.src = AdsConfiguration.getAdsStackIframeURL(adId, adsMetadata, window.location.href);
+  adElement.src = AdsConfiguration.getAdsStackIframeURL(adId, adsMetadata, window.location.href, adCategories);
   adElement.id = adId;
   adElement.allow = IFRAME_ALLOWANCE;
   const firstAdMetadataOrId = adsMetadata[0];
   const { dimensions: minDimensions } =
     typeof firstAdMetadataOrId === 'number' ? AdsConfiguration.bannerAdsMeta[firstAdMetadataOrId] : firstAdMetadataOrId;
   const dimensions = {
-    width: Math.max(originalWidth, minDimensions.width),
-    height: Math.max(originalHeight, minDimensions.height)
+    width: shouldUseBlurredBackground ? Math.max(originalWidth, minDimensions.width) : minDimensions.width,
+    height: shouldUseBlurredBackground ? Math.max(originalHeight, minDimensions.height) : minDimensions.height
   };
   adElement.style.width = wrapperType === 'tbody' ? '100%' : `${dimensions.width}px`;
   adElement.style.height = `${dimensions.height}px`;
@@ -74,11 +83,23 @@ const processInsertAdActionOnce = async (
       action.element.replaceWith(wrapperElement);
       break;
     default:
+      const nextSibling = action.parent.children[action.insertionIndex];
       if (action.isSiblingReplacement) {
         wrapperElement.setAttribute(SIBLING_REPLACEMENT_ATTRIBUTE_NAME, 'true');
+        const observer = new MutationObserver(mutations => {
+          const hasRemoveSiblingMutation = mutations.some(mutation =>
+            Array.from(mutation.removedNodes).includes(nextSibling)
+          );
+
+          if (hasRemoveSiblingMutation) {
+            wrapperElement.remove();
+            observer.disconnect();
+          }
+        });
+        observer.observe(action.parent, { childList: true });
       }
       stylesOverridesCurrentElement = action.parent;
-      action.parent.insertBefore(wrapperElement, action.parent.children[action.insertionIndex]);
+      action.parent.insertBefore(wrapperElement, nextSibling);
       break;
   }
 

package/src/referrals/index.ts

@@ -0,0 +1,5 @@
+export { processAnchors } from './replace';
+
+export { buildTakeadsClient } from './takeads';
+
+export { getCurrentPageDomain } from './utils';

package/src/referrals/replace.ts

@@ -0,0 +1,129 @@
+import browser from 'webextension-polyfill';
+
+import { IS_DEV, IS_MAC_OS, isTruthy } from 'src/utils';
+
+import type { TekeadsAffiliateResponse } from './takeads';
+import { getCurrentPageDomain, stripSubdomain } from './utils';
+
+const TEMPLE_WALLET_ANCHOR_ATTRIBUTE = 'data-tw-referral';
+
+export async function processAnchors(
+  supportedDomains: Set<string>,
+  AdsBrowserExtensionMessageType: AdsBrowserExtensionMessageTypeI
+) {
+  const anchors = Array.from(document.querySelectorAll('a'));
+  if (!anchors.length) throw new Error('No anchors found');
+
+  const items = anchors
+    .map(aElem => {
+      if (aElem.hasAttribute(TEMPLE_WALLET_ANCHOR_ATTRIBUTE)) return null;
+
+      const urlDomain = getDomain(aElem.href);
+      if (!urlDomain || !supportedDomains.has(urlDomain)) return null;
+
+      const iri = cleanLink(aElem.href);
+      if (!iri) return null;
+
+      return { iri, aElem, urlDomain };
+    })
+    .filter(isTruthy);
+
+  if (!items.length) return void (IS_DEV && console.info('Nothing to replace'));
+
+  const links = items.map(l => l.iri);
+
+  // Not requesting directly in content script because of CORS.
+  const takeadsItems: TekeadsAffiliateResponse = await browser.runtime.sendMessage({
+    type: AdsBrowserExtensionMessageType.FetchReferrals,
+    links
+  });
+
+  if (!takeadsItems.data.length) return void (IS_DEV && console.info('No referrals received'));
+
+  IS_DEV && console.info('Replacing', takeadsItems.data.length, 'referralas');
+
+  for (const { iri, aElem, urlDomain } of items) {
+    const referralUrl = takeadsItems.data.find(item => item.iri === iri)?.trackingLink;
+
+    if (!referralUrl) {
+      IS_DEV && console.warn('No affiliate link for', aElem);
+      continue;
+    }
+
+    processAnchorElement({ iri, aElem, urlDomain, referralUrl }, AdsBrowserExtensionMessageType);
+  }
+
+  return;
+}
+
+interface AdsBrowserExtensionMessageTypeI {
+  FetchReferrals: string;
+  ReferralClick: string;
+}
+
+interface PreppedItem {
+  iri: string;
+  aElem: HTMLAnchorElement;
+  urlDomain: string;
+  referralUrl: string;
+}
+
+function processAnchorElement(item: PreppedItem, AdsBrowserExtensionMessageType: AdsBrowserExtensionMessageTypeI) {
+  const { aElem, urlDomain, referralUrl } = item;
+
+  const showHref = aElem.href;
+
+  IS_DEV && console.info('Replacing referral:', showHref, 'to', referralUrl, 'for anchor:', aElem);
+
+  aElem.setAttribute(TEMPLE_WALLET_ANCHOR_ATTRIBUTE, 'set');
+
+  aElem.onclick = event => {
+    event.preventDefault();
+
+    IS_DEV && console.log('Referral clicked:', showHref, '->', referralUrl);
+
+    browser.runtime.sendMessage({
+      type: AdsBrowserExtensionMessageType.ReferralClick,
+      urlDomain,
+      pageDomain: getCurrentPageDomain()
+    });
+
+    const newTab = event.button === 1 || (IS_MAC_OS ? event.metaKey : event.ctrlKey);
+
+    window.open(referralUrl, newTab ? '_blank' : '_self');
+  };
+
+  aElem.oncontextmenu = () => {
+    /*
+      Making sure, user opens referral URL via Context Menu's 'Open in new tab' button.
+      Note: 'Copy to clipboard' button will also provide referral URL this way.
+    */
+
+    aElem.href = referralUrl;
+
+    const revertHref = () => {
+      aElem.href = showHref;
+      window.removeEventListener('focus', revertHref);
+    };
+
+    window.addEventListener('focus', revertHref);
+  };
+}
+
+function getDomain(href: string) {
+  try {
+    return stripSubdomain(new URL(href).hostname, 'www');
+  } catch {
+    return null;
+  }
+}
+
+function cleanLink(href: string) {
+  try {
+    const dirtyLink = new URL(href);
+
+    return dirtyLink.origin + dirtyLink.pathname;
+  } catch {
+    return null;
+  }
+}

package/src/referrals/takeads.ts

@@ -0,0 +1,44 @@
+import axios, { AxiosInstance } from 'axios';
+import memoizee from 'memoizee';
+
+/**
+ * API docs: https://docs.takeads.com
+ */
+export class TakeAdsClient {
+  private axios: AxiosInstance;
+
+  constructor(
+    private publicKey: string,
+    readonly apiUrl: string = 'https://api.takeads.com'
+  ) {
+    this.axios = axios.create({
+      baseURL: apiUrl,
+      headers: {
+        Authorization: `Bearer ${this.publicKey}`
+      },
+      adapter: 'fetch'
+    });
+  }
+
+  async affiliateLinks(websiteUrls: string[], subId?: string) {
+    const response = await this.axios.put<TekeadsAffiliateResponse>('/v1/product/monetize-api/v2/resolve', {
+      iris: websiteUrls,
+      subId,
+      withImages: false
+    });
+
+    return response.data;
+  }
+}
+
+export const buildTakeadsClient = memoizee((publicKey: string) => new TakeAdsClient(publicKey), { max: 2 });
+
+export interface TekeadsAffiliateResponse {
+  data: AffiliateLink[];
+}
+
+interface AffiliateLink {
+  iri: string;
+  trackingLink: string;
+  imageUrl: string | null;
+}

package/src/referrals/utils.ts

@@ -0,0 +1,14 @@
+import { memoize } from 'lodash';
+
+/** Current page's domain with 'www' stripped off */
+export const getCurrentPageDomain = memoize(() => {
+  return stripSubdomain(window.location.hostname, 'www');
+});
+
+export function stripSubdomain(hostname: string, subdomain: string) {
+  if (hostname.includes(`${subdomain}.`)) {
+    return hostname.slice(subdomain.length + 1);
+  }
+
+  return hostname;
+}

package/src/render-ads-stack.ts

@@ -10,57 +10,178 @@ import {
 import { makeAdsTwView, makeExtensionIframeView, makeTKeyAdView } from './execute-ads-actions/ads-views';
 import { overrideElementStyles } from './execute-ads-actions/override-element-styles';
 import { AdView, CreativeSet } from './types/ad-view';
-import { AdMetadata } from './types/ads-meta';
+import { AdMetadata, AdSource } from './types/ads-meta';
 
-const broadcastMessage = (content: unknown) => window.parent.postMessage(JSON.stringify(content), '*');
+class AdsStack {
+  private wasReady = false;
+  private messageListener: ((event: MessageEvent<any>) => void) | undefined;
+  private responseTimeout: NodeJS.Timeout | undefined;
+  private rootElement: HTMLElement = document.getElementById('root')!;
+  private validAdsCounter = 0;
+  private readonly adsMetadata: AdMetadata[];
+  private currentAdMetadata: AdMetadata | undefined;
 
-/**
- * Tries to render specified ads one-by-one until one of them is loaded or loading of all of them failed. Use it
- * in a dedicated iframe. Sends messages to the parent window on an attempt to render an ad, on successful rendering,
- * on ad resize, and on error.
- */
-export const renderAdsStack = async (
-  adId: string,
-  adsMetadata: (number | AdMetadata)[],
-  origin: string
-): Promise<void> => {
-  if (adsMetadata.length === 0) {
-    broadcastMessage({ id: adId, type: AD_ERROR_MESSAGE_TYPE, reason: 'No more ads to render' });
+  constructor(
+    private readonly id: string,
+    initialAdsMetadata: (number | AdMetadata)[],
+    private readonly origin: string,
+    private readonly pageHasPlacesRules: boolean,
+    private readonly adCategories: string[],
+    private readonly hypelabBlacklistedCampaignsSlugs: string[]
+  ) {
+    this.adsMetadata = initialAdsMetadata.map(adMetadataOrId =>
+      typeof adMetadataOrId === 'number' ? AdsConfiguration.bannerAdsMeta[adMetadataOrId] : adMetadataOrId
+    );
+  }
+
+  startRendering() {
+    if (this.adsMetadata.length === 0) {
+      this.broadcastNoMoreAds();
+
+      return;
+    }
+
+    this.currentAdMetadata = AdsConfiguration.pickNextAdMetadata(
+      this.adsMetadata,
+      this.currentAdMetadata,
+      this.validAdsCounter,
+      this.pageHasPlacesRules,
+      this.adCategories
+    );
+    const adMetadata = this.currentAdMetadata;
+
+    if (!adMetadata) {
+      this.broadcastNoMoreAds();
+
+      return;
+    }
+
+    this.broadcastMessage({ id: this.id, type: AD_RENDER_START_MESSAGE_TYPE, adMetadata: this.currentAdMetadata });
+
+    const { element, creativeSet: initialCreativeSet } = this.placeNewAd(adMetadata);
 
-    return;
+    if (element instanceof HTMLIFrameElement) {
+      this.listenToIframeMessages(element, adMetadata);
+    } else {
+      this.handleValidAd({ ad: { creative_set: initialCreativeSet } });
+    }
   }
 
-  const [adMetadataOrId, ...rest] = adsMetadata;
-  const adMetadata =
-    typeof adMetadataOrId === 'number' ? AdsConfiguration.bannerAdsMeta[adMetadataOrId] : adMetadataOrId;
-  broadcastMessage({ id: adId, type: AD_RENDER_START_MESSAGE_TYPE, adMetadata });
-
-  const { source, dimensions } = adMetadata;
-  let adView: AdView;
-  switch (source.providerName) {
-    case 'Temple':
-      adView = makeTKeyAdView(dimensions.width, dimensions.height, source.native);
-      break;
-    case 'HypeLab':
-    case 'SmartyAds':
-      adView = makeAdsTwView(adId, source, dimensions, origin);
-      break;
-    default:
-      adView = makeExtensionIframeView(adId, source, dimensions);
+  private listenToIframeMessages(element: HTMLIFrameElement, adMetadata: AdMetadata) {
+    const nextAdMetadata = AdsConfiguration.pickNextAdMetadata(
+      this.adsMetadata,
+      adMetadata,
+      this.validAdsCounter,
+      this.pageHasPlacesRules,
+      this.adCategories
+    );
+    this.responseTimeout = setTimeout(
+      () => {
+        console.error(`Timeout exceeded for ${this.id}, ad source: ${JSON.stringify(adMetadata.source)}`);
+        this.handleInvalidAd();
+      },
+      (nextAdMetadata ? 10_000 : 20_000) * (AdsConfiguration.IS_MISES_BROWSER ? 2 : 1)
+    );
+
+    this.messageListener = (event: MessageEvent<any>) => {
+      if (event.source !== element.contentWindow) {
+        return;
+      }
+
+      try {
+        const data = typeof event.data === 'string' ? JSON.parse(event.data) : event.data;
+
+        switch (data.type) {
+          case AD_READY_MESSAGE_TYPE:
+            if (
+              adMetadata.source.providerName === 'HypeLab' &&
+              this.hypelabBlacklistedCampaignsSlugs.includes(data.ad?.campaign_slug) &&
+              nextAdMetadata
+            ) {
+              this.handleInvalidAd();
+              break;
+            }
+
+            this.handleValidAd(data);
+            break;
+          case AD_ERROR_MESSAGE_TYPE:
+            if (!this.wasReady) {
+              this.handleInvalidAd();
+            }
+            break;
+          case AD_RESIZE_MESSAGE_TYPE:
+            const { width, height } = data;
+            if (width > 0 && height > 0) {
+              if (adMetadata.source.native) {
+                element.style.height = `${height}px`;
+              } else {
+                extendOrKeepDimension(element, 'width', width);
+                extendOrKeepDimension(element, 'height', height);
+              }
+              this.broadcastMessage({ ...data, id: this.id });
+            }
+        }
+      } catch (error) {
+        console.error('Message handling error:', error);
+      }
+    };
+
+    window.addEventListener('message', this.messageListener);
+  }
+
+  private handleInvalidAd() {
+    this.removeMessageListener();
+    this.clearResponseTimeout();
+    this.startRendering();
+    this.validAdsCounter = 0;
   }
 
-  const { element } = adView;
-  const rootElement = document.getElementById('root')!;
-  const templeLabelElement = document.getElementById('temple-label')!;
-  rootElement.replaceChildren(element);
+  private removeMessageListener() {
+    if (!this.messageListener) return;
 
-  if (!source.native) templeLabelElement.setAttribute('active', '');
-  else templeLabelElement.removeAttribute('active');
+    window.removeEventListener('message', this.messageListener);
+    this.messageListener = undefined;
+  }
+
+  private placeNewAd(adMetadata: AdMetadata) {
+    document.body.style.backgroundColor = adMetadata.source.native ? 'transparent' : '#F2F2F2';
+
+    const { source, dimensions } = adMetadata;
+    let adView: AdView;
+    switch (source.providerName) {
+      case 'Temple':
+        adView = makeTKeyAdView(dimensions.width, dimensions.height, source.native);
+        break;
+      case 'HypeLab':
+      case 'SmartyAds':
+        adView = makeAdsTwView(this.id, source, dimensions, this.origin);
+        break;
+      default:
+        adView = makeExtensionIframeView(this.id, source, dimensions);
+    }
+
+    const { element } = adView;
+    const templeLabelElement = document.getElementById('temple-label')!;
+    this.rootElement.replaceChildren(element);
+
+    if (!source.native) templeLabelElement.setAttribute('active', '');
+    else templeLabelElement.removeAttribute('active');
+
+    return adView;
+  }
+
+  private updateBackground(source: AdSource, creativeSet: CreativeSet = {}) {
+    const prevBackgroundElement = document.getElementById(BACKGROUND_ELEMENT_ID);
+    if (source.native && prevBackgroundElement) {
+      this.rootElement.removeChild(prevBackgroundElement);
+    }
+
+    if (source.native) {
+      return;
+    }
 
-  const updateBackground = (creativeSet: CreativeSet = {}) => {
     try {
       const { image, video } = creativeSet;
-      const prevBackgroundElement = document.getElementById(BACKGROUND_ELEMENT_ID);
       let backgroundElement: HTMLImageElement | HTMLVideoElement | undefined;
       if (image) {
         backgroundElement = document.createElement('img');
@@ -77,7 +198,7 @@ export const renderAdsStack = async (
       }
 
       if (!backgroundElement && prevBackgroundElement) {
-        rootElement.removeChild(prevBackgroundElement);
+        this.rootElement.removeChild(prevBackgroundElement);
       }
 
       if (!backgroundElement) return;
@@ -96,76 +217,71 @@ export const renderAdsStack = async (
         filter: 'blur(12px)'
       });
       if (prevBackgroundElement) {
-        rootElement.replaceChild(backgroundElement, prevBackgroundElement);
+        this.rootElement.replaceChild(backgroundElement, prevBackgroundElement);
       } else {
-        rootElement.appendChild(backgroundElement);
+        this.rootElement.prepend(backgroundElement);
       }
     } catch (e) {
       console.error(e);
     }
-  };
-
-  if (element instanceof HTMLIFrameElement) {
-    return new Promise<void>((resolve, reject) => {
-      const responseTimeout = setTimeout(
-        () => {
-          window.removeEventListener('message', messageListener);
-          reject(new Error(`Timeout exceeded for ${adId}, ad source: ${JSON.stringify(source)}`));
-        },
-        (rest.length === 0 ? 20_000 : 10_000) * (AdsConfiguration.IS_MISES_BROWSER ? 2 : 1)
-      );
-
-      let wasReady = false;
-      const messageListener = (event: MessageEvent<any>) => {
-        if (event.source !== element.contentWindow) {
-          return;
-        }
+  }
 
-        try {
-          const data = typeof event.data === 'string' ? JSON.parse(event.data) : event.data;
+  private broadcastMessage(content: unknown) {
+    window.parent.postMessage(JSON.stringify(content), '*');
+  }
 
-          switch (data.type) {
-            case AD_READY_MESSAGE_TYPE:
-              if (!wasReady) {
-                wasReady = true;
-                broadcastMessage({ id: adId, type: AD_READY_MESSAGE_TYPE, adMetadata });
-                clearTimeout(responseTimeout);
-                resolve();
-              }
-              updateBackground(data.ad?.creative_set);
-              break;
-            case AD_ERROR_MESSAGE_TYPE:
-              if (!wasReady) {
-                window.removeEventListener('message', messageListener);
-                clearTimeout(responseTimeout);
-                reject(new Error(data.reason ?? 'Unknown error'));
-              }
-              break;
-            case AD_RESIZE_MESSAGE_TYPE:
-              const { width, height } = data;
-              if (width > 0 && height > 0) {
-                if (adMetadata.source.native) {
-                  element.style.height = `${height}px`;
-                } else {
-                  extendOrKeepDimension(element, 'width', width);
-                  extendOrKeepDimension(element, 'height', height);
-                }
-                broadcastMessage({ ...data, id: adId });
-              }
-          }
-        } catch (error) {
-          console.error('Observing error:', error);
-        }
-      };
+  private broadcastNoMoreAds() {
+    this.broadcastMessage({ id: this.id, type: AD_ERROR_MESSAGE_TYPE, reason: 'No more ads to render' });
+  }
 
-      window.addEventListener('message', messageListener);
-    }).catch(e => {
-      console.error(e);
+  private clearResponseTimeout() {
+    if (this.responseTimeout !== undefined) {
+      clearTimeout(this.responseTimeout);
+      this.responseTimeout = undefined;
+    }
+  }
 
-      return renderAdsStack(adId, rest, origin);
-    });
+  private handleValidAd(data: any) {
+    const adMetadata = this.currentAdMetadata;
+
+    if (!adMetadata) {
+      return;
+    }
+
+    if (!this.wasReady) {
+      this.wasReady = true;
+      this.broadcastMessage({ id: this.id, type: AD_READY_MESSAGE_TYPE, adMetadata });
+    }
+    this.validAdsCounter++;
+    this.clearResponseTimeout();
+    this.updateBackground(adMetadata.source, data.ad?.creative_set);
   }
+}
 
-  updateBackground(adView.creativeSet);
-  broadcastMessage({ id: adId, type: AD_READY_MESSAGE_TYPE, adMetadata });
+/**
+ * Tries to render specified ads one-by-one until one of them is loaded or loading of all of them failed. Use it
+ * in a dedicated iframe. Sends messages to the parent window on an attempt to render an ad, on successful rendering,
+ * on ad resize, and on error.
+ */
+export const renderAdsStack = (
+  adId: string,
+  adsMetadata: (number | AdMetadata)[],
+  origin: string,
+  pageHasPlacesRules = false,
+  adCategories: string[],
+  hypelabBlacklistedCampaignsSlugs: string[]
+) => {
+  try {
+    const adsStack = new AdsStack(
+      adId,
+      adsMetadata,
+      origin,
+      pageHasPlacesRules,
+      adCategories,
+      hypelabBlacklistedCampaignsSlugs
+    );
+    adsStack.startRendering();
+  } catch (error) {
+    console.error('Error while rendering ads stack:', error);
+  }
 };

package/src/temple-wallet-api.ts

@@ -1,4 +1,3 @@
-import axiosFetchAdapter from '@vespaiach/axios-fetch-adapter';
 import axios, { AxiosInstance, AxiosResponse } from 'axios';
 
 import {
@@ -25,7 +24,7 @@ export class TempleWalletApi {
   constructor(baseUrl: string) {
     this.api = axios.create({
       baseURL: new URL('/api', baseUrl).href,
-      adapter: axiosFetchAdapter
+      adapter: 'fetch'
     });
   }
 
@@ -87,6 +86,10 @@ export class TempleWalletApi {
     )
   );
 
+  getBlacklistedHypelabCampaignsSlugs = withFetchDataExtraction(() =>
+    this.api.get<string[]>('/temple-wallet-ads/hypelab-campaigns-blacklist')
+  );
+
   getAllRules = async (): Promise<RawAllAdsRules> => {
     const [
       adPlacesRulesForAllDomains,
@@ -98,7 +101,8 @@ export class TempleWalletApi {
       adsReplaceUrlsBlacklist,
       providersNegativeSelectors,
       elementsToHideOrRemoveRules,
-      providersCategories
+      providersCategories,
+      blacklistedHypelabCampaignsSlugs
     ] = await Promise.all([
       this.getAdPlacesRulesForAllDomains(),
       this.getProvidersRulesForAllDomains(),
@@ -109,7 +113,8 @@ export class TempleWalletApi {
       this.getAdsReplaceUrlsBlacklist(),
       this.getNegativeSelectorsForAllProviders(),
       this.getElementsToHideOrRemoveRules(),
-      this.getProvidersCategories()
+      this.getProvidersCategories(),
+      this.getBlacklistedHypelabCampaignsSlugs()
     ]);
 
     return {
@@ -123,6 +128,7 @@ export class TempleWalletApi {
       providersNegativeSelectors,
       elementsToHideOrRemoveRules,
       providersCategories,
+      blacklistedHypelabCampaignsSlugs,
       timestamp: Date.now()
     };
   };