-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit 89ec050
Showing
17 changed files
with
542 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
root = true | ||
|
||
[*] | ||
indent_style = tab | ||
end_of_line = lf | ||
charset = utf-8 | ||
trim_trailing_whitespace = true | ||
insert_final_newline = true | ||
|
||
[*.yml] | ||
indent_style = space | ||
indent_size = 2 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
* text=auto eol=lf | ||
*.ai binary |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
custom: https://paypal.me/bytemode |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,60 @@ | ||
# Copied from https://github.com/notlmn/browser-extension-template/blob/master/.github/workflows/deployment.yml | ||
name: Deployment | ||
|
||
on: | ||
schedule: | ||
- cron: '31 13 * * 3' | ||
push: | ||
tags: | ||
- "20.*" | ||
- "21.*" | ||
- "22.*" | ||
- "23.*" | ||
- "24.*" | ||
|
||
jobs: | ||
|
||
Build: | ||
outputs: | ||
created: ${{ steps.daily-version.outputs.created }} | ||
runs-on: ubuntu-latest | ||
steps: | ||
- uses: actions/checkout@v2 | ||
- run: npm install | ||
- run: npm test # This includes the build | ||
- uses: fregante/daily-version-action@v1 | ||
name: Create tag if necessary | ||
id: daily-version | ||
- name: Update extension’s meta | ||
env: | ||
VER: ${{ steps.daily-version.outputs.version }} | ||
run: | | ||
echo https://github.com/$GITHUB_REPOSITORY/tree/$VER > distribution/SOURCE_URL | ||
npm run version | ||
- uses: actions/upload-artifact@v2 | ||
with: | ||
path: distribution | ||
|
||
Chrome: | ||
needs: Build | ||
if: github.event_name == 'push' || needs.Build.outputs.created | ||
runs-on: ubuntu-latest | ||
steps: | ||
- uses: actions/download-artifact@v2 | ||
- run: cd artifact && npx chrome-webstore-upload-cli@1 upload --auto-publish | ||
env: | ||
EXTENSION_ID: ${{ secrets.EXTENSION_ID }} | ||
CLIENT_ID: ${{ secrets.CLIENT_ID }} | ||
CLIENT_SECRET: ${{ secrets.CLIENT_SECRET }} | ||
REFRESH_TOKEN: ${{ secrets.REFRESH_TOKEN }} | ||
|
||
Firefox: | ||
needs: Build | ||
if: github.event_name == 'push' || needs.Build.outputs.created | ||
runs-on: ubuntu-latest | ||
steps: | ||
- uses: actions/download-artifact@v2 | ||
- run: cd artifact && npx web-ext-submit@4 | ||
env: | ||
WEB_EXT_API_KEY: ${{ secrets.WEB_EXT_API_KEY }} | ||
WEB_EXT_API_SECRET: ${{ secrets.WEB_EXT_API_SECRET }} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
name: Test | ||
|
||
on: | ||
- pull_request | ||
- push | ||
|
||
jobs: | ||
test: | ||
runs-on: ubuntu-latest | ||
steps: | ||
- uses: actions/checkout@v2 | ||
- run: npm install | ||
- run: npm test |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
node_modules | ||
yarn.lock | ||
distribution |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
{ | ||
"private": true, | ||
"scripts": { | ||
"lint": "run-p lint:*", | ||
"lint:js": "xo", | ||
"lint:css": "stylelint source/**/*.css", | ||
"lint-fix": "run-p 'lint:* -- --fix'", | ||
"test": "run-s lint:* build", | ||
"build": "webpack --mode=production", | ||
"watch": "webpack --mode=development --watch", | ||
"version": "dot-json distribution/manifest.json version $VER", | ||
"release:cws": "webstore upload --source=distribution --auto-publish", | ||
"release:amo": "web-ext-submit --source-dir distribution", | ||
"release": "VER=$(daily-version) run-s build version release:*" | ||
}, | ||
"devDependencies": { | ||
"chrome-webstore-upload-cli": "^1.2.0", | ||
"copy-webpack-plugin": "^5.0.3", | ||
"daily-version": "^0.12.0", | ||
"dot-json": "^1.1.0", | ||
"eslint": "^6.1.0", | ||
"eslint-config-xo": "^0.26.0", | ||
"npm-run-all": "^4.1.5", | ||
"size-plugin": "^1.2.0", | ||
"stylelint": "^10.1.0", | ||
"stylelint-config-xo": "^0.15.0", | ||
"terser-webpack-plugin": "^1.3.0", | ||
"web-ext": "^4.1.0", | ||
"web-ext-submit": "^4.1.0", | ||
"webpack": "^4.36.1", | ||
"webpack-cli": "^3.3.6", | ||
"xo": "^0.24.0" | ||
}, | ||
"dependencies": { | ||
"webext-options-sync": "^0.21.2", | ||
"webextension-polyfill": "^0.4.0" | ||
}, | ||
"xo": { | ||
"envs": [ | ||
"browser" | ||
], | ||
"ignores": [ | ||
"distribution" | ||
], | ||
"globals": [ | ||
"browser" | ||
] | ||
}, | ||
"stylelint": { | ||
"extends": "stylelint-config-xo" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,185 @@ | ||
# browser-extension-template | ||
|
||
[link-webext-polyfill]: https://github.com/mozilla/webextension-polyfill | ||
[link-rgh]: https://github.com/sindresorhus/refined-github | ||
[link-ngh]: https://github.com/sindresorhus/notifier-for-github | ||
[link-hfog]: https://github.com/sindresorhus/hide-files-on-github | ||
[link-tsconfig]: https://github.com/sindresorhus/tsconfig | ||
[link-xo-ts]: https://github.com/xojs/eslint-config-xo-typescript | ||
[link-options-sync]: https://github.com/fregante/webext-options-sync | ||
[link-cws-keys]: https://github.com/DrewML/chrome-webstore-upload/blob/master/How%20to%20generate%20Google%20API%20keys.md | ||
[link-amo-keys]: https://addons.mozilla.org/en-US/developers/addon/api/key | ||
|
||
> Barebones boilerplate with webpack, options handler and auto-publishing. | ||
![Sample extension output](media/previewer.png) | ||
|
||
## Features | ||
|
||
- Use modern Promise-based `browser.*` APIs [webextension-polyfill][link-webext-polyfill]. | ||
- [Auto-syncing options](#auto-syncing-options). | ||
- [Auto-publishing](#publishing) with auto-versioning and support for manual releases. | ||
- [Extensive configuration documentation](#configuration). | ||
|
||
This extension template is heavily inspired by [refined-github][link-rgh], [notifier-for-github][link-ngh], and [hide-files-on-github][link-hfog] browser extensions. You can always refer to these browser extensions' source code if you find anything confusing on how to create a new extension. | ||
|
||
## How to use this template | ||
|
||
Click [<kbd>Use this template</kbd>](https://github.com/notlmn/browser-extension-template/generate) and make a copy of your own. 😉 | ||
|
||
## Configuration | ||
|
||
The extension doesn't target any specific ECMAScript environment or provide any transpiling by default. The extensions output will be the same ECMAScript you write. This allows us to always target the latest browser version, which is a good practice you should be following. | ||
|
||
### Webpack | ||
|
||
#### Transpiling using Babel | ||
|
||
The template bakes in a pretty basic webpack config, with no transpiling. To setup transpiling using Babel follow the following configuration steps. | ||
|
||
1. Install Babel packages and respective loader for webpack. | ||
|
||
``` sh | ||
npm i --save-dev @babel/core @babel/preset-env babel-loader | ||
``` | ||
1. In `webpack.config.js`, add the following rule to process JS files. | ||
|
||
``` js | ||
module: { | ||
rules: [ | ||
{ | ||
test: /\.js$/, | ||
exclude: /node_modules/, | ||
loader: 'babel-loader' | ||
} | ||
] | ||
} | ||
``` | ||
1. Target respective browsers using `.babelrc`. | ||
|
||
``` json | ||
{ | ||
"presets": [ | ||
["@babel/preset-env", { | ||
"targets": { | ||
"chrome": "74", | ||
"firefox": "67" | ||
} | ||
}] | ||
] | ||
} | ||
``` | ||
|
||
#### Extracting CSS | ||
|
||
If you will be writing any code that will be importing CSS files from JS files, then you will be needing `mini-css-extract-plugin` to extract this imported CSS into its own file. | ||
|
||
1. Install the webpack plugin. | ||
|
||
``` sh | ||
npm i --save-dev mini-css-extract-plugin | ||
``` | ||
1. Modify the webpack config as mentioned to let this plugin handle CSS imports. | ||
|
||
``` js | ||
// Import plugin | ||
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); | ||
|
||
// Under `module.rules` | ||
{ | ||
test: /\.css$/, | ||
use: [ | ||
MiniCssExtractPlugin.loader, | ||
'css-loader' | ||
] | ||
} | ||
|
||
// Under `plugins` | ||
new MiniCssExtractPlugin({ | ||
filename: 'content.css' | ||
}) | ||
``` | ||
|
||
#### TypeScript | ||
|
||
TypeScript and Babel configs conflict each other, so you can only use one of these configuration types at any point. | ||
|
||
1. Install TypeScript and respective loader for webpack | ||
|
||
``` sh | ||
npm i --save-dev typescript ts-loader @types/firefox-webext-browser | ||
``` | ||
1. Use the following webpack rule in the config file. | ||
|
||
``` js | ||
{ | ||
test: /\.(js|ts|tsx)$/, | ||
loader: 'ts-loader', | ||
exclude: /node_modules/ | ||
}, | ||
``` | ||
|
||
1. Use the following as `tsconfig.json`, uses [sindresorhus/tsconfig][link-tsconfig] (install it as dependecy before using). | ||
|
||
``` json | ||
{ | ||
"extends": "@sindresorhus/tsconfig", | ||
"compilerOptions": { | ||
"target": "esnext", | ||
"declaration": false | ||
}, | ||
"include": [ | ||
"source" | ||
] | ||
} | ||
``` | ||
|
||
TypeScript requires additional configuration depending on how you set it up, like [linting][link-xo-ts]. | ||
|
||
### Auto-syncing options | ||
|
||
Options are managed by [fregante/webext-options-sync][link-options-sync], which auto-saves and auto-restores the options form, applies defaults and runs migrations. | ||
|
||
### Publishing | ||
|
||
It's possible to publish to both the Chrome Web Store and Mozilla Addons at once by creating these ENV variables: | ||
|
||
1. `CLIENT_ID`, `CLIENT_SECRET`, and `REFRESH_TOKEN` from [Google APIs][link-cws-keys]. | ||
1. `WEB_EXT_API_KEY`, and `WEB_EXT_API_SECRET` from [AMO][link-amo-keys]. | ||
|
||
And then running: | ||
|
||
``` sh | ||
npm run release | ||
``` | ||
|
||
This will: | ||
|
||
1. Build the extension | ||
1. Create a version number based on the current UTC time, like [`19.6.16.428`](https://github.com/fregante/daily-version) and sets it in the manifest.json | ||
1. Deploy it to both stores | ||
|
||
#### Auto-publishing | ||
|
||
Thanks to the included [GitHub Action Workflows](.github/workflows), if you set up those ENVs in the repo's Settings, the deployment will automatically happen: | ||
|
||
- when creating a `deploy` tag (it will use the current date/time as version, like [`19.6.16.428`](hhttps://github.com/fregante/daily-version)) | ||
- when creating a specific version tag based on the same date format (like `20.1.2` or `20.1.2.3`) | ||
- on a schedule, by default [every week](.github/workflows/deploy-automatic.yml) (but only if there are any new commits in the last tag) | ||
|
||
### License | ||
|
||
This browser extension template is released under [CC0](#license) and mentioned below. There is no `license` file included in here, but when you clone this template, you should include your own license file for the specific license you choose to use. | ||
|
||
## Credits | ||
|
||
Extension icon made by [Freepik](https://www.freepik.com) from [www.flaticon.com](https://www.flaticon.com) is licensed by [CC 3.0 BY](http://creativecommons.org/licenses/by/3.0). | ||
|
||
## Extensions created using this template | ||
|
||
- [notlmn/copy-as-markdown](https://github.com/notlmn/copy-as-markdown) - Browser extension to copy hyperlinks, images, and selected text as Markdown. | ||
|
||
## License | ||
|
||
[![CC0](https://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg)](https://creativecommons.org/publicdomain/zero/1.0/) | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
// eslint-disable-next-line import/no-unassigned-import | ||
import './options-storage'; |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
{ | ||
"name": "Awesome Extension", | ||
"version": "0.0.0", | ||
"description": "An awesome new browser extension", | ||
"homepage_url": "https://github.com/awesome-templates/browser-extension-template", | ||
"manifest_version": 2, | ||
"minimum_chrome_version": "74", | ||
"applications": { | ||
"gecko": { | ||
"id": "awesome-extension@notlmn.github.io", | ||
"strict_min_version": "67.0" | ||
} | ||
}, | ||
"icons": { | ||
"128": "icon.png" | ||
}, | ||
"permissions": [ | ||
"storage" | ||
], | ||
"options_ui": { | ||
"chrome_style": true, | ||
"page": "options.html" | ||
}, | ||
"background": { | ||
"persistent": false, | ||
"scripts": [ | ||
"browser-polyfill.min.js", | ||
"background.js" | ||
] | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
import OptionsSync from 'webext-options-sync'; | ||
|
||
export default new OptionsSync({ | ||
defaults: { | ||
colorRed: 244, | ||
colorGreen: 67, | ||
colorBlue: 54 | ||
}, | ||
migrations: [ | ||
OptionsSync.migrations.removeUnused | ||
], | ||
logging: true | ||
}); |
Oops, something went wrong.