Merge pull request #9 from wsg-ariadne/midsem

midsem
wsg-ariadne · Apr 21, 2023 · fda9eb5 · fda9eb5
2 parents e4ae6ed + 789cd7c
commit fda9eb5
Show file tree

Hide file tree

Showing 52 changed files with 12,465 additions and 23,992 deletions.
diff --git a/.github/workflows/build-extension.yml b/.github/workflows/build-extension.yml
@@ -0,0 +1,33 @@
+name: build-extension
+run-name: Build Ariadne
+
+# Only build on pushes to main
+on:
+  push:
+    branches:
+      - 'main'
+  pull_request:
+    branches:
+      - 'main'
+
+jobs:
+  build:
+    name: Build extension
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+      - name: Install dependencies
+        run: npm ci
+      - name: Build extension (Manifest V2)
+        run: npm run package
+      - name: Build extension (Manifest V3)
+        run: npm run package:v3
+      - name: Upload artifacts
+        uses: xresloader/upload-to-github-release@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          file: "web-ext-artifacts/*.zip"
+          tags: true
+        if: github.event_name != 'pull_request'
diff --git a/.github/workflows/chromium-build.yml b/.github/workflows/chromium-build.yml
diff --git a/.gitignore b/.gitignore
@@ -106,5 +106,8 @@ dist
 # macOS crap
 **/.DS_Store
 
-# Built extension
-release.zip
+# Build artifacts
+web-ext-artifacts/
+
+# Local env variables
+*.local
diff --git a/README.md b/README.md
@@ -1,39 +1,3 @@
 # ariadne
 
 Detect deceptive design on the Web
