Pull request #574: AG-23564 Fallback cosmetic result request for fram…

…es, cached by sw

Merge in ADGUARD-FILTERS/tsurlfilter from feature/AG-23564 to master

Squashed commit of the following:

commit e16b6ad
Author: Vladimir Zhelvis <v.zhelvis@adguard.com>
Date:   Mon Jul 10 20:46:59 2023 +0300

    update changelog

commit e91453c
Merge: 23fceab 88914a5
Author: Vladimir Zhelvis <v.zhelvis@adguard.com>
Date:   Mon Jul 10 20:40:55 2023 +0300

    Merge branch 'master' into feature/AG-23564

commit 23fceab
Author: Vladimir Zhelvis <v.zhelvis@adguard.com>
Date:   Mon Jul 10 20:40:22 2023 +0300

    add cosmetic result fallback calculation

packages/tswebextension/CHANGELOG.md

@@ -7,11 +7,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 <!-- TODO: manually add compare links for version to the end of the file -->
 <!-- e.g. [0.1.2]: https://github.com/AdguardTeam/tsurlfilter/compare/tswebextension-v0.1.1...tswebextension-v0.1.2 -->
 
-## Unreleased
+## [0.3.4] - 2023-07-11
 
 ### Added
 - Support of $elemhide, $specifichide and $generichide modifiers.
 
+### Fixed
+- Cosmetic rule matching for frames loaded from the service worker cache.
+
+
 ## [0.3.3] - 2023-06-19
 
 ### Changed

packages/tswebextension/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adguard/tswebextension",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "This is a TypeScript library that implements AdGuard's extension API",
   "main": "dist/index.js",
   "typings": "dist/types/lib/mv2/background/index.d.ts",

packages/tswebextension/src/lib/mv2/background/cosmetic-api.ts

@@ -1,8 +1,7 @@
+/* eslint-disable jsdoc/require-returns */
 import { nanoid } from 'nanoid';
-import type {
-    CosmeticResult,
-    CosmeticRule,
-} from '@adguard/tsurlfilter';
+import { RequestType } from '@adguard/tsurlfilter/es/request-type';
+import type { CosmeticResult, CosmeticRule } from '@adguard/tsurlfilter';
 
 import { appContext } from './context';
 import { getDomain } from '../../common/utils/url';
@@ -12,7 +11,8 @@ import { buildScriptText } from './injection-helper';
 import { localScriptRulesService } from './services/local-script-rules-service';
 import { stealthApi } from './stealth-api';
 import { TabsApi } from './tabs/tabs-api';
-import { tabsApi } from './api';
+import { MAIN_FRAME_ID } from './tabs/frame';
+import { engineApi, tabsApi } from './api';
 import { getErrorMessage } from '../../common/error';
 import { logger } from '../../common/utils/logger';
 
@@ -209,12 +209,31 @@ export class CosmeticApi {
             extCssRules: null,
         };
 
-        const frame = tabsApi.getTabFrame(tabId, frameId);
+        const tabContext = tabsApi.getTabContext(tabId);
 
-        if (!frame?.cosmeticResult) {
+        if (!tabContext) {
+            return data;
+        }
+
+        const frame = tabContext.frames.get(frameId);
+
+        if (!frame) {
             return data;
         }
 
+        /**
+         * Cosmetic result may not be committed to frame context during worker request processing.
+         * We use engine request as a fallback for this case.
+         */
+        if (!frame?.cosmeticResult) {
+            frame.cosmeticResult = engineApi.matchCosmetic({
+                requestUrl: frame.url,
+                frameUrl: frame.url,
+                requestType: frameId === MAIN_FRAME_ID ? RequestType.Document : RequestType.SubDocument,
+                frameRule: tabContext.mainFrameRule,
+            });
+        }
+
         data.extCssRules = CosmeticApi.getExtCssRules(frame.cosmeticResult, areHitsStatsCollected);
 
         return data;

packages/tswebextension/src/lib/mv2/background/engine-api.ts

@@ -163,6 +163,28 @@ export class EngineApi {
         return this.engine.matchRequest(request, frameRule);
     }
 
+    /**
+     * Searched for cosmetic rules by match query.
+     *
+     * @param matchQuery Query against which the request would be matched.
+     * @returns Cosmetic result.
+     */
+    public matchCosmetic(matchQuery: MatchQuery): CosmeticResult {
+        if (!this.engine || !this.isFilteringEnabled) {
+            return new CosmeticResult();
+        }
+
+        const matchingResult = this.matchRequest(matchQuery);
+
+        if (!matchingResult) {
+            return new CosmeticResult();
+        }
+
+        const cosmeticOption = matchingResult.getCosmeticOption();
+
+        return this.getCosmeticResult(matchQuery.requestUrl, cosmeticOption);
+    }
+
     /**
      * Matches current frame url and returns rule if found.
      *

packages/tswebextension/src/lib/mv2/background/web-request-api.ts

@@ -638,16 +638,34 @@ export class WebRequestApi {
         const {
             frameId,
             tabId,
+            url,
         } = params;
 
-        const frame = tabsApi.getTabFrame(tabId, frameId);
+        const tabContext = tabsApi.getTabContext(tabId);
 
-        if (!frame
-            || !frame.cosmeticResult
-            || !frame.requestId) {
+        if (!tabContext) {
             return;
         }
 
+        const frame = tabContext.frames.get(frameId);
+
+        if (!frame) {
+            return;
+        }
+
+        /**
+         * Cosmetic result may not be committed to frame context during worker request processing.
+         * We use engine request as a fallback for this case.
+         */
+        if (!frame.cosmeticResult) {
+            frame.cosmeticResult = engineApi.matchCosmetic({
+                requestUrl: url,
+                frameUrl: url,
+                requestType: frameId === MAIN_FRAME_ID ? RequestType.Document : RequestType.SubDocument,
+                frameRule: tabContext.mainFrameRule,
+            });
+        }
+
         const { cosmeticResult } = frame;
 
         const cssInjectionParams: ApplyCssRulesParams = {
@@ -712,7 +730,6 @@ export class WebRequestApi {
 
         if (!mainFrame
             || !mainFrame.cosmeticResult
-            || !mainFrame.requestId
             || !WebRequestApi.isLocalFrame(url, frameId, mainFrame.url)) {
             return;
         }