"WavE Image Downloader" web extension sample

WavE Image Downloader is a browser extension, created for the talk "El poder de las Web Extensions", that showcase an image grid for the active tab webpage and allows you to select and download them.

This Web Extension was built using vitesse-webext template by @antfu.

Features

Shared options

Adds a dynamic name at the header of the Popup by creating an option with the useWebExtensionStorage composable.

Image selector

An image grid showcasing the images from the webpage at the activeTab with a select functionality.

Packages under the hood

• webextension-polyfill - WebExtension browser API Polyfill with types
• webext-bridge - effortlessly communication between contexts
• unplugin-auto-import - Directly use browser and Vue Composition API without importing
• unplugin-vue-components - components auto import
• unplugin-icons - icons as components
  • Iconify - use icons from any icon sets 🔍Icônes
• VueUse - collection of useful composition APIs
• UnoCSS - the instant on-demand Atomic CSS engine

Usage

Folders

• src - main source.
  • contentScript - scripts and components to be injected as content_script
  • background - scripts for background.
  • components - auto-imported Vue components that are shared in popup and options page.
  • styles - styles shared in popup and options page
  • assets - assets used in Vue components
  • manifest.ts - manifest for the extension.
• extension - extension package root.
  • assets - static assets (mainly for manifest.json).
  • dist - built files, also serve stub entry for Vite on development.
• scripts - development and bundling helper scripts.

Development

pnpm dev

Then load extension in browser with the extension/ folder.

For Firefox developers, you can run the following command instead:

pnpm start:firefox

While Vite handles HMR automatically in the most of the case, Extensions Reloader is still recommended for cleaner hard reloading.

Build

To build the extension, run

pnpm build

And then pack files under extension, you can upload extension.crx or extension.xpi to appropriate extension store.

Web Extension Resources

Docs

Official documentation at Chrome for Developers: Get Started with Web Extensions.

Stay updated by checking What's new in Chrome extensions from time to time.

Books

“Browser extension development, simplified”.

Repositories

Vite starter Web Extensions templates: Vue 3, React, ...

Web Extensions superframework (agnostic): WXT.

Free courses

Build a Chrome Extension – Course for Beginners by freeCodeCamp.org.