Expected Behavior

It would be very helpful to add markers to the webextension-toolbox dev ... output to mark the start and end of the output for one compilation, similar to what is done by webpack-cli with the --info-verbosity=verbose option: https://github.com/webpack/webpack-cli/blob/master/bin/cli.js#L274

This would allow for tools that analyze the output of webextension-toolbox to identify when webpack recompiles the extension, and to parse warnings and errors from the latest compilation.

Current Behavior

Errors and warnings are printed at the end of the output. An external tool cannot know when one compilation is done until the next one starts.

Steps to Reproduce (for bugs)

1. Create an extension using ts-loader and tslint-loader as described in #93 (comment)
2. Add a tslint.json to the root of the project:

{
    "extends": "tslint:recommended"
}

3. Add a .ts file with some code that tslint will flag. A statement that doesn't end with a semicolon will work.
4. Run webextension-toolbox dev chrome.

Context

I use Visual Studio Code as my IDE, and it can be configured to parse the output of a build task for warnings and errors. When parsing the output of a task that watches for changes and automatically recompiles (such as webpack --watch or webextension-toolbox dev ...), it needs to match some text at the start and end of each re-compilation to identify the latest output.

See https://github.com/eamodio/vscode-tsl-problem-matcher/blob/master/package.json#L111 for an example configuration to parse the output of webpack --watch for warnings from tslint.

For now I have been adding the following plugin to my build:

export class VSCodeOutputWebpackPlugin {
    public apply(compiler) {
        // Match output of https://github.com/webpack/webpack-cli/blob/master/bin/cli.js
        // so that $*-webpack-watch problem matchers work.
        compiler.hooks.done.tap('WebpackInfo', stats => {
            if (stats.hasErrors() || stats.hasWarnings()) {
                console.error(`\nCompilation ${compiler.name} starting…\n`);
                console.error(stats.toString('errors-warnings'));
                console.error(`\nCompilation ${compiler.name} finished\n`);
            }
        });
    }
}

This usually works, but it doubles any warnings/errors in the output. It would be nice if WebExtension Toolbox had a verbose option like "webpack --watch --info-verbosity=verbose" or marked the start/end of its output by default.

Your Environment

Expected Behavior

If you have a webextension-toolbox-config.js that uses copy-webpack-plugin to copy files into the build directory, those files should get included in the .zip package.

Current Behavior

The ZipPlugin added at webpack-config.js line 183 runs before any copy-webpack-plugin defined in webextension-toolbox-config.js, and it misses any copied files.

Steps to Reproduce (for bugs)

Install React:

npm i -S react

Set up a webpack configuration that defines React as an external library and copies it into the build directory.

// webextension-toolbox-config.js
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
    webpack: (config, { dev }) => {
        config.externals = {
            "react": "React",
        };

        const mode = dev ? 'development' : 'production.min';
        config.plugins.push(new CopyPlugin([
            {
                from: `../node_modules/react/umd/react.${mode}.js`,
                to: 'scripts/react/react.js',
                cache: true
            },
        ]));
        return config;
    }
};

Build the extension:

webextension-toolbox build chrome

react.js will be copied to /dist/chrome/scripts/react, but it won't be included in packages/*.chrome.zip.

Context

I have been able to work around this by adding the following to my webextension-toolbox-config.js to move ZipPlugin to the end of the plugins list:

module.exports = {
    webpack: (config, { dev }) => {
        ...
        for (let i = 0; i < config.plugins.length; i++) {
            if (config.plugins[i] instanceof ZipPlugin) {
                let plugins = config.plugins.splice(i, 1);
                config.plugins.push(...plugins);
                break;
            }
        }
        return config;
    }
};

I could also only make React an external library in dev builds because I'm mainly doing this to speed up builds, but that would require making changes to how my options page links scripts based on the build mode, so I'd like to avoid that.

Your Environment

Hi,

I would like to use typescript together with webextension-generator/webextension-toolbox. I have tried to import a typescript file and works fine, but I cannot provide a typescript file as an entry point.

Expected Behavior

A typescript file e.g. main.ts (found in ./app/scripts/main.ts) should be a compiled to ./dist/chrome/scripts/popup.js

It would be nice to support typescript files as entry points.

Current Behavior

A typescript file from app/scripts/main.ts cannot be used as an entry point because won't get compiled to a .js file.

Steps to Reproduce (for bugs)

1. add main.ts to scripts folder
2. npm run dev chrome
3. expect dist/chrome/scripts/main.js

Context

Your Environment

This is the epic, double facepalm moment.
The npm test command will npm install webextension-toolbox from the public repo.

Hey, thanks for this tool; exactly what I need!

The compiler doesn't seem to be including the webextension polyfill. I'm getting browser is not defined errors in the console.

Great toolbox. Thanks for the hardwork.
Would it be possible to add your own loaders to the webpack config?
Need to add scss-loader and or ts-loader.

