Add Chrome Extension #151

sh19910711 · 2015-07-20T11:28:17Z

This pull-request contains Chrome Extension and some preparations for the browser extensions.

1. Use a static method to send XHRs

Use a static method to send XHRs (ref: 937d220)
- Add "REPLConsole.request()"
  - We can use this static method from instance methods and external scripts
  - And we can override this method by reassigning if needed
- Add "REPLConsole.XMLHttpRequest" for browser extensions
Add tests for REPLConsole#commandHandle() (ref: 20ae7e5)
- This is also testing REPLConsole.request()

2. Other preparations for the browser extensions

Add support for CommonJS (ref: c820b09)
- For the Firefox Extension.
Add full-screen mode for browser extensions (ref: 4cf06fb)
- CSS-based
- For the browser extensions

3. Add Chrome Extension

Add source code of Chrome Extension (ref: 84329e0)
- Show the console in the DevTools
Create a build environment for Chrome Extension (ref: 63279d9)
- Use Gulp to build the browser extensions

About the extension, we can try the development version by the following commands:

$ git clone https://github.com/rails/web-console.git
$ cd web-console/brx
$ bundle install
$ bundle exec rake ext:chrome:run

Now I'm looking for an edge case for the extension, so welcome any feedback from anyone at any time.

And hello @gsamokovarov, could you review this pull-request, please?

Thank you.

gsamokovarov · 2015-07-23T20:22:16Z

brx/gulpfiles/crx.coffee

@@ -0,0 +1,66 @@
+# Tasks to build chrome extension.


Can we build the extensions with Ruby tooling? E.g. rake.

sh19910711 · 2015-07-26T10:26:31Z

Updated:

Rename directories
- brx/ => extensions/
- crx/ => chrome/
Add FakeMiddleware class for testing and the browser extensions (ref: af0301b)
Add a feature to hide an existing console element on the page when the console is displayed in the panel of Chrome DevTools
- For that, add REPLConsole#uninstall() (ref: 2f44b6a)

The Rakefile is not finished yet ✋

GIF - Hide existing console

Thanks.

gsamokovarov · 2015-07-26T10:36:23Z

Great! Thanks for the update.

simkessy · 2015-07-27T01:24:53Z

This looks really awesome. I'm running rails through Vagrant through, so Chrome is on a localhost and rails is running in a VM. How would I set this up on my current system?

sh19910711 · 2015-07-27T03:46:16Z

@simkessy Thank you. The extension can detect Web Console by a response header, so I think there is no need to set up if you see the default console. All you have to do is to install the extension (and you might need to do gem "web-console", "~>2.2.0" or something perhaps).

sh19910711 · 2015-07-27T13:20:55Z

Updated:

Use Rake instead of Gulp to build the browser extensions
Add rake tasks for the Chrome Extension
- ext:chrome is to build the extension
- ext:chrome:run: is to launch a browser with the extension

@gsamokovarov Hello, could you review the rake tasks again? (ref: 563319e)

Thank you!

gsamokovarov · 2015-07-27T15:28:30Z

lib/web_console/fake_middleware.rb

+require "web_console"
+
+module WebConsole
+  class FakeMiddleware


Can this live in lib/web_console/testing/fake_middleware.rb? This is to follow the example of other Rails component grouping their testing utilities in similar module.

sh19910711 · 2015-07-28T08:59:54Z

Updated:

Move erb_helper.rb and fake_middleware.rb into lib/web_console/testing/
Add ERBHelper class to pre-compile templates (ref: 59fe2f3)
- We can build the extension faster!

@gsamokovarov Any other points you have?

Thanks.

gsamokovarov · 2015-07-28T09:32:59Z

extensions/package.json

