Adblock Support for Embeds (#308)

Fixes #307 

- Adds optional adblock support, via wabac.js (dependent on
webrecorder/wabac.js#167).
- For now, adblock enabled only for embeds via the `useAdblock`
attribute, and can be enabled per archived item.
- By default, adblock filter rules from
[EasyList](https://easylist.to/easylist/easylist.txt) are used, however,
a custom filter rules file can be used via `adblockRulesUrl` attribute
(default is ./adblock/adblock.gz)
- Added `fetch-adblock.sh` script to fetch latest easylist, filter out
`##` rules and compress to `./adblock/adblock.gz`
- Not yet possible to enable adblock for standalone browsing via
replayweb.page
- bumps version to 2.0.0-beta.3

.gitignore

@@ -12,6 +12,7 @@ coverage/
 **/__pycache__/
 dist/
 plugins-*/
+adblock/adblock.gz
 !mkdocs/site/docs/examples/*.warc
 mkdocs/_genhtml/
 mkdocs/site/index.html
@@ -19,4 +20,5 @@ mkdocs/site/embed.html
 mkdocs/site/webmanifest.json
 mkdocs/site/favicons
 mkdocs/site/ruffle
+mkdocs/site/adblock
 ipfs-core.min.js

adblock/fetch-adblock.sh

@@ -0,0 +1,4 @@
+#!/bin/bash
+# Fetch latest rules from easylist, filter out only css selector hiding rules (rules containing '##')
+curr=$(dirname "${BASH_SOURCE[0]}")
+curl "https://easylist.to/easylist/easylist.txt" | grep '##' | gzip -9 > $curr/adblock.gz

mkdocs/site/docs/embedding/index.md

@@ -151,6 +151,8 @@ The `#!html <replay-web-page>` tag is a web component that supports a number of
 | `requireSubdomainIframe` | If set, will only load embed in an iframe loaded from a subdomain, for increased origin isolation. |
 | `loading="eager"` | If set, will load the entire WACZ file at once (regardless of size), and not attempt on-demand range request loading. |
 | `useRuffle` | If set, will enable include Ruffle Flash emulator. Must include the `ruffle/` directory in `replayBase`. |
+| `useAdblock` | If set, will enable adblocking, by injecting CSS stylesheets to hide ads based on a list of ad filter rules.  By default, the [EasyList](https://easylist.to/) filter rules are used. |
+| `adblockRulesUrl` | Provide a URL to a custom [Adblock Plus filter rules](https://adblockplus.org/filters) formatted text file. Note that only rules containing CSS selectors (via `##` filter) are used, other lines in the rules list are ignored. |
 
 ## Further Examples
 

mkdocs/sitefiles.txt

@@ -5,3 +5,4 @@ embed.html
 webmanifest.json
 favicons
 ruffle
+adblock

package.json

@@ -1,7 +1,7 @@
 {
   "name": "replaywebpage",
   "productName": "ReplayWeb.page",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.3",
   "description": "Serverless Web Archive Replay",
   "repository": "https://github.com/webrecorder/replayweb.page",
   "homepage": "https://replayweb.page/",
@@ -12,7 +12,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.4",
     "@shoelace-style/shoelace": "^2.8.0",
-    "@webrecorder/wabac": "^2.17.3",
+    "@webrecorder/wabac": "^2.18.0",
     "bulma": "^0.9.3",
     "electron-log": "^4.4.1",
     "electron-updater": "^5.3.0",
@@ -73,7 +73,7 @@
     "/index.html"
   ],
   "scripts": {
-    "build": "webpack --mode production",
+    "build": "webpack --mode production && ./adblock/fetch-adblock.sh",
     "build-dev": "webpack --mode development",
     "build-docs": "yarn run build && cd mkdocs && ./copy-site.sh && mkdocs build",
     "publish-docs": "yarn run build && cd mkdocs && ./copy-site.sh && mkdocs gh-deploy --force",

src/appmain.ts

@@ -608,6 +608,11 @@ export class ReplayWebApp extends LitElement {
       this.loadInfo!.extraConfig.baseUrl = this.pageParams.get("basePageUrl");
     }
 
+    if (this.pageParams.get("adblockUrl")) {
+      this.loadInfo!.extraConfig = this.loadInfo!.extraConfig || {};
+      this.loadInfo!.extraConfig.adblockUrl = this.pageParams.get("adblockUrl");
+    }
+
     if (this.pageParams.get("customColl")) {
       this.loadInfo!.customColl = this.pageParams.get("customColl");
     }

src/embed.ts

@@ -29,6 +29,8 @@ let defaultReplayFile = "";
 
 const DEFAULT_REPLAY_BASE = "https://replayweb.page/";
 
+const DEFAULT_ADBLOCK_FILE = "./adblock/adblock.gz";
+
 // ===========================================================================
 class Embed extends LitElement {
   @property({ type: String }) url = "";
@@ -64,6 +66,9 @@ class Embed extends LitElement {
   @property({ type: Boolean }) noCache = false;
   @property({ type: Boolean }) hideOffscreen: boolean | undefined;
 
+  @property({ type: Boolean }) useAdblock = false;
+  @property({ type: String }) adblockRulesUrl = DEFAULT_ADBLOCK_FILE;
+
   @property({ type: String }) newWindowBase = "";
 
   @property({ type: String }) errorMessage:
@@ -287,6 +292,7 @@ class Embed extends LitElement {
         loading?: "eager";
         swName?: string;
         ruffle?: "1";
+        adblockUrl?: string;
       } = {
         source,
         customColl: this.coll,
@@ -324,6 +330,10 @@ class Embed extends LitElement {
         params.ruffle = "1";
       }
 
+      if (this.useAdblock && this.adblockRulesUrl) {
+        params.adblockUrl = this.adblockRulesUrl;
+      }
+
       this.paramString = new URLSearchParams(
         // Converting to unknown here so that we can ignore the URL -> string conversion necessary for the types to work out
         params as unknown as Record<string, string>,

src/item.ts

@@ -72,6 +72,7 @@ export type LoadInfo = {
     baseUrl?: unknown;
     headers?: unknown;
     recording?: unknown;
+    adblockUrl?: string | null;
   };
   customColl?: string | null;
   noWebWorker?: boolean;

yarn.lock

@@ -905,10 +905,10 @@
   resolved "https://registry.yarnpkg.com/@webpack-cli/serve/-/serve-2.0.1.tgz#34bdc31727a1889198855913db2f270ace6d7bf8"
   integrity sha512-0G7tNyS+yW8TdgHwZKlDWYXFA6OJQnoLCQvYKkQP0Q2X205PSQ6RNUj0M+1OB/9gRQaUZ/ccYfaxd0nhaWKfjw==
 
-"@webrecorder/wabac@^2.17.3":
-  version "2.17.3"
-  resolved "https://registry.yarnpkg.com/@webrecorder/wabac/-/wabac-2.17.3.tgz#7e059aeef3eea68958793552dd1f96db9a19ce1e"
-  integrity sha512-D5CEMTP/+obOD6dh6ZIDNhY905AekzT12RMTrgL7Rq4RTB3mR6d1FKXDWh1MftPIvowlAGBBTu2C3KpFby+KZQ==
+"@webrecorder/wabac@^2.18.0":
+  version "2.18.0"
+  resolved "https://registry.yarnpkg.com/@webrecorder/wabac/-/wabac-2.18.0.tgz#6eafa51ffb53e785a9b7a36bd8c12cbf60f06cc2"
+  integrity sha512-tpZ7saCQMWcrbQrB7421ycfucKFFBRXg3OrTSPkk71FtGSQ8LFtmCPnpWWu/wJgWcnC7ka7CnIuaX3rW2A42oA==
   dependencies:
     "@peculiar/asn1-ecc" "^2.3.4"
     "@peculiar/asn1-schema" "^2.3.3"