Safari MV3 Prototype

.gitignore

@@ -13,6 +13,7 @@ public/css/*.*
 build/firefox
 build/chrome
 build/chrome-mv3
+build/safari
 build/test
 test/background.js
 integration-test/artifacts/
@@ -21,6 +22,7 @@ shared/content-scope-scripts/
 unit-test/data/reference-tests/
 shared/data/smarter_encryption.txt
 shared/data/bundled/smarter-encryption-rules.json
+shared/data/bundled/tds.json
 /test-results/
 /playwright-report/
 /playwright/.cache/

Makefile

@@ -28,8 +28,17 @@ MAKE = make -j4 $(type) browser=$(browser) type=$(type)
 watch:
 	while true; do $(MAKE) -q || $(MAKE); sleep 1; done
 
+safari: dev $(BUILD_DIR)/data/bundled/tds-rules.json
+	rm -rf browsers/safari/Shared\ \(Extension\)/Resources/*
+	cp -r $(BUILD_DIR)/ browsers/safari/safari-mv3/Shared\ \(Extension\)/Resources/
 .PHONY: release dev
 
+$(BUILD_DIR)/data/bundled/tds-rules.json: $(BUILD_DIR)/data/bundled/tds.json $(BUILD_DIR)/data/surrogates.txt
+	node scripts/buildSafariBlocklist.mjs $< $(SURROGATES_DIR) `dirname $@`
+
+$(BUILD_DIR)/data/bundled/tds.json:
+	curl https://staticcdn.duckduckgo.com/trackerblocking/v4/tds.json > $@
+
 ###--- Unit tests ---###
 unit-test: build/test/background.js build/test/ui.js build/test/shared-utils.js
 	$(KARMA) start karma.conf.js
@@ -137,14 +146,25 @@ SURROGATES_DIR = node_modules/@duckduckgo/tracker-surrogates/surrogates
 BUILD_FOLDERS = $(BUILD_DIR)/public/js/content-scripts $(BUILD_DIR)/public/css
 BROWSER_TYPE = $(browser)
 COPY_DIRS = $(BUILD_DIR)/manifest.json
+# Specify the set of scripts for the extension background
+BACKGROUND_JS = shared/js/background/background.js
+CSS_SCRIPT = $(browser)
+ifeq ($(type), dev)
+	BACKGROUND_JS := shared/js/background/debug.js $(BACKGROUND_JS)
+endif
+ifeq ($(browser), safari)
+	BACKGROUND_JS := shared/js/background/safari.js
+	BROWSER_TYPE := chrome
+	CSS_SCRIPT := chrome-mv3
+endif
 ifeq ($(browser),chrome-mv3)
 	BROWSER_TYPE := chrome
 	COPY_DIRS += $(BUILD_DIR)/managed-schema.json
 endif
 
 ## Copy tasks: Copying resources that don't need and compiling
-$(BUILD_DIR)/manifest.json: browsers/$(browser)/*
-	cp -r browsers/$(browser)/* $(BUILD_DIR)
+$(BUILD_DIR)/manifest.json: browsers/$(browser)/manifest.json
+	cp -r $< $@
 
 build/chrome-mv3/$(type)/managed-schema.json: browsers/chrome/managed-schema.json
 	cp $< $@
@@ -182,11 +202,6 @@ copy-autofill: $(BUILD_DIR)/public/js/content-scripts/autofill.js $(BUILD_DIR)/p
 copy: $(COPY_DIRS) $(BUILD_DIR)/_locales $(BUILD_DIR)/data $(BUILD_DIR)/dashboard $(BUILD_DIR)/web_accessible_resources $(BUILD_DIR)/data/surrogates.txt $(BUILD_DIR)/public/font copy-autofill
 
 ##--- Build targets ---#
-# Specify the set of scripts for the extension background
-BACKGROUND_JS = shared/js/background/background.js
-ifeq ($(type), dev)
-	BACKGROUND_JS := shared/js/background/debug.js $(BACKGROUND_JS)
-endif
 
 JS_BUNDLES = background.js base.js inject.js content-scripts/content-scope-messaging.js feedback.js options.js devtools-panel.js list-editor.js newtab.js
 js: $(addprefix $(BUILD_DIR)/public/js/, $(JS_BUNDLES))
@@ -196,7 +211,7 @@ $(BUILD_DIR)/public/js/background.js: $(SOURCE_FILES)
 	$(BROWSERIFY) $(BACKGROUND_JS) -o $@
 
 $(BUILD_DIR)/public/js/content-scripts/content-scope-messaging.js: shared/js/content-scripts/content-scope-messaging.js
-	cp $< $@
+	$(BROWSERIFY) $< > $@
 
 ## Extension UI/Devtools scripts
 $(BUILD_DIR)/public/js/base.js: $(SOURCE_FILES)
@@ -222,7 +237,7 @@ $(BUILD_DIR)/public/js/newtab.js: $(SOURCE_FILES)
 shared/data/bundled/tracker-lookup.json:
 	node scripts/bundleTrackers.mjs
 
-$(BUILD_DIR)/public/js/inject.js: node_modules/@duckduckgo/content-scope-scripts/build/$(browser)/inject.js shared/data/bundled/tracker-lookup.json shared/data/bundled/extension-config.json
+$(BUILD_DIR)/public/js/inject.js: node_modules/@duckduckgo/content-scope-scripts/build/$(CSS_SCRIPT)/inject.js shared/data/bundled/tracker-lookup.json shared/data/bundled/extension-config.json
 	node scripts/bundleContentScopeScripts.mjs $@ $^
 
 # SASS

browsers/safari/manifest.json

@@ -0,0 +1,85 @@
+{
+    "name": "__MSG_appName__",
+    "description": "__MSG_appDesc__",
+    "default_locale": "en",
+    "version": "2023.2.17",
+    "icons": {
+        "16": "img/icon_16.png",
+        "48": "img/icon_48.png",
+        "128": "img/icon_128.png"
+    },
+    "manifest_version": 3,
+    "action": {
+        "default_popup": "dashboard/html/browser.html",
+        "default_icon": "img/icon_browser_action.png"
+    },
+    "options_page": "html/options.html",
+    "background": {
+        "service_worker": "public/js/background.js"
+    },
+    "content_scripts": [
+        {
+            "matches": [
+                "<all_urls>"
+            ],
+            "match_about_blank": true,
+            "all_frames": true,
+            "css": [
+                "public/css/noatb.css"
+            ],
+            "run_at": "document_start"
+        },
+        {
+            "js": [
+                "public/js/content-scripts/autofill.js"
+            ],
+            "css": [
+                "public/css/autofill-host-styles.css"
+            ],
+            "matches": [
+                "<all_urls>"
+            ],
+            "all_frames": true,
+            "run_at": "document_start"
+        }
+    ],
+    "permissions": [
+        "activeTab",
+        "alarms",
+        "contextMenus",
+        "declarativeNetRequest",
+        "declarativeNetRequestFeedback",
+        "scripting",
+        "storage",
+        "tabs",
+        "webNavigation",
+        "cookies"
+    ],
+    "host_permissions": [
+        "https://*.duckduckgo.com/*",
+        "*://*/*"
+    ],
+    "web_accessible_resources": [
+        {
+            "resources": [
+                "/web_accessible_resources/*",
+                "/img/logo-small.svg",
+                "/public/css/autofill.css",
+                "/public/font/*",
+                "/html/tracker-stats.html"
+            ],
+            "matches": [
+                "<all_urls>"
+            ]
+        }
+    ],
+    "declarative_net_request": {
+        "rule_resources": [
+            {
+                "id": "tds2",
+                "enabled": true,
+                "path": "data/bundled/tds-rules.json"
+            }
+        ]
+    }
+}

