Skip to content

Commit f4f9b91

Browse files
davidnguyen11davidnguyen11
committed
first commit
0 parents  commit f4f9b91

31 files changed

+5723
-0
lines changed

‎.gitignore

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
dist/
2+
node_modules/
3+
coverage/
4+
.DS_Store

‎.prettierignore

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

‎.prettierrc

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"printWidth": 120,
3+
"singleQuote": true,
4+
"trailingComma": "es5"
5+
}

‎.vscode/extensions.json

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"recommendations": ["svelte.svelte-vscode"]}

‎LICENSE

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
The MIT License (MIT)
2+
Copyright 2021 davidnguyen179
3+
4+
Permission is hereby granted, free of charge, to any person obtaining a copy
5+
of this software and associated documentation files (the "Software"), to deal
6+
in the Software without restriction, including without limitation the rights
7+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8+
copies of the Software, and to permit persons to whom the Software is
9+
furnished to do so, subject to the following conditions:
10+
11+
The above copyright notice and this permission notice shall be included in all
12+
copies or substantial portions of the Software.
13+
14+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
20+
SOFTWARE.

‎PRIVACY_POLICY.txt

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
Chrome Web Store & Mozilla Add-on Store & Microsoft Edge Add-on Store Privacy Policies.
2+
======================================================================================================
3+
4+
Introduction
5+
============
6+
7+
Introduce your web extension
8+
9+
Information We Collect
10+
======================
11+
12+
Does your web extension collect data?
13+
14+
- I collect data
15+
- I don't collect data
16+
17+
How it uses cookies
18+
========================
19+
20+
If your web extension uses cookies, describe where your extension uses cookies and why?

‎README.md

+126
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
# Web Extension Svelte Boilerplate
2+
3+
<div align="center">
4+
<img width="300" src="https://user-images.githubusercontent.com/6290720/99804359-3d584200-2b7e-11eb-9cff-a2d7e207415e.png" />
5+
<br />
6+
<br />
7+
</div>
8+
9+
This boilerplate using [Svelte](https://svelte.dev/) provides a skeleton to start developing cross-browser web extensions.
10+
11+
## Development
12+
13+
```bash
14+
npm i
15+
```
16+
17+
**Chrome**
18+
19+
```bash
20+
npm run app:chrome-dev
21+
```
22+
23+
**Edge**
24+
25+
```bash
26+
npm run app:edge-dev
27+
```
28+
29+
**Firefox**
30+
31+
```bash
32+
npm run app:firefox-dev
33+
```
34+
35+
## Production
36+
37+
```bash
38+
npm i
39+
```
40+
41+
```bash
42+
npm run app:chrome
43+
```
44+
45+
**Edge**
46+
47+
```bash
48+
npm run app:edge
49+
```
50+
51+
**Firefox**
52+
53+
```bash
54+
npm run app:firefox
55+
```
56+
57+
## Load package to browsers
58+
59+
**Chrome**
60+
61+
1. Go to the browser's URL address bar
62+
2. Enter `chrome://extensions/`
63+
3. Switch to "**Developer mode**"
64+
4. Load extension by clicking "**Load unpacked**"
65+
5. Browse to `dist/` in source code
66+
6. Done!
67+
68+
Check here for more detail: [https://developer.chrome.com/extensions/getstarted](https://developer.chrome.com/extensions/getstarted)
69+
70+
**Edge**
71+
72+
1. Go to the browser's URL address bar
73+
2. Enter `edge://extensions/`
74+
3. Turn on `Developer mode`
75+
4. Load extension by clicking "**Load unpacked**"
76+
5. Browse to `dist/` in source code
77+
6. Done!
78+
79+
**Firefox**
80+
81+
1. Go to the browser's URL address bar
82+
2. Enter `about:debugging#/runtime/this-firefox`
83+
3. Click **Load Temporary Add-on...**
84+
4. Browse to your `manifest.json` & click **Open**
85+
5. Done!
86+
87+
Check here for more details: [https://extensionworkshop.com/documentation/develop/temporary-installation-in-firefox/](https://extensionworkshop.com/documentation/develop/temporary-installation-in-firefox/)
88+
89+
## Privacy Policy file
90+
91+
Web stores require you to describe what the extension is or if you collect data of users. You also need to describe why you do that.
92+
93+
Make sure you include this file when you publish an extension, the web store may ask you to upload it.
94+
95+
**Note:** If you don't know how to write a privacy policy file, you can look at the [existing one](https://github.com/davidnguyen179/web-extension-boilerplate/blob/main/PRIVACY_POLICY.txt) attached on this repository.
96+
97+
## Badges
98+
99+
You can add badges to your project to indicate the version or to show how many users use your extension here:
100+
101+
- [https://shields.io/](https://shields.io/)
102+
103+
## CI/CD with github action
104+
105+
You can modify the `.github/workflows` to show the CI/CD flow.
106+
107+
- [https://docs.github.com/en/free-pro-team@latest/actions/guides/building-and-testing-nodejs](https://docs.github.com/en/free-pro-team@latest/actions/guides/building-and-testing-nodejs)
108+
109+
## How to publish web extension
110+
111+
| Browsers | Web store |
112+
| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
113+
| Chrome | [https://developer.chrome.com/webstore/publish](https://developer.chrome.com/webstore/publish) |
114+
| Microsoft Edge | [https://docs.microsoft.com/en-us/microsoft-edge/extensions-chromium/publish/publish-extension](https://docs.microsoft.com/en-us/microsoft-edge/extensions-chromium/publish/publish-extension) |
115+
| Firefox | [https://extensionworkshop.com/documentation/publish/submitting-an-add-on](https://extensionworkshop.com/documentation/publish/submitting-an-add-on) |
116+
117+
## References
118+
119+
- Develop your first Chrome extension & Chromium Edge: [https://developer.chrome.com/extensions](https://developer.chrome.com/extensions)
120+
- Develop your first Firefox add-on: [https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension)
121+
- If you have any Chrome extension issues, you can post it here: [https://groups.google.com/a/chromium.org/forum/#!forum/chromium-extensions](https://groups.google.com/a/chromium.org/forum/#!forum/chromium-extensions)
122+
- [Jack and Amy Dev youtube channel](https://www.youtube.com/channel/UCVj3dGw75v8aHFYD6CL1tFg), which explains some common mistakes made when developing Chrome extensions.
123+
124+
## Showcase
125+
126+
This boilerplate was used to develop [Spotify Web Extension](https://spotify-extension.netlify.app/)

0 commit comments

Comments
 (0)