initial commit

stephancasas · Feb 28, 2022 · fa220af · fa220af
commit fa220af
Show file tree

Hide file tree

Showing 29 changed files with 2,217 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+build
+dist
+node_modules
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,16 @@
+{
+    "name": "thingiverse-stl-downloader",
+    "version": "1.0.0",
+    "scripts": {
+        "copy": "node scripts/copy.js",
+        "build:css": "tailwindcss -i src/style.css -o build/style.css --minify",
+        "bundle": "node scripts/bundle.js",
+        "build": "npm run copy && npm run build:css && npm run bundle"
+    },
+    "keywords": [],
+    "author": "",
+    "license": "ISC",
+    "devDependencies": {
+        "tailwindcss": "^3.0.23"
+    }
+}
diff --git a/public/store-icon.png b/public/store-icon.png
diff --git a/public/store-preview.jpg b/public/store-preview.jpg
diff --git a/scripts/bundle.js b/scripts/bundle.js
@@ -0,0 +1,16 @@
+const { execSync } = require('child_process');
+const { resolve: path } = require('path');
+
+const buildDir = path(__dirname, '..', 'build');
+
+execSync(`cd ${buildDir}; zip -r bundle.zip .`);
+
+const distDir = path(__dirname, '..', 'dist');
+execSync(`mkdir ${distDir}`);
+
+execSync(
+  `mv ${path(
+    buildDir,
+    'bundle.zip',
+  )} ${distDir}/thingiverse-stl-downloader.zip`,
+);
diff --git a/scripts/copy.js b/scripts/copy.js
@@ -0,0 +1,8 @@
+const { execSync } = require('child_process');
+const { resolve: path } = require('path');
+
+execSync(`rm -rf ${path(__dirname, '..', 'build')}`);
+execSync(
+  `cp -r ${path(__dirname, '..', 'src')} ${path(__dirname, '..', 'build')}`,
+);
+execSync(`rm ${path(__dirname, '..', 'build', 'style.css')}`);
diff --git a/src/background.js b/src/background.js
@@ -0,0 +1,34 @@
+const getIconPath = (variant) => {
+  return [128, 48, 32, 16].reduce((acc, cur) => {
+    acc[`${cur}`] = `/images/${variant}--${cur}.png`;
+    return acc;
+  }, {});
+};
+
+const listenForIconContextInExtension = () => {
+  chrome.runtime.onMessage.addListener((request, sender) => {
+    if (!('iconContext' in request)) return;
+    const { iconContext } = request;
+    if (!!iconContext.onSite) {
+      chrome.action.setIcon({
+        path: getIconPath('active'),
+        tabId: sender.tab.id,
+      });
+    } else {
+      const shade = iconContext.darkMode ? 'dark' : 'light';
+      chrome.action.setIcon({
+        path: getIconPath(`idle--${shade}`),
+        tabId: sender.tab.id,
+      });
+    }
+  });
+};
+
+const setCampaignPreferenceInExtension = () => {
+  chrome.runtime.onInstalled.addListener(() => {
+    chrome.storage.sync.set({ campaign: true });
+  });
+};
+
+setCampaignPreferenceInExtension();
+listenForIconContextInExtension();
diff --git a/src/contextmonitor.js b/src/contextmonitor.js
@@ -0,0 +1,6 @@
+chrome.runtime.sendMessage({
+  iconContext: {
+    onSite: window.location.href.toLowerCase().includes('thingiverse'),
+    darkMode: window.matchMedia('(prefers-color-scheme: dark)').matches,
+  },
+});
diff --git a/src/images/active--128.png b/src/images/active--128.png
diff --git a/src/images/active--16.png b/src/images/active--16.png
diff --git a/src/images/active--32.png b/src/images/active--32.png
diff --git a/src/images/active--48.png b/src/images/active--48.png
diff --git a/src/images/active.png b/src/images/active.png
diff --git a/src/images/idle--dark--128.png b/src/images/idle--dark--128.png
diff --git a/src/images/idle--dark--16.png b/src/images/idle--dark--16.png
diff --git a/src/images/idle--dark--32.png b/src/images/idle--dark--32.png
diff --git a/src/images/idle--dark--48.png b/src/images/idle--dark--48.png
diff --git a/src/images/idle--dark.png b/src/images/idle--dark.png
diff --git a/src/images/idle--light--128.png b/src/images/idle--light--128.png
diff --git a/src/images/idle--light--16.png b/src/images/idle--light--16.png
diff --git a/src/images/idle--light--32.png b/src/images/idle--light--32.png
diff --git a/src/images/idle--light--48.png b/src/images/idle--light--48.png
diff --git a/src/images/idle--light.png b/src/images/idle--light.png
diff --git a/src/manifest.json b/src/manifest.json
@@ -0,0 +1,39 @@
+{
+    "name": "Thingiverse STL Downloader",
+    "description": "Download STLs from Thingiverse -- without the ads.",
+    "version": "1.0",
+    "manifest_version": 3,
+    "permissions": [
+        "storage",
+        "activeTab",
+        "scripting"
+    ],
+    "content_scripts": [
+        {
+            "matches": [
+                "https://*/*"
+            ],
+            "js": [
+                "contextmonitor.js"
+            ]
+        }
+    ],
+    "background": {
+        "service_worker": "background.js"
+    },
+    "action": {
+        "default_popup": "popup.html",
+        "default_icon": {
+            "16": "/images/active--16.png",
+            "32": "/images/active--32.png",
+            "48": "/images/active--48.png",
+            "128": "/images/active--128.png"
+        }
+    },
+    "icons": {
+        "16": "/images/active--16.png",
+        "32": "/images/active--32.png",
+        "48": "/images/active--48.png",
+        "128": "/images/active--128.png"
+    }
+}
diff --git a/src/popup.html b/src/popup.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link href="style.css" rel="stylesheet" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
+  </head>
+  <body>
+    <div
+      id="ext--manifest"
+      class="w-96 flex flex-col text-xs overflow-y-scroll divide-y text-gray-700"
+      style="max-height: 400px"
+    >
+      <!-- record template -->
+      <div class="ext--record hidden flex items-center pl-2 py-1">
+        <span class="flex-grow truncate font-semibold w-0"></span>
+        <button class="flex items-center rounded-full w-8 h-8 bg-blue-500 text-white hover:bg-blue-400 my-0 mx-2">
+          <i class="mx-auto fas fa-download"></i>
+        </button>
+      </div>
+
+      <!-- vacancy banner  -->
+      <div id="ext--vacancy" class="hidden flex-grow flex items-center h-40 font-semibold text-sm text-gray-400">
+        <div class="mx-auto">No files found.</div>
+      </div>
+    </div>
+
+    <!-- campaign banner -->
+    <div id="ext--campaign" class="flex items-center text-xs text-gray-600 border-t">
+      <button class="flex items-center border-r text-gray-300 m-0 p-0 w-6 h-6 hover:bg-gray-100 hover:text-red-300">
+        <i class="mx-auto fas fa-times-circle"></i>
+      </button>
+      <div class="flex-grow flex flex-col">
+        <div class="mx-auto flex items-center">
+          <span>
+            Is this useful? Consider
+            <a class="text-blue-400 cursor-pointer"">
+              buying me a coffee
+            </a>
+            if you think so.
+          </span>
+          <span class="pl-1 text-sm">&#128578;</span>
+        </div>
+      </div>
+    </div>
+    <script src="popup.js"></script>
+  </body>
+</html>
diff --git a/src/popup.js b/src/popup.js
@@ -0,0 +1,67 @@
+const $ = {
+  record: document.querySelector('.ext--record'),
+  manifest: document.querySelector('#ext--manifest'),
+  vacancy: document.querySelector('#ext--vacancy'),
+  campaign: document.querySelector('#ext--campaign'),
+};
+
+const makeFileRecordInExtension = (file) => {
+  const rec = $.record.cloneNode(true);
+  rec.classList.remove('hidden');
+  rec.querySelector('span').innerHTML = file.name;
+  rec.querySelector('button').addEventListener('click', () => {
+    location.href = file.direct_url;
+  });
+  $.manifest.appendChild(rec);
+};
+
+const readThingFilesInDocument = () => {
+  let files;
+  try {
+    const { currentThing } = JSON.parse(localStorage.getItem('persist:root'));
+    files = JSON.parse(currentThing).thing.files.filter(
+      (file) => file.name.split('.').slice(-1)[0].toLowerCase() === 'stl',
+    );
+  } catch (ex) {
+    files = [];
+  }
+  chrome.runtime.sendMessage({ files });
+};
+
+const listenForThingFilesInExtension = () =>
+  chrome.runtime.onMessage.addListener((request) => {
+    if (!('files' in request)) return;
+    if (!request.files.length) return $.vacancy.classList.remove('hidden');
+    request.files.forEach(makeFileRecordInExtension);
+  });
+
+const runExtensionContentInDocument = async () => {
+  let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+
+  chrome.scripting.executeScript({
+    target: { tabId: tab.id },
+    function: readThingFilesInDocument,
+  });
+};
+
+const setupCampaignInExtension = () => {
+  chrome.storage.sync.get(['campaign'], (campaign) => {
+    if (!campaign.campaign) {
+      $.campaign.classList.add('hidden');
+      return;
+    }
+
+    $.campaign.querySelector('a').addEventListener('click', () => {
+      chrome.tabs.create({ url: 'https://www.buymeacoffee.com/stephancasas' });
+    });
+
+    $.campaign.querySelector('button').addEventListener('click', () => {
+      $.campaign.classList.add('hidden');
+      chrome.storage.sync.set({ campaign: false });
+    });
+  });
+};
+
+listenForThingFilesInExtension();
+runExtensionContentInDocument();
+setupCampaignInExtension();
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+  mode: 'jit',
+  content: ['./src/**/*.html', './src/**/*.js'],
+  theme: {
+    extend: {},
+  },
+  variants: {},
+  plugins: [],
+};