browsers/safari/safari-mv3/Shared (App)/Assets.xcassets/AccentColor.colorset/Contents.json

@@ -0,0 +1,11 @@
+{
+  "colors" : [
+    {
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

browsers/safari/safari-mv3/Shared (App)/Assets.xcassets/AppIcon.appiconset/Contents.json

@@ -0,0 +1,63 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "platform" : "ios",
+      "size" : "1024x1024"
+    },
+    {
+      "idiom" : "mac",
+      "scale" : "1x",
+      "size" : "16x16"
+    },
+    {
+      "idiom" : "mac",
+      "scale" : "2x",
+      "size" : "16x16"
+    },
+    {
+      "idiom" : "mac",
+      "scale" : "1x",
+      "size" : "32x32"
+    },
+    {
+      "idiom" : "mac",
+      "scale" : "2x",
+      "size" : "32x32"
+    },
+    {
+      "idiom" : "mac",
+      "scale" : "1x",
+      "size" : "128x128"
+    },
+    {
+      "idiom" : "mac",
+      "scale" : "2x",
+      "size" : "128x128"
+    },
+    {
+      "idiom" : "mac",
+      "scale" : "1x",
+      "size" : "256x256"
+    },
+    {
+      "idiom" : "mac",
+      "scale" : "2x",
+      "size" : "256x256"
+    },
+    {
+      "idiom" : "mac",
+      "scale" : "1x",
+      "size" : "512x512"
+    },
+    {
+      "idiom" : "mac",
+      "scale" : "2x",
+      "size" : "512x512"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

browsers/safari/safari-mv3/Shared (App)/Assets.xcassets/Contents.json

@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

browsers/safari/safari-mv3/Shared (App)/Assets.xcassets/LargeIcon.imageset/Contents.json

@@ -0,0 +1,20 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

browsers/safari/safari-mv3/Shared (App)/Base.lproj/Main.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'">
+
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+
+    <link rel="stylesheet" href="../Style.css">
+    <script src="../Script.js" defer></script>
+</head>
+<body>
+    <img src="../Icon.png" width="128" height="128" alt="safari-mv3 Icon">
+    <p class="platform-ios">You can turn on safari-mv3’s Safari extension in Settings.</p>
+    <p class="platform-mac state-unknown">You can turn on safari-mv3’s extension in Safari Extensions preferences.</p>
+    <p class="platform-mac state-on">safari-mv3’s extension is currently on. You can turn it off in Safari Extensions preferences.</p>
+    <p class="platform-mac state-off">safari-mv3’s extension is currently off. You can turn it on in Safari Extensions preferences.</p>
+    <button class="platform-mac open-preferences">Quit and Open Safari Extensions Preferences…</button>
+</body>
+</html>

browsers/safari/safari-mv3/Shared (App)/Resources/Script.js

@@ -0,0 +1,24 @@
+function show(platform, enabled, useSettingsInsteadOfPreferences) {
+    document.body.classList.add(`platform-${platform}`);
+
+    if (useSettingsInsteadOfPreferences) {
+        document.getElementsByClassName('platform-mac state-on')[0].innerText = "safari-mv3’s extension is currently on. You can turn it off in the Extensions section of Safari Settings.";
+        document.getElementsByClassName('platform-mac state-off')[0].innerText = "safari-mv3’s extension is currently off. You can turn it on in the Extensions section of Safari Settings.";
+        document.getElementsByClassName('platform-mac state-unknown')[0].innerText = "You can turn on safari-mv3’s extension in the Extensions section of Safari Settings.";
+        document.getElementsByClassName('platform-mac open-preferences')[0].innerText = "Quit and Open Safari Settings…";
+    }
+
+    if (typeof enabled === "boolean") {
+        document.body.classList.toggle(`state-on`, enabled);
+        document.body.classList.toggle(`state-off`, !enabled);
+    } else {
+        document.body.classList.remove(`state-on`);
+        document.body.classList.remove(`state-off`);
+    }
+}
+
+function openPreferences() {
+    webkit.messageHandlers.controller.postMessage("open-preferences");
+}
+
+document.querySelector("button.open-preferences").addEventListener("click", openPreferences);

browsers/safari/safari-mv3/Shared (App)/Resources/Style.css

@@ -0,0 +1,61 @@
+* {
+    -webkit-user-select: none;
+    -webkit-user-drag: none;
+    cursor: default;
+}
+
+:root {
+    color-scheme: light dark;
+
+    --spacing: 20px;
+}
+
+html {
+    height: 100%;
+}
+
+body {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+
+    gap: var(--spacing);
+    margin: 0 calc(var(--spacing) * 2);
+    height: 100%;
+
+    font: -apple-system-short-body;
+    text-align: center;
+}
+
+body:not(.platform-mac, .platform-ios) :is(.platform-mac, .platform-ios) {
+    display: none;
+}
+
+body.platform-ios .platform-mac {
+    display: none;
+}
+
+body.platform-mac .platform-ios {
+    display: none;
+}
+
+body.platform-ios .platform-mac {
+    display: none;
+}
+
+body:not(.state-on, .state-off) :is(.state-on, .state-off) {
+    display: none;
+}
+
+body.state-on :is(.state-off, .state-unknown) {
+    display: none;
+}
+
+body.state-off :is(.state-on, .state-unknown) {
+    display: none;
+}
+
+button {
+    font-size: 1em;
+}