Thanks for the https://www.youtube.com/watch?v=Ipa58NVGs_c chrome extension tutorial! I found it very helpful.

I would be very interested in learning how to authenticate from this extension. For example, suppose I have a Rails 6 web app that is using Devise for authentication. From the Chrome extension, how do I know if the user is logged in or not?

I have researched and found the following, but it is still not clear to me, and most of the info is out-of-date:

https://stackoverflow.com/questions/13681098/chrome-extension-devise-rails-app-making-authenticated-requests-from-exten
https://stackoverflow.com/questions/58621200/user-authentication-in-chrome-extension-for-rails-app-with-devise
https://stackoverflow.com/questions/30171310/web-app-and-chrome-extension-separate-authentication

Moreover, https://developer.chrome.com/docs/apps/app_identity/ has a warning that Chrome Apps will be deprecated, so I'm not sure if this document still applies to Chrome Extensions even after Google removes support for Chrome Apps.

Can't say enought thank yous!

Curious if you would entertain a gitter chat room for this project?

It does not work with the latest version of electron. ipc is changed into two parts.

1. Main process - ipc.Main
2. Renderer process - ipc.Renderer

For some reason once I add your get user media code I no longer get the info client info appearing in the textarea. Any idea what might be causing this?

simple-peer won't connect when clients are not in the same network

It works perfectly if both clients are in the same network (connected to the same modem/WiFi)
but even after setting iceServers, the connection is not working

link to the sample html file:
https://github.com/omidshakeri/simple-peer-videocall

this a simplified version, without any Server
so you should copy textbox values to other device

URL for initaiator:
https://omidtest.ir/VC/VideoCall.html#init

URL for other peer:
https://omidtest.ir/VC/VideoCall.html

Steps:

1. after a few seconds, "MyID" in initaiator peer page will be filled
2. copy that to "ClinetID" textbox in other peer device and press "Connect"
3. after a few seconds, "MyID" in other peer page will be filled
4. copy that to "ClinetID" textbox in initaiator peer device and press "Connect"

TURN Server urls are from free plan of "metered.ca"

I have installed that module
$ npm install --save react-toolbox
and after including in component i am getting this error

ERROR in ./~/react-toolbox/lib/date_picker/theme.css
Module parse failed: /Users/hasnain/projects/mcp_frontend/node_modules/react-toolbox/lib/date_picker/theme.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)
    at Parser.pp$4.raise (/Users/hasnain/projects/mcp_frontend/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/Users/hasnain/projects/mcp_frontend/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp$3.parseExprAtom (/Users/hasnain/projects/mcp_frontend/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12)
    at Parser.pp$3.parseExprSubscripts (/Users/hasnain/projects/mcp_frontend/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/Users/hasnain/projects/mcp_frontend/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/Users/hasnain/projects/mcp_frontend/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/Users/hasnain/projects/mcp_frontend/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/Users/hasnain/projects/mcp_frontend/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)

i don't know how i can solve my webpack looks like this

'use strict';

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  devtool: 'inline-source-map',
  entry: [
    'webpack-hot-middleware/client?reload=true',
    path.join(__dirname, 'src/App.js')
  ],
  output: {
    path: path.join(__dirname, '/dist/'),
    filename: '[name].js',
    publicPath: '/'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html',
      inject: 'body',
      filename: 'index.html'
    }),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development')
    })
  ],
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        "presets": ["react", "es2015", "stage-0", "react-hmre"]
      }
    }, {
      test: /\.json?$/,
      loader: 'json'
    },

      {
        test: /\.scss$/,
        loader: 'style!css!resolve-url!sass?sourceMap'
      },
      {
        test: /\.(ico|jpg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
        exclude: /\/favicon.ico$/,
        loader: 'file',
        query: {
          name: '[path][name].[hash:8].[ext]'
        }
      }
    ]
  },
  resolve: {
    root: path.resolve(__dirname),
    alias: {
      static: 'static'
    }
  },
  node: {
    console: true,
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  }
};

Hi again,
I am getting an error at bundle.js. and i attached an error file to get clear view please check and let me know the solution and i also want to know that how to publish the bundle.js file with index.html pointing to it?
Doc1.docx

Thank you very much
Naresh

Hey ! Just to let you know that your way of doing things with electron is already outdated !
There are imperative arguments to : electron-packager such as --platform=, --arch= and --version=.

That means, your source code doesn't compile anymore !

@TheophileDano

blablabla

Hey @maxogden! Do you want to guest on a screencast about creating Electron apps and talk about screencat? Let me know. Thanks!

Hi Kyle

I was tried to use guidelines you provided in http://dontkry.com/posts/code/using-npm-on-the-client-side.html article on a Laravel website.
I am trying to use node_modules inside my web site, and by chance I did thought to ask you maybe you'll clarify me a bit:
I did created index.js with:

