|
1 | | -# WebExtension Vite Starter |
| 1 | +# Fussy history search |
2 | 2 |
|
3 | | -A [Vite](https://vitejs.dev/) powered WebExtension ([Chrome](https://developer.chrome.com/docs/extensions/reference/), [FireFox](https://addons.mozilla.org/en-US/developers/), etc.) starter template. |
4 | | - |
5 | | -<p align="center"> |
6 | | -<sub>Popup</sub><br/> |
7 | | -<img width="655" src="https://user-images.githubusercontent.com/11247099/126741643-813b3773-17ff-4281-9737-f319e00feddc.png"><br/> |
8 | | -<sub>Options Page</sub><br/> |
9 | | -<img width="655" src="https://user-images.githubusercontent.com/11247099/126741653-43125b62-6578-4452-83a7-bee19be2eaa2.png"><br/> |
10 | | -<sub>Inject Vue App into the Content Script</sub><br/> |
11 | | -<img src="https://user-images.githubusercontent.com/11247099/130695439-52418cf0-e186-4085-8e19-23fe808a274e.png"> |
12 | | -</p> |
| 3 | +A very simple Chrome extension that enables fuzzy search of browsing histories. |
13 | 4 |
|
14 | 5 | ## Features |
15 | 6 |
|
16 | | -- ⚡️ **Instant HMR** - use **Vite** on dev (no more refresh!) |
17 | | -- 🥝 Vue 3 - Composition API, [`<script setup>` syntax](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md) and more! |
18 | | -- 💬 Effortless communications - powered by [`webext-bridge`](https://github.com/antfu/webext-bridge) and [VueUse](https://github.com/antfu/vueuse) storage |
19 | | -- 🍃 [Windi CSS](https://windicss.org/) - on-demand CSS utilities |
20 | | -- 🦾 [TypeScript](https://www.typescriptlang.org/) - type safe |
21 | | -- 📦 [Components auto importing](./src/components) |
22 | | -- 🌟 [Icons](./src/components) - Access to icons from any iconset directly |
23 | | -- 🖥 Content Script - Use Vue even in content script |
24 | | -- 🌍 WebExtension - isomorphic extension for Chrome, Firefox, and others |
25 | | -- 📃 Dynamic `manifest.json` with full type support |
26 | | - |
27 | | -## Pre-packed |
28 | | - |
29 | | -### WebExtension Libraries |
30 | | - |
31 | | -- [`webextension-polyfill`](https://github.com/mozilla/webextension-polyfill) - WebExtension browser API Polyfill with types |
32 | | -- [`webext-bridge`](https://github.com/antfu/webext-bridge) - effortlessly communication between contexts |
33 | | - |
34 | | -### Vite Plugins |
35 | | - |
36 | | -- [`unplugin-auto-import`](https://github.com/antfu/unplugin-auto-import) - Directly use `browser` and Vue Composition API without importing |
37 | | -- [`unplugin-vue-components`](https://github.com/antfu/vite-plugin-components) - components auto import |
38 | | -- [`unplugin-icons`](https://github.com/antfu/unplugin-icons) - icons as components |
39 | | - - [Iconify](https://iconify.design) - use icons from any icon sets [🔍Icônes](https://icones.netlify.app/) |
40 | | -- [`vite-plugin-windicss`](https://github.com/antfu/vite-plugin-windicss) - WindiCSS support |
41 | | - |
42 | | -### Vue Plugins |
43 | | - |
44 | | -- [VueUse](https://github.com/antfu/vueuse) - collection of useful composition APIs |
45 | | - |
46 | | -### UI Frameworks |
47 | | - |
48 | | -- [Windi CSS](https://github.com/windicss/windicss) - next generation utility-first CSS framework |
49 | | - |
50 | | -### Coding Style |
51 | | - |
52 | | -- Use Composition API with [`<script setup>` SFC syntax](https://github.com/vuejs/rfcs/pull/227) |
53 | | -- [ESLint](https://eslint.org/) with [@antfu/eslint-config](https://github.com/antfu/eslint-config), single quotes, no semi |
54 | | - |
55 | | -### Dev tools |
56 | | - |
57 | | -- [TypeScript](https://www.typescriptlang.org/) |
58 | | -- [pnpm](https://pnpm.js.org/) - fast, disk space efficient package manager |
59 | | -- [esno](https://github.com/antfu/esno) - TypeScript / ESNext node runtime powered by esbuild |
60 | | -- [npm-run-all](https://github.com/mysticatea/npm-run-all) - Run multiple npm-scripts in parallel or sequential |
61 | | -- [web-ext](https://github.com/mozilla/web-ext) - Streamlined experience for developing web extensions |
62 | | - |
63 | | -## Use the Template |
64 | | - |
65 | | -### GitHub Template |
66 | | - |
67 | | -[Create a repo from this template on GitHub](https://github.com/antfu/vitesse-webext/generate). |
68 | | - |
69 | | -### Clone to local |
70 | | - |
71 | | -If you prefer to do it manually with the cleaner git history |
72 | | - |
73 | | -> If you don't have pnpm installed, run: npm install -g pnpm |
74 | | -
|
75 | | -```bash |
76 | | -npx degit antfu/vitesse-webext my-webext |
77 | | -cd my-webext |
78 | | -pnpm i |
79 | | -``` |
80 | | - |
81 | | -## Usage |
82 | | - |
83 | | -### Folders |
84 | | - |
85 | | -- `src` - main source. |
86 | | - - `contentScript` - scripts and components to be injected as `content_script` |
87 | | - - `background` - scripts for background. |
88 | | - - `components` - auto-imported Vue components that shared in popup and options page. |
89 | | - - `styles` - styles shared in popup and options page |
90 | | - - `manifest.ts` - manifest for the extension. |
91 | | -- `extension` - extension package root. |
92 | | - - `assets` - static assets. |
93 | | - - `dist` - built files, also serve stub entry for Vite on development. |
94 | | -- `scripts` - development and bundling helper scripts. |
95 | | - |
96 | | -### Development |
97 | | - |
98 | | -```bash |
99 | | -pnpm dev |
100 | | -``` |
101 | | - |
102 | | -Then **load extension in browser with the `extension/` folder**. |
103 | | - |
104 | | -For Firefox developers, you can run the following command instead: |
105 | | - |
106 | | -```bash |
107 | | -pnpm start:firefox |
108 | | -``` |
109 | | - |
110 | | -`web-ext` auto reload the extension when `extension/` files changed. |
111 | | - |
112 | | -> While Vite handles HMR automatically in the most of the case, [Extensions Reloader](https://chrome.google.com/webstore/detail/fimgfedafeadlieiabdeeaodndnlbhid) is still recommanded for cleaner hard reloading. |
113 | | -
|
114 | | -### Build |
115 | | - |
116 | | -To build the extension, run |
117 | | - |
118 | | -```bash |
119 | | -pnpm build |
120 | | -``` |
| 7 | +- ⚡️ Fuzzy search your browsing history. powered by [Fuse.js](https://fusejs.io/) |
| 8 | +- 🔐 All processing is done within the browser. No history data will be sent to the any server. |
121 | 9 |
|
122 | | -And then pack files under `extension`, you can upload `extension.crx` or `extension.xpi` to appropriate extension store. |
| 10 | +## Demo |
123 | 11 |
|
124 | | -## Credits |
| 12 | +https://user-images.githubusercontent.com/11070996/147921381-500b1045-c544-4938-bc5f-f88759cc415b.mp4 |
125 | 13 |
|
126 | | - |
| 14 | +## install |
127 | 15 |
|
128 | | -This template is originally made for the [volta.net](https://volta.net) browser extension. |
| 16 | +// TODO |
129 | 17 |
|
130 | | -## Variations |
| 18 | +I am currently in the process of submitting an extension to the public. |
131 | 19 |
|
132 | | -This is a variant of [Vitesse](https://github.com/antfu/vitesse), check out the [full variations list](https://github.com/antfu/vitesse#variations). |
| 20 | +## Contributing |
| 21 | +Contributions are welcome 🎉 We accept contributions via Pull Requests. |
![https://user-images.githubusercontent.com/11247099/126741643-813b3773-17ff-4281-9737-f319e00feddc.png"><br/](https://user-images.githubusercontent.com/11247099/126741643-813b3773-17ff-4281-9737-f319e00feddc.png"><br/){kind=link}
![https://user-images.githubusercontent.com/11247099/126741653-43125b62-6578-4452-83a7-bee19be2eaa2.png"><br/](https://user-images.githubusercontent.com/11247099/126741653-43125b62-6578-4452-83a7-bee19be2eaa2.png"><br/){kind=link}
0 commit comments