Skip to content

Commit 46a4738

Browse files
WebExp0528WebExp0528
authored
Merge pull request #22 from WebExp0528/development
Add preview
2 parents 15b78d6 + e3c1b4b commit 46a4738

File tree

15 files changed

+101
-104
lines changed

15 files changed

+101
-104
lines changed

‎.markdownlint.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"no-inline-html": {
3+
"allowed_elements": ["details", "p", "div", "h1", "strong"]
4+
},
5+
"line-length": false
6+
}

‎.prettierrc.json

100644100755
File mode changed.

‎.vscode/settings.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"[markdown]": {
3+
"editor.formatOnSave": false
4+
}
5+
}

‎LICENSE

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MIT License
22

3-
Copyright (c) 2019 WebExp0528
3+
Copyright (c) 2020 WebEXP0528
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

‎README.md

Lines changed: 75 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,90 @@
1-
<div align="center">
2-
<h1>
3-
React Extension Boilerplate
4-
</h1>
1+
# React Extension Boilerplate
52

6-
<p>
7-
<strong>Works for Chrome, Opera, Edge & Firefox.</strong>
8-
</p>
9-
</div>
3+
Works for Chrome, Opera, Edge & Firefox.
104

11-
## Features
12-
13-
<dl>
14-
<dt>Write in your favourite framework - React! :) </dt>
15-
<dd>
16-
Now you can create part of your exstensions in React framework - as you wish ;)
17-
</dd>
18-
</dl>
19-
20-
<dl>
21-
<dt>Write once and deploy to Chrome, Opera, Edge & Firefox</dt>
22-
<dd>
23-
Based on WebExtensions. It also includes a tiny polyfill to bring uniformity to the APIs exposed by different browsers.
24-
</dd>
25-
</dl>
26-
27-
<dl>
28-
<dt>Live-reload</dt>
29-
<dd>
30-
Your changes to CSS, HTML & JS files will be relayed instantly without having to manually reload the extension. This ends up saving a lot of time and improving the developer experience. Based on https://github.com/xpl/crx-hotreload
31-
</dd>
32-
</dl>
33-
34-
<dl>
35-
<dt>Newest js technology stack</dt>
36-
<dd>
37-
You can use ES6, ES5.
38-
</dd>
39-
</dl>
40-
41-
<dl>
42-
<dt>Comfortable styles import</dt>
43-
<dd>
44-
With react you can loas styles directy and you can use scss for styling.
45-
</dd>
46-
</dl>
47-
48-
<dl>
49-
<dt>Easily configurable and extendable</dt>
50-
<dd>
51-
Project use webpack so you can easly customize your project depends on your needs. In config.json you can define source path for each browser (if needed - default it's the same source), destintantion and develop directory.
52-
</dd>
53-
</dl>
54-
55-
<dl>
56-
<dt>Clean code</dt>
57-
<dd>
58-
Clean code is the best way for long term support for project. Boilerplate has fully configured eslint with airbnb styleguide.
59-
</dd>
60-
</dl>
61-
62-
<dl>
63-
<dt>Test your components!</dt>
64-
<dd>
65-
Project use some library which support your testing proces. As test runner we use karma, as testing framework mocha. As support to assertion we use chai.
66-
</dd>
67-
</dl>
5+
![preview](preview/Sep-21-2020%2015-15-55.gif)
686

69-
## Installation
70-
71-
1. Clone the repository `git clone https://github.com/WebExp0528/React-Extension-Boilderplate.git`
72-
2. Run `npm install` or `yarn install`
73-
3. Run `npm run build` or `yarn build`
74-
75-
##### Load the extension in Chrome & Opera
76-
77-
1. Open Chrome/Opera browser and navigate to chrome://extensions
78-
2. Select "Developer Mode" and then click "Load unpacked extension..."
79-
3. From the file browser, choose to `React-Extension-Boilderplate/dev/chrome` or (`React-Extension-Boilderplate/dev/opera`)
80-
81-
##### Load the extension in Firefox
82-
83-
1. Open Firefox browser and navigate to about:debugging
84-
2. Click "Load Temporary Add-on" and from the file browser, choose `React-Extension-Boilderplate/dev/firefox`
85-
86-
##### Load the extension in Edge
7+
## Features
878

88-
https://docs.microsoft.com/en-us/microsoft-edge/extensions/guides/adding-and-removing-extensions
9+
>- ___Write in your favorite framework - React! :)___
10+
>
11+
> Now you can create part of your extensions in React framework - as you wish ;)
12+
>
13+
>- ___Write once and deploy to Chrome, Opera, Edge & Firefox___
14+
>
15+
> Based on WebExtensions. It also includes a tiny polyfill to bring uniformity
16+
> to the APIs exposed by different browsers.
17+
>
18+
>- ___Live-reload___
19+
>
20+
> Your changes to CSS, HTML & JS files will be relayed instantly without having
21+
> to manually reload the extension. This ends up saving a lot of time and
22+
> improving the developer experience. Based on <https://github.com/xpl/crx-hotreload>
23+
>
24+
>- ___Newest js technology stack___
25+
>
26+
> You can use ES6, ES5.
27+
>
28+
>- ___Comfortable styles import___
29+
>
30+
> With react you can load styles directly and you can use scss for styling.
31+
>
32+
>- ___Easily configurable and extendable___
33+
>
34+
> Project use webpack so you can easily customize your project depends on your needs.
35+
> In config.json you can define source path for each browser
36+
> (if needed - default it's the same source), destination and develop directory.
37+
>
38+
>- ___Clean code___
39+
>
40+
> Clean code is the best way for long term support for project. Boilerplate has
41+
> fully configured eslint with airbnb style guide.
42+
>
43+
>- ___Test your components!___
44+
>
45+
> Project use some library which support your testing process.
46+
> As test runner we use karma, as testing framework mocha.
47+
> As support to assertion we use chai.
48+
49+
## Run & Installation
50+
51+
>### Run & Build
52+
>
53+
>> 1. Clone the repository `git clone https://github.com/WebExp0528/>React-Extension-Boilerplate.git`
54+
>> 2. Run `npm install` or `yarn install`
55+
>> 3. Run `npm run build` or `yarn build`
56+
>
57+
>### Load the extension in Chrome & Opera
58+
>
59+
>> 1. Open Chrome/Opera browser and navigate to chrome://extensions
60+
>> 2. Select "Developer Mode" and then click "Load unpacked extension..."
61+
>> 3. From the file browser, choose to `React-Extension-Boilerplate/dev/chrome`
62+
>> or > (`React-Extension-Boilerplate/dev/opera`)
63+
>
64+
>### Load the extension in Firefox
65+
>
66+
>>1. Open Firefox browser and navigate to about:debugging
67+
>>2. Click "Load Temporary Add-on" and from the file browser, choose >>`React-Extension-Boilerplate/dev/firefox`
68+
>
69+
>### Load the extension in Edge
70+
>
71+
>><https://docs.microsoft.com/en-us/microsoft-edge/extensions/guides/>adding-and-removing-extensions>
8972
9073
## Developing
9174

92-
The following tasks can be used when you want to start developing the extension and want to enable live reload -
93-
94-
- `npm run watch-dev` or `yarn watch-dev`
75+
>The following tasks can be used when you want to start developing the extension
76+
>and want to enable live reload -
77+
>`npm run watch-dev` or `yarn watch-dev`
9578
9679
## Packaging
9780

98-
Run `npm run build` or `yarn build` to create a zipped, production-ready extension for each browser. You can then upload that to the appstore.
81+
>Run `npm run build` or `yarn build` to create a zipped,
82+
production-ready extension for each browser.
83+
You can then upload that to the app store.
9984

10085
---
10186

10287
This project is licensed under the MIT license.
10388

104-
If you have any questions or comments, please create a new issue. I'd be happy to hear your thoughts.
89+
If you have any questions or comments, please create a new issue.
90+
I'd be happy to hear your thoughts.

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
2-
"name": "webpack-react-extension-boilerplate",
2+
"name": "react-extension-boilerplate",
33
"version": "0.0.2",
4-
"description": "Boilerplate for Chrome, FF, Opera exstension",
4+
"description": "Boilerplate for Chrome, FF, Opera extension",
55
"main": "webpack.config.js",
66
"scripts": {
77
"test": "karma start",

‎preview/Sep-21-2020 15-15-55.gif

13.9 MB
Loading

‎src/_locales/en/messages.json

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
{
2-
"appName": {
3-
"message": "Ext React Starter",
4-
"description": "The name of the react extension."
5-
},
6-
"appDescription": {
7-
"message": "Boilerplate for building cross browser extensions",
8-
"description": "The description of the extension."
9-
},
10-
"btnTooltip": {
11-
"message": "Ext Starter",
12-
"description": "Tooltip for the button."
13-
}
2+
"appName": {
3+
"message": "React Extension Boilerplate",
4+
"description": "The name of the react extension."
5+
},
6+
"appDescription": {
7+
"message": "Boilerplate for building cross browser extensions",
8+
"description": "The description of the extension."
9+
},
10+
"btnTooltip": {
11+
"message": "Extension Boilerplate",
12+
"description": "Tooltip for the button."
13+
}
1414
}

‎src/assets/icons/icon-128.png

100644100755
File mode changed.

‎src/assets/icons/icon-16.png

100644100755
File mode changed.

0 commit comments

Comments
 (0)