+    "crx": "^3.0.2"
+  },
+  "scripts": {
+    "crx": "npm install && node \"$(npm bin)/gulp\" crx/run"


We don't have gulp anymore, right?

sh19910711 · 2015-07-28T11:41:59Z

Updated again:

Rename scripts => script
Move FakeMiddleware into the top-level (it means WebConsole::FakeMiddleware => FakeMiddleware)
Squash commits of the rake tasks

Thanks again.

gsamokovarov · 2015-07-28T11:54:29Z

lib/web_console/testing/erb_helper.rb

+require 'web_console/testing/fake_middleware'
+
+# This class is to pre-compile 'templates/*.erb'.
+class ERBHelper


ERBPrecompiler

Oh, also, please put it inside of the WebConsole::Testing namespace. Its more predictable to have the web_console/testing/erb_helper class/module in this namespace. You can call it with the fully qualified name wherever its referenced now. Same applies to the FakeMiddleware.

OK, I will do it :-)

sh19910711 · 2015-07-29T05:08:58Z

Updated:

Do callback(result, response) in the REPLConsole#commandHandle() (ref: 5d66fa3)
Fix the new hash syntax in the Rakefile ✂️
Use WebConsole::Testing
And rename ERBHelper to ERBPrecompiler

Thanks!

sh19910711 · 2015-07-29T05:13:41Z

