1

I recently started exploring Browserify for bundling Node modules and using them in the browser. It's neat and works great, however I want an improvement in the work flow. In my use case, I have a script.js file that requires node modules like Cylon etc.

For brevity, script.js looks something like:

"use strict";

var Cylon = require('cylon'); 
Cylon.robot({
    name: "BrowserBot",

    connections: {
      arduino: { adaptor: 'firmata', port: '/dev/tty.usbmodem1411' }
    },

    devices: {
      led: { driver: 'led', pin: 8 }
    },

    work: function(my) {
      Cylon.Logger.info("Hi, my name is " + my.name)

      every((2).seconds(), function() {
        Cylon.Logger.info("Toggling the LED");
        my.led.toggle();
      });
    }
  });

Cylon.start();

I was looking at the bundle.js file that browserify generates and i could find the exact code block mentioned above, and I think a node process is started with this code and some bindings. I want the script.js file to be dynamic to allow the user to use a different pin on an LED or any other small change for that matter. Since I am not changing any dependencies for this file, I should be just able to replace that block in bundle.js with the new contents of the script.js file as other modules are already loaded and bundled in the bunndle.js right?

I want to know if this is possible in a browser setting. Chrome Apps allow file Storage, so it is possible for me to generate bundle.js dynamically after initial creation where I just plug-in the contents of script.js and load bundle.js in an HTML file? How do I go about this?

While the question is not specific to Cylon, I am still adding it as a tag for my specific usecase.

Vivek Pradhan
  • 4,777
  • 3
  • 26
  • 46
  • Not sure what your problem is. How is this `bundle.js` used in the app? What stops you from making some interface that accepts parameters? – Xan Oct 04 '16 at 08:56
  • Hey @Xan! The `bundle.js` file is generated through `browserify`. So a bunch of node modules are compiled and live there. So, stuff like `Cylon` module and all other `firmata` adaptors are all there in `bundle.js`. But since `script.js` could be any code that does something with an arduino. I am not sure how to build that into `bundle.js` as a parameter? – Vivek Pradhan Oct 06 '16 at 10:29

1 Answers1

0

All the .js files should be specified in the Apps manifest.json. I don't think you can edit items from the app's folder (even when accessing it thru file storage)

adjuremods
  • 2,938
  • 2
  • 12
  • 17
  • I hope you were able to understand my problem. Can I not save the js files using the chrome.fileStorage API and then edit them and inject them in the DOM or the App somehow? – Vivek Pradhan Sep 19 '16 at 11:38
  • @VivekPradhan It'd be very roundabout: to execute edited JS, you'd need to use a sandbox, since Chrome apps have an enforced CSP that forbids inline/eval code. – Xan Oct 04 '16 at 08:55
  • @Xan, my goal here is to make some sort of an IDE a very simplistic one of ofcourse using chrome apps. How do I sandbox it then? Can't think of a strategy that allows me to inject edited js into the browser because I am using node modules for everything. I wanted to make this work with js. :/ – Vivek Pradhan Oct 06 '16 at 10:31
  • An app cannot inject _anything_ into the browser itself; but it can inject into web content loaded in a ``. – Xan Oct 06 '16 at 10:43
  • Right. So if I have all the javascript loaded into the DOM as string between ` – Vivek Pradhan Oct 06 '16 at 10:49