var strip_js = require('./public/stripjs.js');
var parsed = strip_js('<h1 onclick="whatever();">Start</h1><script src="http://laravel-petro.dev/bundle.js"></script><h1>End</h1>');
console.log(parsed);

I did also

browserify index.js > public/bundle.js    

and in my view

<script src="{{ asset('bundle.js') }}"></script>

In the web page I see first log inside the index.js correctly stripped js tags

<h1>Start</h1><h1>End</h1>

but second log from inside a script loaded inside the same above view which is saying:

$(document).ready(function () {
    console.log(strip_js);

the output is:

index.js:15 Uncaught ReferenceError: strip_js is not defined
    at HTMLDocument.<anonymous> (index.js:15)
    at i (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at Function.ready (jquery.min.js:2)
    at HTMLDocument.J (jquery.min.js:2)

Any ideea what I do wrong ? Or strip_js should not be visible in my own js ? The order is bundle.js called first and only after my.js file

With kind regard
Petronel

Hi,
I tried to connect from another device (Local), but when I clicked connect,
nothing will come in the yourId textarea
Thanks for help!

I really like to get more materials on nested loops... I just want sound foundations on these basic javascript basics...

thank you

+   video.srcObject = stream;
-   video.src = window.URL.createObjectURL(stream)

source: https://www.fxsitecompat.dev/en-CA/docs/2017/url-createobjecturl-stream-has-been-deprecated/

I deployed this app on heroku and tested by connecting two different PCs with peer. But both the colored boxes show the same stream of the owner PC. I cannot get the stream of the other PC.

• JavaScript
  • Async/Await
  • Loops
  • Functions (including call/apply)
  • Arrays
  • Promises
  • Callbacks
  • Timing
  • Native AJAX calls (and other libraries that make it simpler)
  • Closures
  • Modules
  • CommonJS Design Patterns
  • Reactive Functional Programming
• WebGL & Related Stuff
  • Multidimensional Arrays (ndarray)
  • ReGL: https://github.com/regl-project/regl
• Debugging client/server JS with Chrome Dev Tools
• Electron
  • Creating a simple multi window app
  • Distributing / Packaging Apps
  • Testing Electron Apps
  • Multi-platform installers
  • Auto updating app
  • Dialog API
• Atom Editor Packages
• WebGL
  • Intro to WebGL and Shaders
  • Getting started with stack.gl
• Node / io.js
  • Streams
  • Running a Node.js Server
  • Using net to send messages
  • Deploying a Node.js app
  • Duplex streams (more advanced streams)
• Ember.js
  • Ember Router
  • Ember Models / Data
  • Ember Testing
  • Closure Actions
• JS Framework / Framework-like Libraries
  • Ember.js Fundamentals
  • Riot.js
  • Intro to React (Flux, Relay)
  • Web Components
  • Vue.js
• AR Drone
• Modules
  • virtual-dom
  • tape
  • ndarray
  • webpack
  • peerjs
• More advanced P2P app using WebRTC
• Web Sockets (maybe socket.io)
• More in depth unit testing with app that interacts with the DOM

whats the alternative for "package" in the "scripts" tag inside package.json ?

Thank you for your video!
I do application on nodejs what request some data on external server and relay them to some external client via TCP.
Do you have an idea how to make promise from the code like:

const Market = require('some-api');
myMarket = new Market();
myMarket.websockets.trades(request[1], (trades, error) => {
  if (error) {
    send to external client(error);
  }
  if(this.streamStatuse === 1) {
    send to external client(JSON.stringify(['TR', this.getTimeString(), trades]));
  }
});

I have seen your video about webpack on Youtube.Thank you very much.
But I meet a problem during code your example in the video.

In the webpack.config.js,I typed this below,

module.exports = {
    entry:'./index.js',
    output:{
        path:__dirname,
        filename:'bundle.js'
    },
    module:{
        loaders:[{
                test:'/\.css$/',loader:'style!css!'
        }]
    }
}

in the bear.js

var bearcss = require('./bear.css');
....

but when I run npm start, an Error happend

ERROR in ./bear.css
Module parse failed: /Users/mrbackkom/getting-start-webpack/bear.css Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
| @import 'base.css';
|
| div{
 @ ./bear.js 11:14-35

I do not find the reason.

I included requireJS and virutalDOM js on the page but it throws a bunch of errors.
What should be the config for requireJS here ?

It seems like for every project I make it has to download so much stuff.

Also fyi, when I do "npm i browserfy" it gives a warning about fsevents. I think because fsevents is only for mac systems and I am using linux for development.

And thanks for your awesome tutorials !!