new
This commit is contained in:
Lalle
parent
8252949ce9
commit
db5e160c1f
186
README.md
186
README.md
@ -1 +1,185 @@
|
||||
# Hello!
|
||||
<h1 align="center">🚀 web-extension-starter</h1>
|
||||
<p align="center">Web Extension starter to build "Write Once Run on Any Browser" extension</p>
|
||||
<div align="center">
|
||||
<a href="https://travis-ci.com/abhijithvijayan/web-extension-starter">
|
||||
<img src="https://travis-ci.com/abhijithvijayan/web-extension-starter.svg?branch=react-typescript" alt="Travis Build" />
|
||||
</a>
|
||||
</a>
|
||||
<a href="https://david-dm.org/abhijithvijayan/web-extension-starter">
|
||||
<img src="https://img.shields.io/david/abhijithvijayan/web-extension-starter.svg?colorB=orange" alt="DEPENDENCIES" />
|
||||
</a>
|
||||
<a href="https://github.com/abhijithvijayan/web-extension-starter/blob/master/LICENSE">
|
||||
<img src="https://img.shields.io/github/license/abhijithvijayan/web-extension-starter.svg" alt="LICENSE" />
|
||||
</a>
|
||||
<a href="https://twitter.com/intent/tweet?text=Check%20out%20web-extension-starter%21%20by%20%40_abhijithv%0A%0AWeb%20Extension%20starter%20to%20build%20%22Write%20Once%20Run%20on%20Any%20Browser%22%20extension.%20https%3A%2F%2Fgithub.com%2Fabhijithvijayan%2Fweb-extension-starter%0A%0A%23javascript%20%23react%20%23typescript%20%23sass%20%23webextension%20%23chrome%20%23firefox%20%23opera">
|
||||
<img src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social" alt="TWEET" />
|
||||
</a>
|
||||
</div>
|
||||
<h3 align="center">🙋♂️ Made by <a href="https://twitter.com/_abhijithv">@abhijithvijayan</a></h3>
|
||||
<p align="center">
|
||||
Donate:
|
||||
<a href="https://www.paypal.me/iamabhijithvijayan" target='_blank'><i><b>PayPal</b></i></a>,
|
||||
<a href="https://www.patreon.com/abhijithvijayan" target='_blank'><i><b>Patreon</b></i></a>
|
||||
</p>
|
||||
<p align="center">
|
||||
<a href='https://www.buymeacoffee.com/abhijithvijayan' target='_blank'>
|
||||
<img height='36' style='border:0px;height:36px;' src='https://bmc-cdn.nyc3.digitaloceanspaces.com/BMC-button-images/custom_images/orange_img.png' border='0' alt='Buy Me a Coffee' />
|
||||
</a>
|
||||
</p>
|
||||
<hr />
|
||||
|
||||
❤️ it? ⭐️ it on [GitHub](https://github.com/abhijithvijayan/web-extension-starter) or [Tweet](https://twitter.com/intent/tweet?text=Check%20out%20web-extension-starter%21%20by%20%40_abhijithv%0A%0AWeb%20Extension%20starter%20to%20build%20%22Write%20Once%20Run%20on%20Any%20Browser%22%20extension.%20https%3A%2F%2Fgithub.com%2Fabhijithvijayan%2Fweb-extension-starter%0A%0A%23javascript%20%23react%20%23typescript%20%23sass%20%23webextension%20%23chrome%20%23firefox%20%23opera) about it.
|
||||
|
||||
🧙♂️ **React + TypeScript** = [This](https://github.com/abhijithvijayan/web-extension-starter/tree/react-typescript) branch
|
||||
|
||||
😨 **React + JavaScript** = Checkout [react-javascript](https://github.com/abhijithvijayan/web-extension-starter/tree/react-javascript) branch
|
||||
|
||||
👶🏼 **HTML + JavaScript** = Checkout [master](https://github.com/abhijithvijayan/web-extension-starter/tree/master) branch
|
||||
|
||||
## Features
|
||||
|
||||
- Cross Browser Support (Web-Extensions API)
|
||||
- Browser Tailored Manifest generation
|
||||
- Automatic build on code changes
|
||||
- Auto packs browser specific build files
|
||||
- SASS styling
|
||||
- TypeScript by default
|
||||
- ES6 modules support
|
||||
- React UI Library by default
|
||||
- Smart reload
|
||||
|
||||
## Browser Support
|
||||
|
||||
| [](/) | [](/) | [](/) | [](/) | [](/) | [](/) | [](/) |
|
||||
| --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ |
|
||||
| 49 & later ✔ | 52 & later ✔ | 36 & later ✔ | 79 & later ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
|
||||
|
||||
## Used by extensions in production that has over 100,000+ users.
|
||||
|
||||
- [daily.dev](https://daily.dev) in [daily.dev extension](https://r.daily.dev/get)
|
||||
- [Jiffy Reader](https://chrome.google.com/webstore/detail/jiffy-reader/lljedihjnnjjefafchaljkhbpfhfkdic) in [ansh/jiffyreader.com](https://github.com/ansh/jiffyreader.com)
|
||||
- [kutt-extension](https://chrome.google.com/webstore/detail/kutt/pklakpjfiegjacoppcodencchehlfnpd) in [abhijithvijayan/kutt-extension](https://github.com/abhijithvijayan/kutt-extension)
|
||||
- [doubanIMDb](https://chrome.google.com/webstore/detail/doubanimdb/nfibbjnhkbjlgjaojglmmibdjicidini) in [lisongx/doubanIMDb](https://github.com/lisongx/doubanIMDb)
|
||||
- [Mooc Assistant](https://chrome.google.com/webstore/detail/mooc-assistant/oebggekgendmoeedkkdkdcdbmfbfeldc) in [unbyte/mooc-assistant](https://github.com/unbyte/mooc-assistant)
|
||||
- ArtiPub in [crawlab-team/artipub](https://github.com/crawlab-team/artipub/tree/master/extensions)
|
||||
|
||||
and many more...
|
||||
|
||||
## Use this template
|
||||
|
||||
Create a new directory and run
|
||||
|
||||
```
|
||||
curl -fsSL https://github.com/abhijithvijayan/web-extension-starter/archive/react-typescript.tar.gz | tar -xz --strip-components=1
|
||||
```
|
||||
|
||||
## 🚀 Quick Start
|
||||
|
||||
Ensure you have
|
||||
|
||||
- [Node.js](https://nodejs.org) 10 or later installed
|
||||
- [Yarn](https://yarnpkg.com) v1 or v2 installed
|
||||
|
||||
Then run the following:
|
||||
|
||||
- `yarn install` to install dependencies.
|
||||
- `yarn run dev:chrome` to start the development server for chrome extension
|
||||
- `yarn run dev:firefox` to start the development server for firefox addon
|
||||
- `yarn run dev:opera` to start the development server for opera extension
|
||||
- `yarn run build:chrome` to build chrome extension
|
||||
- `yarn run build:firefox` to build firefox addon
|
||||
- `yarn run build:opera` to build opera extension
|
||||
- `yarn run build` builds and packs extensions all at once to extension/ directory
|
||||
|
||||
### Development
|
||||
|
||||
- `yarn install` to install dependencies.
|
||||
- To watch file changes in development
|
||||
|
||||
- Chrome
|
||||
- `yarn run dev:chrome`
|
||||
- Firefox
|
||||
- `yarn run dev:firefox`
|
||||
- Opera
|
||||
- `yarn run dev:opera`
|
||||
|
||||
- **Load extension in browser**
|
||||
|
||||
- ### Chrome
|
||||
|
||||
- Go to the browser address bar and type `chrome://extensions`
|
||||
- Check the `Developer Mode` button to enable it.
|
||||
- Click on the `Load Unpacked Extension…` button.
|
||||
- Select your browsers folder in `extension/`.
|
||||
|
||||
- ### Firefox
|
||||
|
||||
- Load the Add-on via `about:debugging` as temporary Add-on.
|
||||
- Choose the `manifest.json` file in the extracted directory
|
||||
|
||||
- ### Opera
|
||||
|
||||
- Load the extension via `opera:extensions`
|
||||
- Check the `Developer Mode` and load as unpacked from extension’s extracted directory.
|
||||
|
||||
### Production
|
||||
|
||||
- `yarn run build` builds the extension for all the browsers to `extension/BROWSER` directory respectively.
|
||||
|
||||
Note: By default the `manifest.json` is set with version `0.0.0`. The webpack loader will update the version in the build with that of the `package.json` version. In order to release a new version, update version in `package.json` and run script.
|
||||
|
||||
If you don't want to use `package.json` version, you can disable the option [here](https://github.com/abhijithvijayan/web-extension-starter/blob/e10158c4a49948dea9fdca06592876d9ca04e028/webpack.config.js#L79).
|
||||
|
||||
### Generating browser specific manifest.json
|
||||
|
||||
Update `source/manifest.json` file with browser vendor prefixed manifest keys
|
||||
|
||||
```js
|
||||
{
|
||||
"__chrome__name": "SuperChrome",
|
||||
"__firefox__name": "SuperFox",
|
||||
"__edge__name": "SuperEdge",
|
||||
"__opera__name": "SuperOpera"
|
||||
}
|
||||
```
|
||||
|
||||
if the vendor is `chrome` this compiles to:
|
||||
|
||||
```js
|
||||
{
|
||||
"name": "SuperChrome",
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Add keys to multiple vendors by separating them with | in the prefix
|
||||
|
||||
```
|
||||
{
|
||||
__chrome|opera__name: "SuperBlink"
|
||||
}
|
||||
```
|
||||
|
||||
if the vendor is `chrome` or `opera`, this compiles to:
|
||||
|
||||
```
|
||||
{
|
||||
"name": "SuperBlink"
|
||||
}
|
||||
```
|
||||
|
||||
See the original [README](https://github.com/abhijithvijayan/wext-manifest-loader) of `wext-manifest-loader` package for more details
|
||||
|
||||
## Bugs
|
||||
|
||||
Please file an issue [here](https://github.com/abhijithvijayan/web-extension-starter/issues/new) for bugs, missing documentation, or unexpected behavior.
|
||||
|
||||
### Linting & TypeScript Config
|
||||
|
||||
- Shared Eslint & Prettier Configuration - [`@abhijithvijayan/eslint-config`](https://www.npmjs.com/package/@abhijithvijayan/eslint-config)
|
||||
- Shared TypeScript Configuration - [`@abhijithvijayan/tsconfig`](https://www.npmjs.com/package/@abhijithvijayan/tsconfig)
|
||||
|
||||
## License
|
||||
|
||||
MIT © [Abhijith Vijayan](https://abhijithvijayan.in)
|
||||
|
||||
27598
package-lock.json
generated
27598
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -6,10 +6,10 @@
|
||||
"repository": "https://github.com/abhijithvijayan/web-extension-starter.git",
|
||||
"author": {
|
||||
"name": "abhijithvijayan",
|
||||
"email": "goy@goyslop.xyz",
|
||||
"url": "https://goyslop.xyz"
|
||||
"email": "email@abhijithvijayan.in",
|
||||
"url": "https://abhijithvijayan.in"
|
||||
},
|
||||
"license": "GPLV3",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=10.0.0",
|
||||
"yarn": ">= 1.0.0"
|
||||
|
||||
@ -16,10 +16,8 @@
|
||||
"permissions": [
|
||||
"activeTab",
|
||||
"storage",
|
||||
"http://www.4chan.org/*",
|
||||
"https://www.4chan.org/*",
|
||||
"http://boards.4channel.org/*",
|
||||
"https://boards.4channel.org/*"
|
||||
"http://*/*",
|
||||
"https://*/*"
|
||||
],
|
||||
|
||||
"content_security_policy": "script-src 'self'; object-src 'self'",
|
||||
@ -67,13 +65,11 @@
|
||||
|
||||
"content_scripts": [{
|
||||
"matches": [
|
||||
"http://www.4chan.org/*",
|
||||
"https://www.4chan.org/*",
|
||||
"http://boards.4channel.org/*",
|
||||
"https://boards.4channel.org/*"
|
||||
"http://*/*",
|
||||
"https://*/*"
|
||||
],
|
||||
"js": [
|
||||
"js/contentScript.bundle.js"
|
||||
]
|
||||
}]
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user