Thanks again.

Currently, the webpack copy plugin has a pre-defined set of file extensions to ignore. Exposing this would be super helpful to let people blacklist file types from being copied over that they do not want 👍
Or an alternative is an option to toggle/disable copying all other files in your app directory to the build directory 😄

More info: webextension-toolbox/generator-web-extension#9

webextension-toolbox/generator-web-extension#6

Hi

I would like for dev and prod to have different urls for my REST api consumption.
How can i achieve this using a config file?

Thanks
Ilan

Is there anyway to do it?
I want add

"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"

to eval source maps in chrome dev console.

But I want to remove this line in production build.

The shorthand argument for --vendorVersion, -vv, does not work because commander.js does not support two character shorthand.
This should be easily fixed by changing it to one character 🙂

Workaround: use the full argument --vendorVersion

Discovered while working on #57, #107

Maybe even create an organization for all of the webextension-toolbox related repo?

Hi
I am aware that your documentation states that if extension signing is a requirement then you recommend using web-ext.

Can you please provide best solution to sign the FF extension while still using your toolbox?

Expected Behavior

I would like to be able to configure babel-loader. Today the boilerplate this project offers is tightly coupled to react (includes react specific config for babel-loader). It would be nice to have an easier way to configure this (maybe do babel config in package.json?).

Current Behavior

No easy way to configure babel. webextension-toolbox is tightly coupled to react

Context

I would like to use other libraries with JSX like preact, therefore I need to be able to change babel-loader config.

Your Environment

Not relevant

Expected Behavior

webextension-toolbox and webext-redux should work together in Firefox.

Current Behavior

Content script hangs in Firefox. No useful message or stack trace in the console.

Steps to Reproduce (for bugs)

1. Checkout example repository at: https://github.com/ChrisLMerrill/CrossBrowserWebextensionReactReduxExample
2. npm install
3. build for Firefox with "webextension-toolbox build firefox"
4. Install extension from dist/firefox folder
5. Look in the console for a page. You should see "Content script is running", but in Firefox this message does not appear because the content script is hung by the combination of webextension-toolbox and webext-redux. In Chrome and Edge, the message appears and the content script operates as expected.

Context

My trivial example built with webextension-toolbox ran fine before adding webext-redux. Cannot use webextension-toolbox and webext-redux together. This makes me sad :(

The author of webext-redux has been unable to reproduce the problem when webextension-toolbox is not part of the equation.
tshaddix/webext-redux#193

So this appears to be a conflict between the two, rather than a bug isolated to either one. My JS skills are a bit limited and I've exceeded my ability to to debug this. I'm hoping you can collaborate with tshaddix to find the conflict.

Your Environment

thankyou for cool tool!

but firefox extension can't build.
firefox says There was an error during installation: Extension is invalid

it's error logs

[./app/scripts/background.js] ./app/scripts/background.js 231 bytes {4} [built]
[./app/scripts/contentscript.js] ./app/scripts/contentscript.js 43 bytes {3} [built]
[./app/scripts/devtools.js] ./app/scripts/devtools.js 47 bytes {2} [built]
[./app/scripts/options.js] ./app/scripts/options.js 36 bytes {1} [built]
[./app/scripts/popup.js] ./app/scripts/popup.js 34 bytes {0} [built]
Running web extension from /Users/m0a/repo/github.com/m0a-mystudy/my-web-extension/dist/firefox
Use --verbose or open Tools > Web Developer > Browser Console to see logging
(node:57807) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): WebExtError: installTemporaryAddon: Error: unknownError: Could not install add-on at '/Users/m0a/repo/github.com/m0a-mystudy/my-web-extension/dist/firefox': Error: Extension is invalid
(node:57807) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

code is here.

Context

I'm new to front-end / web extension development. I would like to develop my WebExtension locally. I'm unsure how local development is done with this package. build is working fine with Load Temporary Add-on... in FireFox, but is constantly refreshing the add-on the development process for extension developers? I was hoping there would be a live-reload, and I could just open my browser to see live changes. I'm not sure what the use of dev is for.

I tried to connect to localhost:35729 within my browser, but I'm only getting the message: Upgrade Required. I believe this websocket is only for listening to code changes. 😅

Any insight on the development process using this tool would be much appreciated. Thanks!

Checking the logs for Windows on Azure DevOps, you can quickly notice that only npm install is performed but there are no output for npm test.
This should be fixed, every test should be performed on Windows as well.

Would be a nice added CLI option to be able to manually specify the path to your webextension-toolbox.config.js. Since that's a bit of a mouthful it would be handy if I could rename it to something like webext.config.js or similar and be able to pass something like --config or -c to specify a config path 😄

Vendor prefixed manifest keys only gets replaced on the first level of the manifest.json file.
E.g:

{
  "manifest_version": 2,
  "browser_action": {
    "__firefox__theme_icons": [
      {
        "light": "icons/icon16-light.png",
        "dark": "icons/icon16.png",
        "size": 16
      },
      {
        "light": "icons/icon32-light.png",
        "dark": "icons/icon32.png",
        "size": 32
      }
    ]
  },

This gets copied as-is.

A nice quality of life improvement

I can see that currently there is native support for React which is great! 👌
Is there any plans to add native VueJS support in the future? I know it can be done already by using a custom webextension-toolbox-config.js file, but having native support in the future would be nice 😄

Executing npm run dev chrome won't trigger the copy of autoReload.js at the root directory of the extension

WebExtension Toolbox needs better tests than my clumsy smoke tests
I think we can test the command line output using Jest (hint for me: https://repl.it/@SimenB/SphericalFirsthandOpengroup )

Hi
I would like to inject global js variables into the extension.

So i edit webextension-toolbox-config.js like so:

module.exports = {
webpack: (config, { dev, vendor }) => {
config.plugins.push( new webpack.DefinePlugin({ GLOBAL_VAR: "value" }) );
return config;
}
}

However, GLOBAL_VAR is not defined in background context nor in popup

How can we achieve this using the toolbox?

Would it be hard or at all possible to add the support for Typescript?

Expected Behavior

On file change, the browser should reload the extension and the current page

Current Behavior

On file change, the browser window is reloaded, but you have to manually reload your extension

Waiting for mozilla/webextension-polyfill#86 to get merged.

Expected Behavior

when calling this package like this: webextension-toolbox dev chrome --vendorVersion=71 I expect the vendorVersion to be passed further to src/compile script. I think or it seems that it doesn't

I did a bit of research and wrote a bit more here

Passing vendorVersion has an influence on the babel-loader more specifically on babel/preset-env and how the code gets transpiled. This is a core feature and doesn't work correctly in my opinion.

fregante/Awesome-WebExtensions#30

Especially build and dev.

mozilla/webextension-polyfill#153

AppVeyor is too slow

built the example bookmarkit extension for chrome and manually loaded to chrome. It shows an error message:

WebSocket connection to 'ws://127.0.0.1:35729/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED

Expected Behavior

no error message

no

Current Behavior

Steps to Reproduce (for bugs)

Context

Your Environment

Expected Behavior

Autoreload should work in MS-Edge.

Current Behavior

In MS-Edge websocket connections to localhost are blocked by design.

• https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8984919/
• https://docs.microsoft.com/en-us/microsoft-edge/extensions/guides/native-messaging

Steps to Reproduce (for bugs)

1. Run webextension-toolbox dev edge
2. Open background console

Your Environment

Related Issues

• #4

I suggest leaving the manifest validation and packing to pre-existing tools offered by Mozilla (web-ext does both)

Also I'd rather see https://github.com/mozilla/webextension-polyfill added to manifest.json directly instead, e.g. ec960f0 — but perhaps it isn't a big deal, really, since it can't be automatically added to options.html this way.

Expected Behavior

If a webextension-toolbox.js file is present in the root directory of my project, with the code snippet provided by the readme, the webextention should build with all configurations for webpack made by the toolbox itself in addition to the rules, plugins, ect. pushed into their respective arrays by the code inside the snippets webpack() function

// This file is not going through babel transformation.
// So, we write it in vanilla JS
// (But you could use ES2015 features supported by your Node.js version)
module.exports = {
  webpack: (config, { dev, vendor }) => {
    // Perform customizations to webpack config

    // Important: return the modified config
    return config
  }
}

Current Behavior

The build processes starts and ends prematurely on success, throwing no errors, but not starting webpack; generating no files.

PS C:\Users\li6hu3\WebstormProjects\Shopping_Cart_Analyzer> yarn run build firefox
yarn run v1.7.0
$ webextension-toolbox build firefox
Done in 1.01s.
PS C:\Users\li6hu3\WebstormProjects\Shopping_Cart_Analyzer> yarn run dev firefox
yarn run v1.7.0
$ webextension-toolbox dev firefox
Done in 1.00s.
PS C:\Users\li6hu3\WebstormProjects\Shopping_Cart_Analyzer>

Steps to Reproduce (for bugs)

1. Generate new scaffold with yo web-extension
2. add webextension-toolbox.js file to root of project (beside files like package.json)
3. insert code snippet for the file provided by the README
4. (optional) push a e.g. webpack rule into config.module.rules (either way, the config should be passed in and out of the function)
5. build extension in dev or prod e.g. yarn run build chrome

Context

I need to add bootstrap to my extension which means I need to add a style and css loader and additionally wanted to define jQuery as a plugin via webpack.ProvidePlugin for convenience (although not necessary as bootstrap will require popperjs and query on its own)

Your Environment

Expected Behavior

Maybe it's time for a new release?

Current Behavior

Current release doesn't allow for configurable webpack config, but that has been fixed in the meantime #31 and #37

Steps to Reproduce (for bugs)

Context

I want to use the latest version to be able to config webpack further

Your Environment

OS: windows 10
webextension-toolbox: 1.0.5
node: 8.9.4

Problem

Some webstores doesn't like it, when extension code is minified.
This makes their review more complex.

Possible solutions

A. Disable minification
C. Enable minification (everything stays the same)
B. Add an cli flag to leave it up to the user (default will be disabled)
D. Add an cli flag to leave it up to the user (default will be enabled)

Related docs

https://webpack.js.org/configuration/optimization/

Open questions

Does tree shaking and dead code elimination still work if minification is disabled? If not can we enable it somehow?

What do you think?

Hi everyone,

As Babel 7 stable is out, I think it is time to release a new version of WebExtension Toolbox.
@HaNdTriX was kind enough to provide me an npm publish access but I never ever released anything before. He recommended me to use sindresorhus/np for the release, but I'm still figuring out whether should I bump the minor or the major version (to 2.0.0).

Could you please help me out in this matter?

I am also opening this ticket to push me to make this happen and not to procrastinate anymore on it.

Hi
How can i change the zip file name that is created after running "npm run build chrome"?
Is it possible by adding a config to webextension-toolbox-config.js?
Thanks

Expected Behavior

manifest.json passes validation.

Current Behavior

I get this error with no other context:

You need to provide a valid 'manifest.json'

Steps to Reproduce (for bugs)

1. npm install --save-dev webextension-toolbox
2. npx webextension-toolbox build firefox

Context

I'm trying to build https://github.com/carlin-q-scott/browser-media-players/tree/webextension-toolbox but my manifest.json is failing validation.

Your Environment

Expected Behavior

When i want to extend usage of Webpack by creating webextension-toolbox.js, it should just work.

Current Behavior

I add webextension-toolbox.js, paste code from readme, and add jquery plugin, i got Windows Srcript Host errors all the time. simetimes 1:1, by default it gives error to dev, vendor, it expects :

Steps to Reproduce (for bugs)

1. generate extension via generator
2. create webextension-toolbox.js
3. yarn add jquery
4. add code:

module.exports = {
  webpack: (config, { dev, vendor }) => {
    // Perform customizations to webpack config
	config.plugins.push(
	  new webpack.ProvidePlugin({
		  $: 'jquery',
		  jQuery: 'jquery'
	  })
	)
    // Important: return the modified config
    return config
  }
}

Tried different ways for module export, no luck.

Context

Parts of my extension containes jquery, that's why i need it.

Your Environment

Hello,

I'm trying to write a component in JSX but I receive an error:

ERROR in ./app/components/PopupApp.jsx
Module parse failed: Unexpected token (3:24)
You may need an appropriate loader to handle this file type.
| import React from 'react'
| 
| export default props => <h1></h1>

Do you know why it does not support JSX despite the presence of the babel preset "react" in the webpack configuration ?

Expected Behavior

I should be able to do unit testing from the start.
I just added this feature manually on my project that uses webextension-toolbox

Current Behavior

I am unable to do any unit testing on the project.

Context

I tend to do TDD on my extensions because even if they are small, bugs tend to pop up.

Thanks so much for the webextension toolbox.

I feel really dumb since I can not for the life of me to get sourcemaps to load in Firefox. The .map files are present but in Firefox they fail to load.

I have managed to get them working in chrome by adding the extension directory as a workspace.

I generated a extension with generator-web-extension and have tried loading it via about:debugging in firefox and web-ext.

I receive the following error.

Source map error: TypeError: NetworkError when attempting to fetch resource.
Resource URL: moz-extension://1cbd74c0-6413-472e-a5f8-10fcf1debb5f/scripts/background.js
Source Map URL: background.js.map[Learn More] (unknown)

I am expecting source maps to load and to be able to set a breakout point in background.js.

During the manual testing of #81, building the bookmark-it extension failed because Babel 7-RC4 removed polyfill option from transform-runtime (see babel/babel#8547 for more info on that).

First of all, I would like to fix this issue, it seems that simply removing this configuration option from our side is enough.
Secondly, I will open a separate Issue, so next time npm test will try to build the bookmark-it example extension, so Travis and AppVeyor has greater chance to catch these kind of issues.

As I mentioned on #85, I would like to add extra commands to the test script to build the example extension.
This will make it easier to catch similar breaking changes.

This is important because of this issue:
webextension-toolbox/generator-web-extension#20

Instead of depending on a workaround that requires user interaction (see #22 for more info), we should bake a workaround into the the tool itself.
As accessing the remote DNS server requires an active internet connection, checking it is a good idea (maybe using is-online npm package)