Skip to content

Commit 21a6f71

Browse files
tchin25tchin25
committed
initial commit
0 parents  commit 21a6f71

18 files changed

+9162
-0
lines changed

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
dist

‎README.md

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
# Vue 3 Typescript Web Extensions Starter
2+
3+
So your boy Thomas over here, while in the middle of building an app, decided to get distracted and web extensions. And since I'm a heavy Vue user, this boilerplate came out of it.
4+
5+
This is a boilerplate to creating cross-browser web extensions using Vue 3 and Typescript. It contains an example options page, popup action, background script, content script, and testing script.
6+
7+
It contains:
8+
9+
- Vue 3 and Typescript Support
10+
- Cross-platform supporting using [webextension-polyfill-ts](https://github.com/Lusito/webextension-polyfill-ts)
11+
- Bundling using Laravel Mix
12+
- Testing with Jest
13+
- Shattered remnants of my hopes and dreams
14+
15+
Inspired by [this video](https://www.youtube.com/watch?v=kYl271X2LNA).
16+
17+
## Installation
18+
19+
1. Clone this template
20+
2. Install with `yarn`
21+
3. `npx mix` to build into `dist`
22+
4. Enable dev mode in `chrome://extensions/` and upload your extension
23+
- If you want to develop for Firefox, you need the [web-ext cli](https://extensionworkshop.com/documentation/develop/web-ext-command-reference/)
24+
25+
## Directory Structure
26+
27+
Laravel Mix is rather easy to read, so there isn't really much explaining to do.
28+
29+
- Every Typescript file in the top-level `src/ts` is compiled into the top-level `dist/js`
30+
- `ui/options.ts` and `ui/popup.ts` are also currently compiled into the top-level `dist/js`
31+
- Scss files in `src/scss` is compiled into their respective css into the top-level `dist/css`
32+
- Files in `src/static` are moved into the top-level `dist`
33+
34+
### Uncompiled
35+
36+
```markdown
37+
src/
38+
├─ scss/
39+
│ ├─ styles.scss
40+
├─ static/
41+
│ ├─ manifest.json
42+
│ ├─ options.html
43+
│ ├─ popup.html
44+
├─ ts/
45+
│ ├─ ui/
46+
│ ├─ components/
47+
│ ├─ OptionsScreen.vue
48+
│ ├─ PopupScreen.vue
49+
│ ├─ example-composition-api.ts
50+
│ ├─ options.ts
51+
│ ├─ popup.ts
52+
│ ├─ background.ts
53+
│ ├─ content-script.ts
54+
```
55+
56+
### Compiled
57+
58+
```markdown
59+
dist/
60+
├─ css/
61+
│ ├─ styles.css
62+
├─ js/
63+
│ ├─ options.js
64+
│ ├─ popup.js
65+
│ ├─ background.js
66+
│ ├─ content-script.js
67+
├─ manifest.json
68+
├─ options.html
69+
├─ popup.html
70+
```
71+
72+
## Contributing
73+
74+
Not gonna lie, I'm not the brightest bulb in the shed. One time I said that 5 x 22 was 1100. Pull requests are welcomed.
75+
76+
## Todo
77+
78+
- [ ] [Replace feature flag globals during bundling](http://link.vuejs.org/feature-flags). Apparently, this doesn't seem to be possible with Laravel Mix since they [override any user DefinePlugins](https://stackoverflow.com/questions/48906425/laravel-mix-webpack-environment-dependent-variable-for-client-code). If anyone wants to port this to pure Webpack so we can check this off, please feel free.

‎package.json

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
{
2+
"name": "vue3-typescript-web-extensions-template",
3+
"version": "0.0.1",
4+
"description": "",
5+
"scripts": {
6+
"build": "npx mix",
7+
"build:prod": "npx mix --production"
8+
},
9+
"author": "Thomas Chin",
10+
"license": "ISC",
11+
"devDependencies": {
12+
"@types/jest": "^26.0.20",
13+
"@vue/compiler-sfc": "^3.0.5",
14+
"@vue/test-utils": "^2.0.0-rc.0",
15+
"jest": "^26.6.3",
16+
"laravel-mix": "^6.0.11",
17+
"laravel-mix-glob": "^1.1.9",
18+
"postcss": "8.1",
19+
"sass": "^1.32.6",
20+
"sass-loader": "^11.0.0",
21+
"ts-jest": "^26.5.1",
22+
"ts-loader": "^8.0.15",
23+
"typescript": "^4.1.3",
24+
"vue": "^3.0.5",
25+
"vue-jest": "^5.0.0-alpha.7",
26+
"vue-loader": "^16.1.2",
27+
"webextension-polyfill-ts": "^0.24.0"
28+
},
29+
"jest": {
30+
"moduleFileExtensions": [
31+
"ts",
32+
"tsx",
33+
"vue",
34+
"js",
35+
"jsx",
36+
"json",
37+
"node"
38+
],
39+
"moduleNameMapper": {
40+
"^@/(.*)$": "<rootDir>/src/$1"
41+
},
42+
"transform": {
43+
"^.+\\.vue$": "vue-jest",
44+
"^.+\\.tsx?$": "ts-jest"
45+
},
46+
"transformIgnorePatterns": [
47+
"/node_modules/"
48+
],
49+
"testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$"
50+
}
51+
}

‎src/scss/styles.scss

Whitespace-only changes.

‎src/static/manifest.json

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "Stat Blocker",
3+
"version": "0.0.1",
4+
"description": "Blocks self-stats",
5+
"manifest_version": 2,
6+
"permissions": [
7+
"storage",
8+
"<all_urls>"
9+
],
10+
"background": {
11+
"scripts": ["js/background.js"]
12+
},
13+
"browser_action": {
14+
"default_popup": "popup.html"
15+
},
16+
"options_ui": {
17+
"page": "options.html"
18+
},
19+
"content_scripts": [
20+
{
21+
"matches": ["<all_urls>"],
22+
"js": ["js/content-script.js"]
23+
}
24+
]
25+
}

‎src/static/options.html

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
2+
<!DOCTYPE html>
3+
<html lang="en_US">
4+
<head>
5+
<title>Options Page</title>
6+
</head>
7+
<body>
8+
<div id="app"></div>
9+
<script src="js/options.js"></script>
10+
</body>
11+
</html>

‎src/static/popup.html

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
2+
<!DOCTYPE html>
3+
<html lang="en_US">
4+
<head>
5+
<script type="application/javascript" src="browser-polyfill.js"></script>
6+
</head>
7+
<body>
8+
<div id="app"></div>
9+
<script src="js/popup.js"></script>
10+
</body>
11+
</html>

‎src/tests/example.spec.ts

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { shallowMount } from "@vue/test-utils";
2+
import OptionsScreen from "@/ts/ui/components/OptionsScreen.vue";
3+
4+
describe("OptionsScreen.vue", () => {
5+
test("renders options page when passed", () => {
6+
const wrapper = shallowMount(OptionsScreen, {});
7+
expect(wrapper.text()).toMatch("Options Page");
8+
});
9+
});

‎src/ts/background.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { browser, Runtime } from "webextension-polyfill-ts";
2+
3+
browser.runtime.onMessage.addListener(
4+
(message: any, sender: Runtime.MessageSender) => {}
5+
);

‎src/ts/content-script.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
console.log("Hello World!");

‎src/ts/ui/components/OptionsScreen.vue

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<template>
2+
<div>Options Page</div>
3+
</template>
4+
5+
<script lang="ts">
6+
import { defineComponent } from "vue";
7+
8+
export default defineComponent({});
9+
</script>
10+
11+
<style lang="scss"></style>

‎src/ts/ui/components/PopupScreen.vue

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<template>
2+
<div>Popup</div>
3+
</template>
4+
5+
<script lang="ts">
6+
import { defineComponent } from "vue";
7+
8+
export default defineComponent({});
9+
</script>
10+
11+
<style lang="scss"></style>

‎src/ts/ui/options.ts

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { createApp } from "vue";
2+
import OptionsScreen from "./components/OptionsScreen.vue";
3+
4+
const app = createApp(OptionsScreen);
5+
6+
app.mount("#app");

‎src/ts/ui/popup.ts

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { createApp } from "vue";
2+
import PopupScreen from "./components/PopupScreen.vue";
3+
4+
const app = createApp(PopupScreen);
5+
6+
app.mount("#app");

‎src/ts/ui/shims-vue.d.ts

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
// https://vuejs.github.io/vetur/guide/setup.html#typescript
2+
declare module '*.vue' {
3+
import type { DefineComponent } from 'vue'
4+
const component: DefineComponent<{}, {}, any>
5+
export default component
6+
}

‎tsconfig.json

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"compilerOptions": {
3+
"moduleResolution": "node",
4+
"target": "ES2020",
5+
"noImplicitAny": false,
6+
"strict": true,
7+
"sourceMap": false
8+
},
9+
"include": ["**/*.ts", "**/*.vue"],
10+
"exclude": ["/dist", "node_modules"]
11+
}

‎webpack.mix.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
let mix = require("laravel-mix");
2+
const MixGlob = require("laravel-mix-glob");
3+
4+
const mixGlob = new MixGlob({ mix });
5+
mix.setPublicPath("dist");
6+
7+
mixGlob
8+
.sass("src/scss/**/*.scss", "dist/css", null, { base: "src/scss" })
9+
.ts("src/ts/*.ts", "dist/js", null, { base: "src/ts" });
10+
11+
mix
12+
.ts("src/ts/ui/popup.ts", "dist/js")
13+
.vue()
14+
.ts("src/ts/ui/options.ts", "dist/js")
15+
.vue()
16+
.copy("src/static", "dist")
17+
.options({
18+
processCssUrls: false,
19+
});

0 commit comments

Comments
 (0)