Ref: https://developer.chrome.com/extensions/getstarted
Make sure you have yarn
installed first.
yarn install
.- Open the Extension Management page by navigating to
chrome://extensions
.- The Extension Management page can also be opened by clicking on the Chrome menu, hovering over
More Tools
then selectingExtensions
.
- The Extension Management page can also be opened by clicking on the Chrome menu, hovering over
- Enable Developer Mode by clicking the toggle switch next to Developer mode.
- Click the
LOAD UNPACKED
button and select thebuild subfolder
in extension directory.
CurrentPage/TotalPage for Inbox:
This is a learning note to record the procedure. The code is already applied.
- Use create-react-app to create a React app.
- Use
yarn run eject
to generate editable webpack config files. - Move
public/contentScript.js
tosrc/content.js
and modifymanifest.json
as"js": ["/static/js/content.js"]
- Make the following changes in
webpack.config.prod.js
, no built index.js in build folder, building content.js// entry: [paths.appIndexJs], entry: { // main: [paths.appIndexJs], // unused by content script, dummy content: ['./src/content.js'], }, filename: 'static/js/[name].js', runtimeChunk: false, // splitChunks: { // chunks: 'all', // name: false, // }
- (optional) prevent ESlint from stoping build for convenient debugging, in
webpack.config.prod
eslintPath: require.resolve('eslint'), emitWarning: true, // add this line
- (optional) remove unused built service-worker.js, in
webpack.config.prod
// const WorkboxWebpackPlugin = require('workbox-webpack-plugin'); // new WorkboxWebpackPlugin.GenerateSW({ // clientsClaim: true, // exclude: [/\.map$/, /asset-manifest\.json$/], // importWorkboxFrom: 'cdn', // navigateFallback: `${publicUrl}/index.html`, // navigateFallbackBlacklist: [ // // Exclude URLs starting with /_, as they're likely an API call // new RegExp('^/_'), // // Exclude URLs containing a dot, as they're likely a resource in // // public/ and not a SPA route // new RegExp('/[^/]+\\.[^/]+$'), // ], // }),
- (optional) remove unused built html file, ref: https://github.com/jantimon/html-webpack-plugin#generating-multiple-html-files, in
webpack.config.prod
// new HtmlWebpackPlugin({ // inject: true, // template: paths.appHtml, // minify: { // removeComments: true, // collapseWhitespace: true, // removeRedundantAttributes: true, // useShortDoctype: true, // removeEmptyAttributes: true, // removeStyleLinkTypeAttributes: true, // keepClosingSlash: true, // minifyJS: true, // minifyCSS: true, // minifyURLs: true, // }, // }),
- (optinal) Although index.html and index.js are not built but they are required to pass the check of building process. To remove this restriction, set
/config/path.js
asappHtml: resolveApp(''), appIndexJs: resolveApp(''),
Then just yarn build
and Chrome extension manager can load the build folder
If you want to use compiled css (e.g. import './content.css';
in content.js
) , you need to set "css": ["/static/css/content.css"]
in Chrome manifest.json
. Also, you need to do the following change in webpack.config.prod.js
,
```
new MiniCssExtractPlugin({
filename: 'static/css/[name].css', // 'static/css/[name].[contenthash:8].css'
```
The slider part of the icon is made by Freepik from Flaticon is licensed by Creative Commons BY 3.0
The email part of the icon is from https://iconmonstr.com/?s2member_file_download_key=f8dba490cb0d42b3e07309f0fcc38735&s2member_file_download=2012/svg/iconmonstr-email-2.svg