Forgot to write, I added WebConsole.gem_root into the lib/web_console.rb to get path from root directory (ref: 0f64708#diff-4ffc3efe29c6bb1b76c331c9cffe6b67R22).

gsamokovarov · 2015-07-29T07:55:21Z

lib/web_console/testing/fake_middleware.rb

+require "action_dispatch"
+require "web_console"
+
+module WebConsole::Testing


I would prefer it written like:

module WebConsole module Testing class FakeMiddleware end end end

That way, the file that is required first will create the WebConsole::Testing module and the other files will just reopen it. You also get better Module.nesting and can reference constants in WebConsole relatively as well. Same for the precompiler.

sh19910711 · 2015-07-29T10:14:21Z

Updated again.

I'd prefer gem_root to just return a Pathname object. If you need to join on it, you can call #join.

Yeah, that makes sense.

You also get better Module.nesting and can reference constants in WebConsole relatively as well. Same for the precompiler.

Now I get it.

Thanks!

sh19910711 · 2015-07-30T06:46:58Z

Rakefile

+
+    task build: [ extdir, 'lib:templates' ] do
+      cd rootdir do
+        cp_r [ 'chrome/html', 'chrome/js', 'chrome/manifest.json', 'img/', 'tmp/lib/' ], dist


This line ends up copying files which should be ignored (e.g., vim swap files). I will rewrite this task with git ls-files or something else.

sh19910711 · 2015-07-31T05:36:47Z

Updated (diff for the Rakefile: 221da56...2d350dc):

Use git ls-files to cleanly copy files on building the extension
Fix zip task
Don't require "web-console" on fake_middleware.rb
- Got NoMethodError on Travis CI with JRuby
- https://travis-ci.org/rails/web-console/jobs/73495954#L155

Thanks!

sh19910711 · 2015-07-31T07:36:17Z

Don't require "web-console" on fake_middleware.rb

Oh, this also causes NoMethodError for the WebConsole.gem_root. I will fix it.

sh19910711 · 2015-07-31T08:37:29Z

Updated again:

Move WebConsole.gem_root to WebConsole::Testing::Helper.gem_root (diff is here: 33e6a59)
- It means to limit the access to the method for testing and similar things

And thanks again.

gsamokovarov · 2015-07-31T08:45:02Z

Rakefile

+        cp_r [ 'img/', 'tmp/lib/' ], dist
+        `cd chrome && git ls-files`.split("\n").each do |src|
+          dest = dist.join(src)
+          mkdir_p dest.dirname unless Dir.exists?(dest.dirname)


I think mkdir_p will check if the dir exist and won't create it at all, so you can save yourself the condition.

For the development: ``` $ git clone https://github.com/rails/web-console.git $ cd web-console $ bundle install $ bundle exec rake ext:chrome:run => Chrome will be launched with the extension. ``` And provide some rake tasks for the extension: - "ext:chrome" is to build the extension - "ext:chrome:run" is to launch a browser with the extension - "ext:chrome:zip" is to generate .zip - "ext:chrome:crx" is to generate .crx

sh19910711 · 2015-07-31T09:25:13Z

Updated again*2 (diff: f79075b...ece32ec):

Remove the unless condition
Fix indent of private methods of the FakeMiddleware class (>>)
Remove attr_readers of the FakeMiddleware class

gsamokovarov · 2015-08-04T07:13:45Z

@sh19910711 Do you have anything to add here? There are areas which we can improve, but I think it's a decent start.

sh19910711 · 2015-08-04T07:41:46Z

@gsamokovarov No, I don't. I think so too :-)

Add Chrome Extension

sh19910711 · 2015-08-04T08:50:02Z

@gsamokovarov Thanks for merging 🙇

gsamokovarov · 2015-08-07T09:22:04Z

Ref. #121

gsamokovarov · 2015-08-11T19:31:34Z

Hey @sh19910711, we seem to have forgotten to include the renamed script/ folder in version control. Can you issue a PR with it?

sh19910711 · 2015-08-12T01:46:46Z

Hey. That folder might be "extensions/script"?

simkessy · 2015-09-03T23:43:50Z

@simkessy Thank you. The extension can detect Web Console by a response header, so I think there is no need to set up if you see the default console. All you have to do is to install the extension (and you might need to do gem "web-console", "~>2.2.0" or something perhaps).

@sh19910711 I'm trying to follow the install instructions but I'm not sure if I'm suppose to be cloning the extension locally or in vagrant? So far I'm tried to do everything in vagrant and I get this error when trying to bundle

Bundler could not find compatible versions for gem "rack":
  In Gemfile:
    rails (>= 0) ruby depends on
      actionpack (= 5.0.0.alpha) ruby depends on
        rack (~> 2.x) ruby
Could not find gem 'rack (~> 2.x) ruby', which is required by gem 'actionpack (= 5.0.0.alpha) ruby', in

any of the sources.

sh19910711 · 2015-09-04T00:31:18Z

@simkessy Hi. It's better to clone the extension locally if you use it in Chrome on the real machine.

So far I'm tried to do everything in vagrant and I get this error when trying to bundle

I got the same error on the master branch. I think we can pass it by specifying the Gemfile of Web Console (like that bundle install --gemfile=./gemfiles/Gemfile-4-2-stable or something else) for now.

sh19910711 force-pushed the patch/0017/chrome-extension branch from 63279d9 to 5366360 Compare July 23, 2015 17:46

gsamokovarov reviewed Jul 23, 2015
View reviewed changes

sh19910711 force-pushed the patch/0017/chrome-extension branch 3 times, most recently from 0a62f07 to f60f126 Compare July 26, 2015 10:01

sh19910711 force-pushed the patch/0017/chrome-extension branch from f60f126 to 563319e Compare July 27, 2015 13:04

gsamokovarov reviewed Jul 27, 2015
View reviewed changes

sh19910711 force-pushed the patch/0017/chrome-extension branch from 563319e to 59fe2f3 Compare July 28, 2015 08:48

gsamokovarov reviewed Jul 28, 2015
View reviewed changes

sh19910711 force-pushed the patch/0017/chrome-extension branch from 59fe2f3 to ae8bbde Compare July 28, 2015 11:21

gsamokovarov reviewed Jul 28, 2015
View reviewed changes

Add source codes of the Chrome Extension

5e4bce6

sh19910711 force-pushed the patch/0017/chrome-extension branch from ae8bbde to 0f64708 Compare July 29, 2015 04:56

gsamokovarov reviewed Jul 29, 2015
View reviewed changes

sh19910711 force-pushed the patch/0017/chrome-extension branch from 0f64708 to 221da56 Compare July 29, 2015 09:56

sh19910711 reviewed Jul 30, 2015
View reviewed changes

sh19910711 force-pushed the patch/0017/chrome-extension branch 2 times, most recently from f709292 to 49acec6 Compare July 31, 2015 05:30

sh19910711 force-pushed the patch/0017/chrome-extension branch from 49acec6 to f79075b Compare July 31, 2015 08:23

gsamokovarov reviewed Jul 31, 2015
View reviewed changes

sh19910711 force-pushed the patch/0017/chrome-extension branch from f79075b to 7098a7e Compare July 31, 2015 09:15

gsamokovarov added a commit that referenced this pull request Aug 4, 2015

Merge pull request #151 from sh19910711/patch/0017/chrome-extension

4e46969

Add Chrome Extension

gsamokovarov merged commit 4e46969 into rails:master Aug 4, 2015

gsamokovarov added the gsoc label Aug 7, 2015

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Chrome Extension #151

Add Chrome Extension #151

sh19910711 commented Jul 20, 2015

gsamokovarov Jul 23, 2015

sh19910711 commented Jul 26, 2015

gsamokovarov commented Jul 26, 2015

simkessy commented Jul 27, 2015

sh19910711 commented Jul 27, 2015

sh19910711 commented Jul 27, 2015

gsamokovarov Jul 27, 2015

sh19910711 commented Jul 28, 2015

gsamokovarov Jul 28, 2015

sh19910711 commented Jul 28, 2015

gsamokovarov Jul 28, 2015

gsamokovarov Jul 28, 2015

sh19910711 Jul 28, 2015

sh19910711 commented Jul 29, 2015

sh19910711 commented Jul 29, 2015

gsamokovarov Jul 29, 2015

sh19910711 commented Jul 29, 2015

sh19910711 Jul 30, 2015

gsamokovarov Jul 30, 2015

sh19910711 commented Jul 31, 2015

sh19910711 commented Jul 31, 2015

sh19910711 commented Jul 31, 2015

gsamokovarov Jul 31, 2015

sh19910711 commented Jul 31, 2015

gsamokovarov commented Aug 4, 2015

sh19910711 commented Aug 4, 2015

sh19910711 commented Aug 4, 2015

gsamokovarov commented Aug 7, 2015

gsamokovarov commented Aug 11, 2015

sh19910711 commented Aug 12, 2015

simkessy commented Sep 3, 2015

sh19910711 commented Sep 4, 2015

Add Chrome Extension #151

Add Chrome Extension #151

Conversation

sh19910711 commented Jul 20, 2015

1. Use a static method to send XHRs

2. Other preparations for the browser extensions

3. Add Chrome Extension

Choose a reason for hiding this comment

sh19910711 commented Jul 26, 2015

GIF - Hide existing console

gsamokovarov commented Jul 26, 2015

simkessy commented Jul 27, 2015

sh19910711 commented Jul 27, 2015

sh19910711 commented Jul 27, 2015

Choose a reason for hiding this comment

sh19910711 commented Jul 28, 2015

Choose a reason for hiding this comment

sh19910711 commented Jul 28, 2015

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sh19910711 commented Jul 29, 2015

sh19910711 commented Jul 29, 2015

Choose a reason for hiding this comment

sh19910711 commented Jul 29, 2015

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sh19910711 commented Jul 31, 2015

sh19910711 commented Jul 31, 2015

sh19910711 commented Jul 31, 2015

Choose a reason for hiding this comment

sh19910711 commented Jul 31, 2015

gsamokovarov commented Aug 4, 2015

sh19910711 commented Aug 4, 2015

sh19910711 commented Aug 4, 2015

gsamokovarov commented Aug 7, 2015

gsamokovarov commented Aug 11, 2015

sh19910711 commented Aug 12, 2015

simkessy commented Sep 3, 2015

sh19910711 commented Sep 4, 2015