-
-## Development 
-
-This extension was created with [Extension CLI](https://oss.mobilefirst.me/extension-cli/)!
-
-If you find this software helpful [star](https://github.com/MobileFirstLLC/extension-cli/) or [sponsor](https://github.com/sponsors/MobileFirstLLC) this project.
-
-
-### Available Commands
-
-| Commands | Description |
-| --- | --- |
-| `npm run start` | build extension, watch file changes |
-| `npm run build` | generate release version |
-| `npm run docs` | generate source code docs |
-| `npm run clean` | remove temporary files |
-| `npm run test` | run unit tests |
-| `npm run sync` | update config files |
-
-For CLI instructions see [User Guide &rarr;](https://oss.mobilefirst.me/extension-cli/)
-
-### Learn More
-
-**Extension Developer guides**
-
-- [Getting started with extension development](https://developer.chrome.com/extensions/getstarted)
-- Manifest configuration: [version 2](https://developer.chrome.com/extensions/manifest) - [version 3](https://developer.chrome.com/docs/extensions/mv3/intro/)
-- [Permissions reference](https://developer.chrome.com/extensions/declare_permissions)
-- [Chrome API reference](https://developer.chrome.com/docs/extensions/reference/)
-
-**Extension Publishing Guides**
-
-- [Publishing for Chrome](https://developer.chrome.com/webstore/publish)
-- [Publishing for Edge](https://docs.microsoft.com/en-us/microsoft-edge/extensions-chromium/publish/publish-extension)
-- [Publishing for Opera addons](https://dev.opera.com/extensions/publishing-guidelines/)
-- [Publishing for Firefox](https://extensionworkshop.com/documentation/publish/submitting-an-add-on/)
diff --git a/background/background.html b/background/background.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>ariadne control panel</title>
+  </head>
+  <body>
+    <p>hello from ariadne in the background</p>
+    <script type="module" src="./background.js"></script>
+  </body>
+</html>
diff --git a/background/background.js b/background/background.js
@@ -0,0 +1,185 @@
+import * as browser from 'webextension-polyfill';
+
+class AriadneBackground {
+  constructor() {
+    this._tabStates = [];
+    this._reportStats = {};
+    this._API_URL = 'https://ariadne.dantis.me/api/v1';
+
+    // Determine if running in unpacked mode
+    const that = this;
+    browser.management.get(browser.runtime.id)
+      .then((extensionInfo) => {
+        if (extensionInfo.installType === 'development') {
+          console.log('[bg] Running in development mode');
+          that._API_URL = 'http://localhost:5000/api/v1';
+        }
+        that.addListeners();
+      });
+
+    // Alias if browser.action is defined, i.e. in Manifest V3
+    this.BrowserAction = browser.browserAction;
+    if (browser.action !== undefined) {
+      this.BrowserAction = browser.action;
+    }
+  }
+
+  addListeners() {
+    // Update badge on tab change
+    browser.tabs.onActivated.addListener((activeInfo) => {
+      // Get URL of active tab
+      browser.tabs.get(activeInfo.tabId)
+        .then((tab) => {
+          console.log('[bg] Tab changed to', tab.url);
+          this.toggleBadge(this._tabStates[activeInfo.tabId]);
+          this.updateBadgeText(this._reportStats[tab.url]);
+          this.getStats(tab.url);
+        });
+    });
+
+    // Tab URL change listener
+    browser.tabs.onUpdated.addListener((tabId, changeInfo, _) => {
+      if (changeInfo.url) {
+        // Request fresh stats
+        console.log('[bg] Tab ' + tabId + ' URL changed to', changeInfo.url);
+        this.getStats(changeInfo.url);
+      }
+    });
+
+    // Message listeners
+    browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
+      console.log("[bg] Received message with action", request.action);
+      if (request.action === "updateBadge") {
+        // Listen to updateBadge requests
+        this.toggleBadge(request.args.enabled);
+
+        // Update the tab state
+        this._tabStates[sender.tab.id] = request.args.enabled;
+      } else if (request.action === "detection") {
+        // Listen to detection requests from content scripts
+        const cookieBannerText = request.args.body;
+        console.log('[bg] Detection request received from tab', sender.tab.id, 'with body:', cookieBannerText);
+
+        // POST to API
+        fetch(this._API_URL + '/classify/text', {
+          method: 'POST',
+          body: JSON.stringify({
+            text: cookieBannerText
+          }),
+          headers: {
+            'Content-Type': 'application/json'
+          }
+        }).then((response) => response.json())
+          .then((data) => {
+          console.log('[bg] Detection result from API:', data);
+          sendResponse(data);
+        });
+      } else if (request.action === "visualDetection") {
+        // Listen to visual detection requests from content scripts
+        const imageData = request.args.screenshot;
+        console.log('[bg] Visual detection request received from tab', sender.tab.id);
+
+        // POST to API
+        fetch(this._API_URL + '/classify/image', {
+          method: 'POST',
+          body: JSON.stringify({
+            text: imageData
+          }),
+          headers: {
+            'Content-Type': 'application/json'
+          }
+        }).then((response) => response.json())
+          .then((data) => {
+          console.log('[bg] Detection result from API:', data);
+          sendResponse(data);
+        });
+      } else if (request.action === "requestStats") {
+        console.log("[bg] Received stats request from popup", request, sender);
+
+        // If we have cached stats, send them before requesting new ones
+        const tabUrl = request.args.url;
+        let deferSending = false;
+        if (this._reportStats[tabUrl]) {
+          console.log("[bg] Sending cached stats to tab", tabUrl, this._reportStats[tabUrl]);
+          sendResponse(this._reportStats[tabUrl]);
+          deferSending = true;
+        }
+
+        this.getStats(tabUrl, (stats) => {
+          if (!deferSending) {
+            console.log('[bg] Sending stats to tab', tabUrl, this._reportStats[tabUrl])
+            sendResponse(stats);
+          } else {
+            console.log('[bg] Revalidated cache for tab', tabUrl, this._reportStats[tabUrl])
+          }
+        }, (error) => {
+          sendResponse({
+            success: false,
+            error
+          });
+        });
+      }
+
+      return true;
+    });
+  }
+
+  toggleBadge(state) {
+    if (state) {
+      this.BrowserAction.setBadgeBackgroundColor({
+        color: "#00AA00",
+      });
+    } else {
+      this.BrowserAction.setBadgeBackgroundColor({
+        color: "#AAAAAA",
+      });
+    }
+  }
+
+  updateBadgeText(stats) {
+    console.log('[bg] Updating badge text with stats:', stats);
+    if (stats !== undefined && stats.hasOwnProperty("success") &&
+      stats.hasOwnProperty("specific_reports") && stats["success"]) {
+      const count = stats.specific_reports.count;
+      console.log('[bg] Badge count:', count)
+      if (count > 0) {
+        this.BrowserAction.setBadgeText({
+          text: count.toString(),
+        });
+        return;
+      }
+    }
+    this.BrowserAction.setBadgeText({
+      text: "0",
+    });
+  }
+
+  getStats(tabUrl, successCallback, errorCallback) {
+    fetch(this._API_URL + '/reports/by-url', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        'page_url': tabUrl
+      })
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        console.log('[bg] Report stats from API:', data);
+        this._reportStats[tabUrl] = data;
+
+        // Update badge text
+        this.updateBadgeText(data);
+
+        if (successCallback !== undefined) successCallback(data);
+      })
+      .catch((error) => {
+        console.error('[bg] Error fetching report stats:', error);
+        if (errorCallback !== undefined) errorCallback(error);
+      }
+    );
+  }
+}
+
+const ariadneBackground = new AriadneBackground();
diff --git a/content/content.html b/content/content.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>ariadne control panel</title>
+  </head>
+  <body>
+    <p>dummy</p>
+    <script type="module" src="./content.js"></script>
+  </body>
+</html>