1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      2026-04-09
// @description  try to take over the world!
// @author       You
// @match        https://*/*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// ==/UserScript==

;(function () {
  'use strict'

  // Your code here...
})()

1
2
3
4

console.log(a) // undefined
var a = 1
console.log(a) // 1
var a = 1

1
2
3
4
5
6
7
8
9
10

;(function () {
  'use strict'
  console.log(a) // undefined
  var a = 1
})()
;(function () {
  'use strict'
  console.log(a) // undefined
  var a = 1
})()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

{
  "manifest_version": 3,
  "name": "Hide AI Mode on Google Search",
  "version": "0.0.1",
  "description": "Hide the AI Mode button on Google Search pages.",
  "content_scripts": [
    {
      "matches": ["https://www.google.com/"],
      "js": ["content-scripts/content.js"],
      "run_at": "document_start"
    }
  ],
  "icons": {
    "128": "icon/128.png"
  }
}

1
2
3
4
5
6
7
8
9
10
11

// ==UserScript==
// @name         Hide AI Mode on Google Search
// @namespace    https://rxliuli.com/
// @version      0.0.1
// @description  Hide the AI Mode button on Google Search pages.
// @author       rxliuli
// @match        https://www.google.com/
// @icon         https://www.google.com/s2/favicons?sz=64&domain=google.com
// @run-at       document-start
// @grant        none
// ==/UserScript==

1
2
3
4
5
6
7
8

;(function () {
  'use strict'

  const style = document.createElement('style')
  style.textContent =
    'button:has([d="M15.65 11.58c.18-.5.27-1.03.31-1.58h-2c-.1 1.03-.51 1.93-1.27 2.69-.88.87-1.94 1.31-3.19 1.31C7.03 14 5 12.07 5 9.5 5 7.03 6.93 5 9.5 5c.46 0 .89.08 1.3.2l1.56-1.56C11.5 3.22 10.55 3 9.5 3 5.85 3 3 5.85 3 9.5S5.85 16 9.5 16c.56 0 2.26-.06 3.8-1.3l6.3 6.3 1.4-1.4-6.3-6.3c.4-.5.72-1.08.95-1.72z"]) { display: none; }'
  document.documentElement.appendChild(style)
})()

1
2
3
4
5
6
7
8
9
10
11
12
13

// ==UserScript==
// @name         Hide AI Mode on Google Search
// @namespace    https://rxliuli.com/
// @version      0.0.1
// @description  Hide the AI Mode button on Google Search pages.
// @author       rxliuli
// @match        https://www.google.com/
// @icon         https://www.google.com/s2/favicons?sz=64&domain=google.com
// @run-at       document-start
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_registerMenuCommand
// ==/UserScript==

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

;(function () {
  'use strict'

  let menuId
  if (GM_getValue('visible')) {
    menuId = GM_registerMenuCommand('Hide AI Mode', toggle)
  } else {
    menuId = GM_registerMenuCommand('Show AI Mode', toggle)
    hide()
  }

  function toggle() {
    if (GM_getValue('visible')) {
      hide()
      GM_registerMenuCommand('Show AI Mode', toggle, { id: menuId })
      GM_setValue('visible', false)
    } else {
      show()
      GM_registerMenuCommand('Hide AI Mode', toggle, { id: menuId })
      GM_setValue('visible', true)
    }
  }

  function hide() {
    const style = document.createElement('style')
    style.id = 'hide-ai-mode-on-google-search'
    style.textContent =
      'button:has([d="M15.65 11.58c.18-.5.27-1.03.31-1.58h-2c-.1 1.03-.51 1.93-1.27 2.69-.88.87-1.94 1.31-3.19 1.31C7.03 14 5 12.07 5 9.5 5 7.03 6.93 5 9.5 5c.46 0 .89.08 1.3.2l1.56-1.56C11.5 3.22 10.55 3 9.5 3 5.85 3 3 5.85 3 9.5S5.85 16 9.5 16c.56 0 2.26-.06 3.8-1.3l6.3 6.3 1.4-1.4-6.3-6.3c.4-.5.72-1.08.95-1.72z"]) { display: none; }'
    document.documentElement.appendChild(style)
  }
  function show() {
    document.getElementById('hide-ai-mode-on-google-search')?.remove()
  }
})()

1
2
3
4

