johnson86tw/59ext

The browser extension designed for the 591 Rental website enhances the user experience of finding a home.

59ext

針對 591 租屋網所設計的瀏覽器擴充套件，有助於改善找房的使用者體驗。

功能

• 直接隱藏所有廣告與不必要的區塊
• 能夠隱藏物件，把再也不想看到的房間隱藏起來
• 能夠儲存物件，可以在後台對已儲存的物件新增筆記
• 房屋詳情頁面能夠按 esc 跳出圖片或地圖預覽
• 明確顯示 url 內的篩選器參數
• 我覺得很棒

Demo

Credits

Built from template: https://github.com/antfu-collective/vitesse-webext

WebExtension Vite Starter

A Vite powered WebExtension (Chrome, FireFox, etc.) starter template.

<sub>Popup

Options Page

Inject Vue App into the Content Script</sub>

Features

• ⚡️ Instant HMR - use Vite on dev (no more refresh!)
• 🥝 Vue 3 - Composition API, <script setup> syntax and more!
• 💬 Effortless communications - powered by webext-bridge and VueUse storage
• 🌈 UnoCSS - The instant on-demand Atomic CSS engine.
• 🦾 TypeScript - type safe
• 📦 Components auto importing
• 🌟 Icons - Access to icons from any iconset directly
• 🖥 Content Script - Use Vue even in content script
• 🌍 WebExtension - isomorphic extension for Chrome, Firefox, and others
• 📃 Dynamic manifest.json with full type support

Pre-packed

WebExtension Libraries

• webextension-polyfill - WebExtension browser API Polyfill with types
• webext-bridge - effortlessly communication between contexts

Vite Plugins

• 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

Vue Plugins

• VueUse - collection of useful composition APIs

UI Frameworks

• UnoCSS - the instant on-demand Atomic CSS engine

Coding Style

• Use Composition API with <script setup> SFC syntax
• ESLint with @antfu/eslint-config, single quotes, no semi

Dev tools

• TypeScript
• pnpm - fast, disk space efficient package manager
• esno - TypeScript / ESNext node runtime powered by esbuild
• npm-run-all - Run multiple npm-scripts in parallel or sequential
• web-ext - Streamlined experience for developing web extensions

Use the Template

GitHub Template

Create a repo from this template on GitHub.

Clone to local

If you prefer to do it manually with the cleaner git history

If you don't have pnpm installed, run: npm install -g pnpm

npx degit antfu/vitesse-webext my-webext
cd my-webext
pnpm i

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

web-ext auto reload the extension when extension/ files changed.

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

Using Gitpod

If you have a web browser, you can get a fully pre-configured development environment with one click:

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.

Credits

This template is originally made for the volta.net browser extension.

Variations

This is a variant of Vitesse, check out the full variations list.