new

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
+
+| [![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
+
+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)

package.json

@@ -6,10 +6,10 @@
   "repository": "https://github.com/abhijithvijayan/web-extension-starter.git",
   "author": {
     "name": "abhijithvijayan",
-    "email": "goy@goyslop.xyz",
+    "email": "email@abhijithvijayan.in",
-    "url": "https://goyslop.xyz"
+    "url": "https://abhijithvijayan.in"
   },
-  "license": "GPLV3",
+  "license": "MIT",
   "engines": {
     "node": ">=10.0.0",
     "yarn": ">= 1.0.0"

source/manifest.json

@@ -16,10 +16,8 @@
   "permissions": [
     "activeTab",
     "storage",
-    "http://www.4chan.org/*",
+    "http://*/*",
-    "https://www.4chan.org/*",
+    "https://*/*"
-    "http://boards.4channel.org/*",
-    "https://boards.4channel.org/*"
   ],
 
   "content_security_policy": "script-src 'self'; object-src 'self'",
@@ -67,13 +65,11 @@
 
   "content_scripts": [{
     "matches": [
-	    "http://www.4chan.org/*",
+      "http://*/*",
-	    "https://www.4chan.org/*",
+      "https://*/*"
-	    "http://boards.4channel.org/*",
-	    "https://boards.4channel.org/*"
     ],
     "js": [
       "js/contentScript.bundle.js"
     ]
   }]
-}
+}