ℹ Zipping extension...
✔ Zipped extension in 12 ms
  └─ .output/05-storage-and-configuration-0.0.0-chrome.zip  13.37 kB
Σ Total size: 13.37 kB

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<!-- entrypoints/popup/index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Popup</title>
    <style>
      html,
      body,
      #root {
        margin: 0;
        padding: 0;
        width: 600px;
        height: 800px;
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="./main.ts"></script>
  </body>
</html>

1
2
3
4
5
6
7

// entrypoints/popup/main.ts
const root = document.getElementById('root')!

root.innerHTML = `
    <h1>Popup UI</h1>
    <p>This is a placeholder for the popup UI.</p>
`

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

import { Readability } from '@mozilla/readability'
import TurndownService from 'turndown'

export default defineUnlistedScript(async () => {
  const service = new TurndownService({
    headingStyle: 'atx',
    codeBlockStyle: 'fenced',
  })
  const reader = new Readability(document.cloneNode(true) as Document)
  const article = reader.parse()
  if (article && article.title && article.content) {
    return service.turndown(article.content)
    // const markdown = service.turndown(article.content)
    // await navigator.clipboard.writeText(`# ${article.title}\n\n${markdown}`)
    // alert('Article copied as Markdown!')
  } else {
    return null
    // alert('Failed to parse the article.')
  }
})

1

pnpm i @webext-core/messaging

1
2
3
4
5
6

// lib/messager.ts
import { defineExtensionMessaging } from '@webext-core/messaging'

export const messager = defineExtensionMessaging<{
  getMarkdown: () => string | null
}>()

1
2
3
4
5
6
7
8
9
10
11
12
13
14

messager.onMessage('getMarkdown', async (ev) => {
  const tabs = await browser.tabs.query({
    active: true,
    currentWindow: true,
  })
  if (!tabs[0].id) {
    throw new Error('No active tab found')
  }
  const result = await browser.scripting.executeScript({
    target: { tabId: tabs[0].id },
    files: ['/inject.js'] as PublicPath[],
  }) // 执行脚本并获取返回值
  return result[0].result as string | null
})

1
2
3
4
5
6
7

import { messager } from '@/lib/messager'

const root = document.getElementById('root')!
const md = await messager.sendMessage('getMarkdown')
const pre = document.createElement('pre')
pre.textContent = md as string
root.appendChild(pre)

1

pnpm i easymde

1
2
3
4
5
6
7
8
9
10
11
12

import 'easymde/dist/easymde.min.css'
import { messager } from '@/lib/messager'
import EasyMDE from 'easymde'

