New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

chrome-extension-starter

Package Overview
Dependencies
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

chrome-extension-starter - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

.prettierrc

33

package.json
{
"name": "chrome-extension-starter",
"version": "0.1.1",
"version": "0.2.0",
"description": "A chrome extension starter",
"scripts": {
"build": "webpack -p",
"lint": "eslint *.js",
"test": "exit 0",
"watch": "webpack --watch"
"build": "webpack --mode=production",
"watch": "webpack --mode=development --watch"
},

@@ -14,19 +12,16 @@ "author": "Riley Tomasek",

"devDependencies": {
"eslint": "^3.14.1",
"eslint-config-airbnb": "^14.0.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^3.0.2",
"eslint-plugin-react": "^6.9.0",
"webpack-livereload-plugin": "^0.10.0"
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"copy-webpack-plugin": "^4.5.1",
"uglifyjs-webpack-plugin": "^1.2.5",
"webpack": "^4.0.0",
"webpack-cli": "^2.1.2",
"webpack-livereload-plugin": "^2.1.1"
},
"dependencies": {
"babel-core": "^6.22.1",
"babel-loader": "^6.2.10",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.22.0",
"babel-preset-stage-0": "^6.22.0",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"webpack": "^2.2.1"
"react": "^16.3.2",
"react-dom": "^16.3.2"
}
}

@@ -8,3 +8,4 @@ # Chrome Extension Starter

- Context script examples are included in background.js
- Webpack builds the .js files using babel
- React for UI needs.
- Webpack transpiles, bundles and optimizes the JavaScript files.
- You can install packages with yarn/npm and import them in any of the js

@@ -19,12 +20,24 @@ files.

2. `yarn` or `npm install`
2. `yarn`
3. `yarn run watch` or `npm run watch`
3. `yarn run watch`
4. Load `distribution` folder as an unpacked extension in Chrome. This may
require [developer mode](https://developer.chrome.com/extensions/faq).
## Build for release
Run `yarn build` and upload the `distribution` folder to the chrome store.
## Missing / incomplete
- Styles. I have mainly been using css in js libs like axs, rebass, etc
lately, which works perfectly with the existing setup.
- Optimized build. Ideally more optimizations could be done when building
for distribution.
- An automatic way to upload to chrome store.
- Remove livereload for production build
## Acknowledgements
Thanks to the following open source projects for their work:
- [Refined GitHub](https://github.com/sindresorhus/refined-github)
- [Refined Twitter](https://github.com/sindresorhus/refined-twitter)
- [Yeoman Chrome extension
generator](https://github.com/yeoman/generator-chrome-extension)
const path = require('path');
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const LiveReloadPlugin = require('webpack-livereload-plugin');
module.exports = {
module.exports = () => ({
devtool: 'sourcemap',
entry: {
background: './app/src/background.js',
contentscript: './app/src/contentscript.js',
options: './app/src/options.js',
popup: './app/src/popup.js',
background: './source/background',
chromereload: './source/chromereload',
contentscript: './source/contentscript',
options: './source/options',
popup: './source/popup',
},
output: {
path: path.join(__dirname, 'app/lib'),
path: path.join(__dirname, 'distribution'),
filename: '[name].js',
},
module: {
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
],
},
plugins: [new webpack.DefinePlugin({
'process.env': { NODE_ENV: JSON.stringify(process.env.NODE_ENV) },
}), new LiveReloadPlugin({ port: 35729 })],
};
plugins: [
new CopyWebpackPlugin([
{
from: '**',
context: 'source',
ignore: '*.js',
},
]),
new LiveReloadPlugin({ port: 35729 }),
],
optimization: {
minimizer: [new UglifyJsPlugin()],
},
});

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc