Example showing how to use ES6/7 code transpilation

[kumar303]

Many developers who are new to WebExtensions will be used to the modern conveniences of building JavaScript web applications in EcmaScript 6, 7, and higher. I would like to see an example that shows how to construct a WebExtension using these JavaScript features. Here are some nice things to demonstrate in an example:

• Using ES6/7 code not already supported by Firefox, such as:
  • import statements
  • async / await
  • object rest / spread
  • ... and really anything else supported by transpilation
• Building / running an extension with code transpilation with either:
  • babel or
  • rollup

This example would serve as a guide for developers who would like to write a WebExtension in newer JavaScript syntax.

Building this example may also reveal shortcomings in the platform or tools (like web-ext). Please file bugs!

[kumar303]

There could be some useful tools / examples to check out here: https://github.com/vitalets/awesome-browser-extensions-and-apps

[kumar303]

Here is an example of how to set up webpack: https://github.com/mdn/webextensions-examples/tree/master/webpack-modules

[BigBlueHat]

A great (small?) start would be an eslint config file for this repo that matches what's supported of ES6/7 now in Firefox (at least). It would add some "enforcement" on code quality too...which is probably not a bad thing. 😉

👍 for this!
🎩

[kumar303]

@BigBlueHat good idea! That would be an easier example to create so I filed separately for it: #117

[kumar303]

Aha, I created this example but forgot I had filed a bug about it! #155

[wesinator]

how do I import functions from one js script in my extension to another ?

Tried import but that doesn't seem to work, and even breaks the background menu from displaying.

This seems like a common enough construction that it should be documented.

[chrisdavidmills]

@rebloor I know this one is closed, but fancy investigating @wesinator 's request?

[kumar303]

All ES6/import examples have been removed and I explained why this was unhelpful in #398 (comment) . I hope that someone can reconsider that decision.

[rebloor]

@chrisdavidmills I will add it to my backlog, and give it some consideration when I get the non urgent stuff.

[wesinator]

@rebloor I know this one is closed, but fancy investigating @wesinator 's request?

it sounds like I may be looking for tabs.executeScript

This example executes a script from a file, packaged with the extension, called "content-script.js". The script is executed in the currently active tab. The script is executed in subframes as well as the main document:

(Trying to call function x() from script1.js in script2.js, both scripts in the extension)

[wesinator]

@rebloor I know this one is closed, but fancy investigating @wesinator 's request?

it sounds like I may be looking for tabs.executeScript

This example executes a script from a file, packaged with the extension, called "content-script.js". The script is executed in the currently active tab. The script is executed in subframes as well as the main document:

(Trying to call function x() from script1.js in script2.js, both scripts in the extension)

https://stackoverflow.com/questions/59971909/how-to-call-load-function-from-separate-script-file-within-mozilla-webextension/60244276#60244276 is the answer I was looking for

[rebloor]

@wesinator thanks for the update, I've created 2827 to investigate how we might improve the documentation.