You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
15
+
16
16
17
-
:desktop_computer: A Web Extension starter kit built with React, TypeScript, SCSS, Storybook, EsLint, Prettier, Jest, Bootstrap,x& Webpack. Compatible with Google Chrome, Mozilla Firefox, and Brave.
17
+
:desktop_computer: A Web Extension starter kit built with React, TypeScript, Storybook, EsLint, Prettier, Jest, TailwindCSS,& Webpack. Compatible with Google Chrome, Mozilla Firefox, Brave, and Microsoft Edge.
In [Google Chrome](https://www.google.com/chrome/), open up [chrome://extensions](chrome://extensions) in a new tab. Make sure the `Developer Mode` checkbox in the upper-right corner is turned on. Click `Load unpacked` and select the `dist` directory in this repository - your extension should now be loaded.
43
43
44
-
![Installed Extension in Google Chrome](https://i.imgur.com/ORuHbDR.png"Installed Extension in Google Chrome")
44
+
![Installed Extension in Google Chrome](https://i.imgur.com/Y2dQFte.png"Installed Extension in Google Chrome")
45
45
46
46
</details>
47
47
@@ -50,37 +50,46 @@ In [Google Chrome](https://www.google.com/chrome/), open up [chrome://extensions
50
50
51
51
In [Brave](https://brave.com/), open up [brave://extensions](brave://extensions) in a new tab. Make sure the `Developer Mode` checkbox in the upper-right corner is turned on. Click `Load unpacked` and select the `dist` directory in this repository - your extension should now be loaded.
52
52
53
-
![Installed Extension in Brave](https://i.imgur.com/z8lW02m.png"Installed Extension in Brave")
53
+
![Installed Extension in Brave](https://i.imgur.com/rKsbtcO.png"Installed Extension in Brave")
54
54
55
55
</details>
56
56
57
57
<details>
58
58
<summary>Loading the extension in Mozilla Firefox</summary>
59
59
60
-
In [Mozilla Firefox](https://www.mozilla.org/en-US/firefox/new/), open up the [about:debugging](about:debugging) page in a new tab. Click the `Load Temporary Add-on...` button and select the `manfiest.json` from the `dist` directory in this repository - your extension should now be loaded.
60
+
In [Mozilla Firefox](https://www.mozilla.org/en-US/firefox/new/), open up the [about:debugging](about:debugging) page in a new tab. Click the `This Firefox` link in the sidebar. One the `This Firefox` page, click the `Load Temporary Add-on...` button and select the `manfiest.json` from the `dist` directory in this repository - your extension should now be loaded.
61
61
62
-
![Installed Extension in Mozilla Firefox](https://i.imgur.com/gO2Lrb5.png"Installed Extension in Mozilla Firefox")
62
+
![Installed Extension in Mozilla Firefox](https://i.imgur.com/FKfTw4B.png"Installed Extension in Mozilla Firefox")
63
+
64
+
</details>
65
+
66
+
<details>
67
+
<summary>Loading the extension in Microsoft Edge</summary>
68
+
69
+
In [Microsoft Edge](https://www.microsoft.com/en-us/edge), open up [edge://extensions](edge://extensions) in a new tab. Make sure the `Developer Mode` checkbox in the lower-left corner is turned on. Click `Load unpacked` and select the `dist` directory in this repository - your extension should now be loaded.
70
+
71
+
![Installed Extension in Microsoft Edge](https://i.imgur.com/ykesx0g.png"Installed Extension in Microsoft Edge")
63
72
64
73
</details>
65
74
66
75
**Notes**
67
76
77
+
- This project is a [repository template](https://github.blog/2019-06-06-generate-new-repositories-with-repository-templates/) - click the `Use this template` button to use this starter codebase for your next project.
78
+
68
79
- Includes ESLint configured to work with TypeScript and Prettier.
69
80
70
81
- Includes tests with Jest - note that the `babel.config.js` and associated dependencies are only necessary for Jest to work with TypeScript.
71
82
72
83
- Recommended to use `Visual Studio Code` with the `Format on Save` setting turned on.
73
84
74
-
- Example icons courtesy of [FontAwesome](https://fontawesome.com).
85
+
- Example icons courtesy of [Heroicons](https://heroicons.com/).
75
86
76
-
-[Microsoft Edge]() is not currently supported.
87
+
-[Microsoft Edge](https://www.microsoft.com/en-us/edge) is not currently supported.
77
88
78
89
- Includes Storybook configured to work with React + TypeScript. Note that it maintains its own `webpack.config.js` and `tsconfig.json` files. See example story in `src/components/hello/__tests__/hello.stories.tsx`
79
90
80
91
- Includes a custom mock for the [webextension-polyfill-ts](https://github.com/Lusito/webextension-polyfill-ts) package in `src/__mocks__`. This allows you to mock any browser APIs used by your extension so you can develop your components inside Storybook.
0 commit comments