const root = document.getElementById('root')!
const textarea = document.createElement('textarea')
root.appendChild(textarea)
const md = await messager.sendMessage('getMarkdown')
new EasyMDE({
  element: textarea,
  initialValue: md as string,
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14

import { defineConfig } from 'wxt'

export default defineConfig({
  manifestVersion: 3,
  manifest: {
    name: 'Copy As Markdown',
    description: 'Copy page content as Markdown',
    permissions: ['activeTab', 'scripting'],
    action: {},
  },
  webExt: {
    disabled: true,
  },
})

1
2
3
4

// entrypoints/inject.ts
export default defineUnlistedScript(() => {
  alert('Injected script executed!')
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14

import { PublicPath } from 'wxt/browser'

export default defineBackground(() => {
  browser.action.onClicked.addListener(async (tab) => {
    if (tab.id) {
      await browser.scripting.executeScript({
        target: { tabId: tab.id },
        // 这里的 /inject.js 是指构建之后的文件，如果你使用 pnpm build，就可以在 .output/chrome-mv3 中看到 inject.js 了
        // 注：一开始这里可能会报 ts 类型错误，pnpm dev/build 启动之后 wxt 会正确扫描 entrypoints 并生成类型定义
        files: ['/inject.js'] as PublicPath[],
      })
    }
  })
})

1

Uncaught (in promise) Error: Could not load file: 'inject.js'.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

import { defineConfig } from 'wxt'

export default defineConfig({
  manifestVersion: 3,
  manifest: {
    name: 'Copy As Markdown',
    description: 'Copy page content as Markdown',
    permissions: ['activeTab', 'scripting'],
    action: {},
    web_accessible_resources: [
      {
        resources: ['inject.js'],
        matches: ['<all_urls>'],
      },
    ],
  },
  webExt: {
    disabled: true,
  },
})

1
2

pnpm i @mozilla/readability turndown
pnpm i -D @types/turndown

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

import { Readability } from '@mozilla/readability'
import TurndownService from 'turndown'

export default defineUnlistedScript(async () => {
  const service = new TurndownService({
    headingStyle: 'atx',
    codeBlockStyle: 'fenced',
  })
  const reader = new Readability(document.cloneNode(true) as Document) // 深度复制避免影响到原网页
  const article = reader.parse() // 解析主要内容
  if (article && article.title && article.content) {
    const markdown = service.turndown(article.content) // 转换 HTML 为 Markdown
    await navigator.clipboard.writeText(`# ${article.title}\n\n${markdown}`) // 复制
    alert('Article copied as Markdown!')
  } else {
    alert('Failed to parse the article.')
  }
})

1

<meta name="manifest.open_in_tab" content="true|false" />

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!-- entrypoints/options/index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Options</title>
  </head>
  <body>
    <div>
      <label for="autoSleepInterval">Auto Sleep Interval (minutes):</label>
      <input
        type="number"
        id="autoSleepInterval"
        name="autoSleepInterval"
        min="1"
        value="30"
      />
    </div>
  </body>
</html>

1

<script type="module" src="./main.ts"></script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// entrypoints/options/main.ts
async function main() {
  const input = document.querySelector<HTMLInputElement>('#autoSleepInterval')!
  input.value =
    (
      await browser.storage.local.get<{ autoSleepInterval?: number }>(
        'autoSleepInterval',
      )
    ).autoSleepInterval?.toString() ?? '30' // 读取保存的设置，如果找不到则使用默认值 30min
  input.addEventListener('input', async (ev) => {
    const value = (ev.target as HTMLInputElement).valueAsNumber
    // 每次修改设置时都写入 storage.local，不使用 change 事件是为了避免修改之后立刻刷新页面，有可能接收不到事件
    await browser.storage.local.set({ autoSleepInterval: value })
  })
}

main()

1
2
3

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'local')
    at main (main.ts:3:3)
    at main.ts:15:1

1
2
3
4
5
6
7
8
9
10
11
12
13
14

import { defineConfig } from 'wxt'

export default defineConfig({
  manifestVersion: 3,
  manifest: {
    name: 'Auto Sleep Tabs',
    description:
      'Automatically puts inactive tabs to sleep to save memory and CPU.',
    permissions: ['tabs', 'storage'], // new
  },
  webExt: {
    disabled: true,
  },
})

1

pnpm install tailwindcss @tailwindcss/vite

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

import { defineConfig } from 'wxt'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  manifestVersion: 3,
  manifest: {
    name: 'Auto Sleep Tabs',
    description:
      'Automatically puts inactive tabs to sleep to save memory and CPU.',
    permissions: ['tabs', 'storage'],
  },
  vite: () => ({
    plugins: [tailwindcss()], // new
  }),
  webExt: {
    disabled: true,
  },
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Options</title>
    <style>
      @import 'tailwindcss';
    </style>
  </head>
  <body>
    <div class="p-6">
      <h1 class="text-xl font-semibold text-gray-800">Settings</h1>
      <div class="space-x-4">
        <label for="autoSleepInterval" class="text-gray-700">
          Auto Sleep Interval (minutes):
        </label>
        <input
          type="number"
          id="autoSleepInterval"
          name="autoSleepInterval"
          min="1"
          value="30"
          class="w-24 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
      </div>
    </div>
  </body>
</html>

1
2
3
4
5
6
7
8
9

// const Timeout = 30 * 60 * 1000
const Timeout =
  ((
    await browser.storage.local.get<{ autoSleepInterval?: number }>(
      'autoSleepInterval',
    )
  ).autoSleepInterval ?? 30) *
  60 *
  1000

1
2
3
4
5
6
7
8
9

browser.storage.onChanged.addListener((changes, areaName) => {
  if (areaName === 'local' && changes.autoSleepInterval) {
    console.log(
      'autoSleepInterval changed to',
      changes.autoSleepInterval.newValue,
    )
    autoDiscardTabs()
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

import { defineConfig } from 'wxt'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  manifestVersion: 3,
  manifest: {
    name: 'Auto Sleep Tabs',
    description:
      'Automatically puts inactive tabs to sleep to save memory and CPU.',
    permissions: ['tabs', 'storage'],
    action: {}, // new
  },
  vite: () => ({
    plugins: [tailwindcss()],
  }),
  webExt: {
    disabled: true,
  },
})

1
2
3

browser.action.onClicked.addListener(async () => {
  await browser.runtime.openOptionsPage()
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

Extension starts
       │
       ▼
Initialize existing tabs
       │
       ▼
┌─────────────────────────────────────────────────┐
│              Wait for events                    │◄──────┐
└─────────────────────────────────────────────────┘       │
       │                                                  │
       ├─── onCreated ──► Record new tab time ───────────►│
       │                                                  │
       ├─── onRemoved ──► Remove tab record ─────────────►│
       │                                                  │
       └─── onActivated ──► Update access time            │
                                   │                      │
                                   ▼                      │
                           Check all tabs                 │
                                   │                      │
                                   ▼                      │
                          Over 30 minutes?                │
                            │         │                   │
                        Yes │         │ No                │
                            ▼         └──────────────────►│
                        Freeze tab                        │
                            │                             │
                            └─────────────────────────────┘

1
2

# init project
pnpm dlx wxt@latest init 04-background-script --template vanilla --pm pnpm

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// wxt.config.ts
import { defineConfig } from 'wxt'

export default defineConfig({
  manifestVersion: 3,
  manifest: {
    name: 'Auto Sleep Tabs',
    description:
      'Automatically puts inactive tabs to sleep to save memory and CPU.',
  },
  webExt: {
    disabled: true,
  },
})

1
2
3

export default defineBackground(() => {
  console.log('Hello background!', { id: browser.runtime.id })
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

export default defineBackground(() => {
  console.log('Hello background!', { id: browser.runtime.id })

  const lastAccessed = new Map<number, number>()

  browser.tabs.onCreated.addListener((tab) => {
    if (!tab.id) {
      return
    }
    lastAccessed.set(tab.id, Date.now())
  })
  browser.tabs.onRemoved.addListener((tabId) => {
    lastAccessed.delete(tabId)
  })
  browser.tabs.onActivated.addListener((activeInfo) => {
    lastAccessed.set(activeInfo.tabId, Date.now())
    console.log('Tab activated:', activeInfo.tabId)
  })
})

1
2
3
4
5
6
7
8
9

import { defineConfig } from 'wxt'

export default defineConfig({
  manifest: {
    // other config...
    permissions: ['tabs'],
  },
  // other config...
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

browser.tabs.onActivated.addListener((activeInfo) => {
  lastAccessed.set(activeInfo.tabId, Date.now())
  console.log('Tab activated:', activeInfo.tabId)
  autoDiscardTabs()
})
async function autoDiscardTabs() {
  const Timeout = 30 * 60 * 1000 // 30 minutes
  const tabs = (await browser.tabs.query({})).filter(
    (tab) =>
      tab.id && // 只查找包含 id 的普通标签页，某些特殊标签页可能不包含 id，例如浏览器调试窗口之类的
      !tab.pinned && // 如果是固定标签页，则忽略
      !tab.active && // 如果标签页还活跃，也就是说，一直呆在一个标签页里
      !tab.audible && // 如果正在播放音视频，则忽略
      !tab.frozen && // 如果已经被 Chrome 内置机制冻结了，则忽略
      !tab.discarded && // 如果已经被手动冻结了，则忽略
      lastAccessed.has(tab.id) && // 如果没有记录过这个标签页，则忽略
      Date.now() - lastAccessed.get(tab.id)! > Timeout, // 如果最后访问时间距离现在已经超过 30 分钟，则认为满足条件
  )
  for (const tab of tabs) {
    // 注意：discard 可能会失败，例如标签页正在被使用或已被关闭
    await browser.tabs.discard(tab.id!)
    console.log('Tab auto-discarded:', tab.id, tab.title)
  }
}

1

pnpm dlx wxt@latest init 03-inject-ui --template react --pm pnpm

1
2
3
4
5
6
7
8
9
10
11
12
13

import { defineConfig } from 'wxt'

export default defineConfig({
  modules: ['@wxt-dev/module-react'],
  manifestVersion: 3,
  manifest: {
    name: 'Youtube Video Screenshot',
    description: 'Take screenshots of YouTube videos easily.',
  },
  webExt: {
    disabled: true,
  },
})

1

rm -rf ./entrypoints/*

1
2

pnpm i -D tailwindcss @tailwindcss/vite
pnpm i clsx tailwind-merge tw-animate-css class-variance-authority

1
2
3
4
5
6
7
8
9
10
11

{
  "extends": "./.wxt/tsconfig.json",
  "compilerOptions": {
    "allowImportingTsExtensions": true,
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

1
2
3
4
5
6
7
8
9

import { defineConfig } from 'wxt'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  // other config...
  vite: () => ({
    plugins: [tailwindcss() as any],
  }),
})

1
2
3
4
5
6

import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "entrypoints/content/styles.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}

1
2
3
4
5

$ pnpm dlx shadcn@latest add button --yes
✔ Checking registry.
✔ Installing dependencies.
✔ Created 1 file:
  - components/ui/button.tsx

1
2
3
4

export default defineContentScript({
  matches: ['https://www.youtube.com/*'],
  main() {},
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

import './styles.css' // 引入 css，会在 bundle 时自动处理
import { Button } from '@/components/ui/button'
import { createRoot } from 'react-dom/client'

function App() {
  return (
    <div
      className={
        'fixed z-[999999] top-0 left-0 w-full py-2 bg-white text-center'
      }
    >
      <Button>Click me</Button>
    </div>
  )
}

export default defineContentScript({
  matches: ['https://www.youtube.com/*'],
  cssInjectionMode: 'ui', // 这里的配置要求 WXT 将 CSS 动态注入到页面中
  async main(ctx) {
    // 这里使用了 Shadow Root 模式注入 UI，意味着能够正确地避免我们的 Tailwind CSS "污染"到网页本身
    const ui = await createShadowRootUi(ctx, {
      name: 'inject-ui-app',
      position: 'inline',
      anchor: 'body',
      onMount: (container) => {
        const root = createRoot(container)
        root.render(<App />)
        return root
      },
      onRemove: (root) => {
        root?.unmount()
      },
    })

    ui.mount()
  },
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

function App() {
  function onTakeScreenshot() {
    alert('Take screenshot!')
  }
  return (
    <Button
      className={'h-[80%] px-6 bg-transparent hover:bg-white/10 rounded-full'}
      onClick={onTakeScreenshot}
    >
      <img
        src={browser.runtime.getURL('/icon/32.png')} // 这里直接使用扩展图标作为操作 icon
        alt={'icon'}
        className={'w-[20px] h-[20px]'}
      />
    </Button>
  )
}

1
2
3
4
5
6
7

const ui = await createShadowRootUi(ctx, {
  anchor: '#movie_player .ytp-right-controls-left', // 注入的容器元素
  append(anchor, ui) {
    anchor.insertBefore(ui, anchor.firstChild) // 添加到最左边
  },
  // other code...
})

1

Denying load of chrome-extension://aheclehodijmphbifdolliophgjiagof/icon/32.png. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.

1
2
3
4
5
6
7
8
9
10
11
12
13

export default defineConfig({
  // other config...
  manifest: {
    // other config...
    web_accessible_resources: [
      {
        resources: ['icon/*'],
        matches: ['https://www.youtube.com/*'],
      },
    ],
  },
  // other config...
})

1
2
3
4
5
6
7
8

const video = document.querySelector('#movie_player video')
const canvas = document.createElement('canvas')
canvas.width = video.videoWidth
canvas.height = video.videoHeight
const ctx = canvas.getContext('2d')
ctx.drawImage(video, 0, 0)
const blob = await new Promise((r) => canvas.toBlob(r, 'image/png', 1))
blob

1
2

const data = [new ClipboardItem({ [blob.type]: blob })]
await navigator.clipboard.write(data)

1
2

Uncaught NotAllowedError: Failed to execute 'write' on 'Clipboard': Document is not focused.
    at <anonymous>:2:27

1
2

pnpm i file-saver dayjs
pnpm i -D @types/file-saver

1
2
3
4
5
6
7

import { saveAs } from 'file-saver'
import dayjs from 'dayjs'

const filename = `Youtube-Screenshot_${dayjs().format(
  'YYYY-MM-DD_HH-mm-ss',
)}.png` // 会得到类似 Youtube-Screenshot_2026-01-14_09-49-06.png 这样的文件名
saveAs(blob, filename)

1
2
3

pnpm dlx wxt@latest init 02-use-wxt --template vanilla --pm pnpm
cd 02-use-wxt
pnpm i

1
2
3
4
5
6
7

wxt.config.ts # 扩展入口文件，定义 manifest 和构建流程，但通常不需要改动
entrypoints # 定义不同的入口点文件，例如 content script 或者 background 之类的，会自动写入到输出扩展的 manifest 中
public # 公共目录，会被原样复制到最终输出扩展的目录中，里面包含 icon 目录，用于放置扩展图标，会自动写入到输出扩展的 manifest 中
assets # 需要 bundle 的媒体资源目录，可以暂时忽略
components # 组件目录，通常放一些通用组件，例如 shadcn 之类的，可以暂时忽略
package.json
tsconfig.json

1
2
3
4
5
6
7

import { defineConfig } from 'wxt'

export default defineConfig({
  webExt: {
    disabled: true,
  },
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

{
  "manifest_version": 3,
  "name": "Hide AI Mode on Google Search",
  "version": "0.0.1",
  "description": "Hide the AI Mode button on Google Search pages.",
  "content_scripts": [
    {
      "matches": ["https://www.google.com/"],
      "js": ["content-scripts/content.js"],
      "run_at": "document_start"
    }
  ],
  "icons": {
    "128": "icon/128.png"
  }
}

1
2
3
4
5
6
7
8
9
10
11

import { defineConfig } from 'wxt'

export default defineConfig({
  manifestVersion: 3,
  manifest: {
    name: 'Hide AI Mode on Google Search',
    version: '0.0.1',
    description: 'Hide the AI Mode button on Google Search pages.',
  },
  // other config...
})

1

rm -r ./assets ./components ./entrypoints/background.ts ./entrypoints/popup ./public/wxt.svg

1
2
3
4
5
6

export default defineContentScript({
  matches: ['*://*.google.com/*'],
  main() {
    console.log('Hello content.')
  },
})

1
2
3
4
5
6
7
8
9
10

export default defineContentScript({
  matches: ['https://www.google.com/'],
  runAt: 'document_start',
  main() {
    const style = document.createElement('style')
    style.textContent =
      'button:has([d="M15.65 11.58c.18-.5.27-1.03.31-1.58h-2c-.1 1.03-.51 1.93-1.27 2.69-.88.87-1.94 1.31-3.19 1.31C7.03 14 5 12.07 5 9.5 5 7.03 6.93 5 9.5 5c.46 0 .89.08 1.3.2l1.56-1.56C11.5 3.22 10.55 3 9.5 3 5.85 3 3 5.85 3 9.5S5.85 16 9.5 16c.56 0 2.26-.06 3.8-1.3l6.3 6.3 1.4-1.4-6.3-6.3c.4-.5.72-1.08.95-1.72z"]) { display: none; }'
    document.documentElement.appendChild(style)
  },
})

1
2
3
4
5
6
7
8
9

{
  "content_scripts": [
    {
      "matches": ["https://www.google.com/"],
      "js": ["content-scripts/content.js"],
      "run_at": "document_start"
    }
  ]
}

1
2
3
4
5

// content-scripts/content.js
const style = document.createElement('style')
style.textContent =
  'button:has([d="M15.65 11.58c.18-.5.27-1.03.31-1.58h-2c-.1 1.03-.51 1.93-1.27 2.69-.88.87-1.94 1.31-3.19 1.31C7.03 14 5 12.07 5 9.5 5 7.03 6.93 5 9.5 5c.46 0 .89.08 1.3.2l1.56-1.56C11.5 3.22 10.55 3 9.5 3 5.85 3 3 5.85 3 9.5S5.85 16 9.5 16c.56 0 2.26-.06 3.8-1.3l6.3 6.3 1.4-1.4-6.3-6.3c.4-.5.72-1.08.95-1.72z"]) { display: none; }'
document.documentElement.appendChild(style)

1
2
3
4
5
6

cd ./public
magick logo.png -resize 16x16 ./icon/16.png
magick logo.png -resize 32x32 ./icon/32.png
magick logo.png -resize 48x48 ./icon/48.png
magick logo.png -resize 96x96 ./icon/96.png
magick logo.png -resize 128x128 ./icon/128.png

1

#overlays:has([href*="adj.st"])

1

[data-test="drawer-backdrop"]

1
2
3

body {
  overflow: hidden;
}

1
2
3

document.body.style.position = 'fixed'
document.body.style.top = `-${scrollPosition}px`
document.body.style.width = '100%'

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

function findScrollBlocker(element) {
  const style = getComputedStyle(element)
  // 检查当前元素是否设置了阻止滚动的样式
  if (style.overflow === 'hidden' || style.position === 'fixed') {
    return element
  }
  // 继续检查父元素
  if (element.parentElement && element !== element.parentElement) {
    return findScrollBlocker(element.parentElement)
  }
  return null
}

// 在 DevTools > Console 中调用，传入当前选中的元素
findScrollBlocker($0)
// 找到锁定元素后，可以通过以下方式恢复滚动
// const blocker = findScrollBlocker($0)
// if (blocker) blocker.style.overflow = 'auto'

1
2
3
4
5
6

manifest.json # 扩展入口文件
icon/*.png # 扩展图标
content-scripts/content.js # 注入到网页的脚本，可选
background.js # 后台脚本，可选
options.html # 配置页面，可选
popup.html # 点击扩展 icon 的弹出窗口，可选

1
2
3
4
5
6

{
  "manifest_version": 3,
  "name": "Hide AI Mode on Google Search",
  "version": "0.0.1",
  "description": "Hide the AI Mode button on Google Search pages."
}

1

button:has([d="M15.65 11.58c.18-.5.27-1.03.31-1.58h-2c-.1 1.03-.51 1.93-1.27 2.69-.88.87-1.94 1.31-3.19 1.31C7.03 14 5 12.07 5 9.5 5 7.03 6.93 5 9.5 5c.46 0 .89.08 1.3.2l1.56-1.56C11.5 3.22 10.55 3 9.5 3 5.85 3 3 5.85 3 9.5S5.85 16 9.5 16c.56 0 2.26-.06 3.8-1.3l6.3 6.3 1.4-1.4-6.3-6.3c.4-.5.72-1.08.95-1.72z"])

1
2
3
4

const style = document.createElement('style')
style.textContent =
  'button:has([d="M15.65 11.58c.18-.5.27-1.03.31-1.58h-2c-.1 1.03-.51 1.93-1.27 2.69-.88.87-1.94 1.31-3.19 1.31C7.03 14 5 12.07 5 9.5 5 7.03 6.93 5 9.5 5c.46 0 .89.08 1.3.2l1.56-1.56C11.5 3.22 10.55 3 9.5 3 5.85 3 3 5.85 3 9.5S5.85 16 9.5 16c.56 0 2.26-.06 3.8-1.3l6.3 6.3 1.4-1.4-6.3-6.3c.4-.5.72-1.08.95-1.72z"]) { display: none; }'
document.head.appendChild(style)

1
2
3
4
5
6
7
8
9

{
  // before config...
  "content_scripts": [
    {
      "matches": ["https://www.google.com/"], // 只匹配首页，因为 AI Mode 按钮仅在首页出现
      "js": ["content-scripts/content.js"]
    }
  ]
}

1
2
3
4
5
6
7
8
9

{
  "content_scripts": [
    {
      "matches": ["https://www.google.com/"],
      "js": ["content-scripts/content.js"],
      "run_at": "document_start" // 在网页刚开始加载时就注入脚本，参考 https://developer.chrome.com/docs/extensions/reference/manifest/content-scripts#world-timings
    }
  ]
}

1
2
3
4

const style = document.createElement('style')
style.textContent =
  'button:has([d="M15.65 11.58c.18-.5.27-1.03.31-1.58h-2c-.1 1.03-.51 1.93-1.27 2.69-.88.87-1.94 1.31-3.19 1.31C7.03 14 5 12.07 5 9.5 5 7.03 6.93 5 9.5 5c.46 0 .89.08 1.3.2l1.56-1.56C11.5 3.22 10.55 3 9.5 3 5.85 3 3 5.85 3 9.5S5.85 16 9.5 16c.56 0 2.26-.06 3.8-1.3l6.3 6.3 1.4-1.4-6.3-6.3c.4-.5.72-1.08.95-1.72z"]) { display: none; }'
document.documentElement.appendChild(style) // document.documentElement 代表页面的根元素，即 `<html></html>` 标签。

1
2
3
4
5

{
  "icons": {
    "128": "icon/128.png"
  }
}