From 878d2de87be55bbacd2106fecbda4412daf2a99e Mon Sep 17 00:00:00 2001 From: MusicalBean Date: Sun, 27 Aug 2023 06:25:49 -0700 Subject: [PATCH] Update README --- README.md | 195 ++++++++++-------------------------------------------- 1 file changed, 35 insertions(+), 160 deletions(-) diff --git a/README.md b/README.md index d67f030..a94d031 100644 --- a/README.md +++ b/README.md @@ -1,185 +1,60 @@ -

🚀 web-extension-starter

-

Web Extension starter to build "Write Once Run on Any Browser" extension

-
- - Travis Build - - - - DEPENDENCIES - - - LICENSE - - - TWEET - -
-

🙋‍♂️ Made by @abhijithvijayan

-

- Donate: - PayPal, - Patreon -

-

- - Buy Me a Coffee - -

-
+# Encora Tools -❤️ 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. +This extension adds additional features to the Encora website. It is built on the [abhijithvijayan/web-extension-starter](https://github.com/abhijithvijayan/web-extension-starter) package. -🧙‍♂️ **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 - -| [![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png)](/) | [![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png)](/) | [![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png)](/) | [![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png)](/) | [![Yandex](https://raw.github.com/alrra/browser-logos/master/src/yandex/yandex_48x48.png)](/) | [![Brave](https://raw.github.com/alrra/browser-logos/master/src/brave/brave_48x48.png)](/) | [![vivaldi](https://raw.github.com/alrra/browser-logos/master/src/vivaldi/vivaldi_48x48.png)](/) | -| --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ | -| 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 +## Get started Ensure you have -- [Node.js](https://nodejs.org) 10 or later installed -- [Yarn](https://yarnpkg.com) v1 or v2 installed +- [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 +- `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 +- `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` + - Chrome + - `yarn run dev:chrome` + - Firefox + - `yarn run dev:firefox` + - Opera + - `yarn run dev:opera` -- **Load extension in browser** +- **Load extension in browser** -- ### Chrome +- ### 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/`. + - 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 +- ### Firefox - - Load the Add-on via `about:debugging` as temporary Add-on. - - Choose the `manifest.json` file in the extracted directory + - Load the Add-on via `about:debugging` as temporary Add-on. + - Choose the `manifest.json` file in the extracted directory -- ### Opera +- ### Opera - - Load the extension via `opera:extensions` - - Check the `Developer Mode` and load as unpacked from extension’s extracted directory. + - 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) +- `yarn run build` builds the extension for all the browsers to `extension/BROWSER` directory respectively. ## License -MIT © [Abhijith Vijayan](https://abhijithvijayan.in) +MIT © [Musical Bean](https://musicalbean.carrd.co)