willwillems

#root.root {--nav-btn-width: 36px;}
#root.root {--nav-btn-height: 32px;}
#root.root {--tabs-margin: 8px;}
#root.root {--tabs-indent: 12px;}
#root.root {--tabs-inner-gap: 8px;}

willwillems

// ==UserScript==
// @name        Mem.ai dark mode
// @namespace   Violentmonkey Scripts
// @match       https://mem.ai/*
// @grant       none
// @version     1.0
// @author      Will Willems
// @description 12/02/2023, 15:00:05
// ==/UserScript==

willwillems

// ==UserScript==
// @name        New script openai.com
// @namespace   Violentmonkey Scripts
// @match       https://chat.openai.com/chat
// @grant       none
// @version     1.1
// @author      -
// @description 04/12/2022, 13:07:34
// ==/UserScript==

willwillems

Simple require imports, for example const bar = require("foo"):

• Regex: (const|var|let)\b\s+(\w+)\s+=\s+require\s*\(["']([\/\w\-]+)["']\)\n
• Replace: import $2 from "$3"\n

One-liner require & config/compute, for example const router = require("express").Router({ mergeParams: true }):

• Regex: (const|var|let)\b\s+(\w+)\s+=\s+require\s*\(["'](\w+)["']\)(?=\S+)

willwillems

name: Build and Deploy
on:
  push:
    branches:
      - main

jobs:
  deploy:
    name: Deploy
    runs-on: ubuntu-latest

willwillems

function getMatchingCSSRulesForEl (el) {
 return [...document.styleSheets]
    .filter(ss => { try { return ss.cssRules; } catch (e) { return false } })
    .flatMap(e => [...e.cssRules].filter(r => el.matches(r.selectorText))) 
}

willwillems

<template>
  <div class="product-rating" :class="{'product-rating--invalid': ratingIsNan}">
    <div class="product-rating__value-cutoff" :style="`width: ${cutoffWidth}%;`">
      <img class="product-rating__star" :class="{'product-rating__star--small': isSmall}" src="/icon/star.svg" />
      <img class="product-rating__star" :class="{'product-rating__star--small': isSmall}" src="/icon/star.svg" />
      <img class="product-rating__star" :class="{'product-rating__star--small': isSmall}" src="/icon/star.svg" />
      <img class="product-rating__star" :class="{'product-rating__star--small': isSmall}" src="/icon/star.svg" />
      <img class="product-rating__star" :class="{'product-rating__star--small': isSmall}" src="/icon/star.svg" />
    </div>
  </div>

willwillems

((b) => { b.style.backgroundColor = 'white'; b.addEventListener('click', () => b.requestFullscreen(), {once: true})})(document.body)

willwillems

const indent = code => code
  .replace(/{\s+/, '{\n  ')
  .replace(/(?<=;)\s+/gm, '\n  ')
  .replace(/(?<=;)\s+}/, '\n}  ')

willwillems

// Throw this in your background script, it injects a generated webpack chunk when asked
chrome.runtime.onMessage.addListener(function ({ type, data}, sender, sendResponse) {
  if (type === 'requestFileInjection') {
    const file = data.fileName
    if (!file) throw new Error('No file name provided.')
    chrome.tabs.executeScript({ file: `${file}.js` }, (result) => {
      console.log(`${file}.js injected`)
      return sendResponse({ type: 'injected', target: { src: `${file}.js` }, success: true })
    })
    return true // return true so sendResponse stays valid