Skip to content

Commit

Permalink
Create a build environment for Chrome Extension
Browse files Browse the repository at this point in the history
For developers:

```
$ git clone https://github.com/rails/web-console.git
$ cd web-console/extensions
$ bundle install
$ npm run crx
=> Chrome will be launched with the extension.
```

Some gulp tasks are provided:

* gulp crx
  - Build chrome extension.
* gulp crx/zip
  - Generate a .zip file for Chrome Web Store
* gulp crx/pkg
  - Generate a .crx file.
  • Loading branch information
sh19910711 committed Jul 26, 2015
1 parent 1ef940f commit f60f126
Show file tree
Hide file tree
Showing 8 changed files with 170 additions and 0 deletions.
2 changes: 2 additions & 0 deletions .gitignore
Expand Up @@ -9,3 +9,5 @@ test/dummy/tmp/
test/dummy/.sass-cache
Gemfile.lock
node_modules/
dist/
tmp/
12 changes: 12 additions & 0 deletions extensions/README.markdown
@@ -0,0 +1,12 @@
# Web Console Browser Extensions

## Development

### Quickstart

```shell
$ git clone https://github.com/rails/web-console.git
$ cd web-console/brx
$ bundle install
$ npm run crx
```
13 changes: 13 additions & 0 deletions extensions/gulpfile.coffee
@@ -0,0 +1,13 @@
global.gulp = require("gulp")

path = require("path")

global.templatePath = (target = "")->
path.resolve path.join(__dirname, "../lib/web_console/templates", target)

global.distpath = (target = "")->
path.resolve path.join(__dirname, "./dist", target)

# load tasks
glob = require("glob").sync
glob(path.join __dirname, "gulpfiles/*.coffee").forEach require
66 changes: 66 additions & 0 deletions extensions/gulpfiles/crx.coffee
@@ -0,0 +1,66 @@
# Tasks to build chrome extension.
do (buildTask = "crx")->
taskName = (task)-> "#{buildTask}/#{task}"
output = (path = "")-> distpath "crx/#{path}"

# Build a chrome extension. Compiled sources is generated
# into a directory called "dist/crx/".
gulp.task buildTask, [taskName("src")]

# Launch a browser with the extension.
gulp.task taskName("run"), [buildTask], ->
run = require("gulp-run")
run("sh scripts/run_chrome.sh --load-extension=\"#{output ""}\"").exec()

# Generate a .zip file for Chrome Web Store.
gulp.task taskName("zip"), [buildTask], ->
zip = require("gulp-zip")
manifest = require(distpath "crx/manifest.json")
filename = "#{manifest.name}-#{manifest.version}.zip"
gulp.src [output("**/*"), "!#{output "key.pem"}"]
.pipe zip(filename)
.pipe gulp.dest(distpath "")

# Generate a .crx file.
gulp.task taskName("pkg"), [buildTask], ->
run = require("gulp-run")
manifest = require(distpath "crx/manifest.json")
filename = "#{manifest.name}-#{manifest.version}.crx"
run("\"$(npm bin)/crx\" pack #{output ""} -o #{distpath filename}").exec()

do (srcTask = "#{buildTask}/src")->
taskName = (task)-> "#{srcTask}/#{task}"

gulp.task srcTask, [
"js"
"html"
"img"
"lib/templates"
"manifest.json"
].map taskName

gulp.task taskName("js"), ->
gulp.src ["chrome/js/**/*.js"]
.pipe gulp.dest(output "js/")

gulp.task taskName("img"), ->
gulp.src ["img/**/*.png"]
.pipe gulp.dest(output "img/")

gulp.task taskName("manifest.json"), ->
gulp.src ["chrome/manifest.json"]
.pipe gulp.dest(output "")

gulp.task taskName("lib/templates"), ["tmp/templates"], ->
gulp.src ["tmp/templates/**/*.js"]
.pipe gulp.dest(output "lib/")

gulp.task taskName("html"), ->
gulp.src ["chrome/html/**/*.html"]
.pipe gulp.dest(output "html/")

gulp.task taskName("watch"), ->
gulp.watch [templatePath "**/*.erb"], [taskName "lib"]
gulp.watch ["chrome/js/**/*.js"], [taskName "js"]
gulp.watch ["chrome/manifest.json"], [taskName "manifest.json"]
gulp.watch ["chrome/html/**/*.html"], [taskName "html"]
19 changes: 19 additions & 0 deletions extensions/gulpfiles/lib/erb_helper.rb
@@ -0,0 +1,19 @@
require "web_console/fake_middleware"

def root(path = "")
Pathname(File.expand_path "../../../../", __FILE__).join(path).to_s
end

def fake_view
@_view ||= WebConsole::FakeMiddleware.new(
view_path: root("lib/web_console/templates"),
).view
end

def method_missing(name, *args, &block)
if name.to_s.start_with?("render") && fake_view.respond_to?(name)
fake_view.send name, *args, &block
else
super
end
end
16 changes: 16 additions & 0 deletions extensions/gulpfiles/templates.coffee
@@ -0,0 +1,16 @@
do (output = "tmp/templates")->
taskName = (task)->
"#{output}/#{task}"

gulp.task output, [
"erb"
].map taskName

# Pre-compile *.js.erb.
gulp.task taskName("erb"), ->
run = require("gulp-run")
rename = require("gulp-rename")
gulp.src [templatePath "**/*.js.erb"]
.pipe run("bundle exec erb -r ./gulpfiles/lib/erb_helper", verbosity: 0)
.pipe rename(extname: "")
.pipe gulp.dest(output)
17 changes: 17 additions & 0 deletions extensions/package.json
@@ -0,0 +1,17 @@
{
"name": "brx-web-console",
"version": "0.0.0",
"devDependencies": {
"coffee-script": "^1.9.3",
"crx": "^3.0.2",
"glob": "^5.0.13",
"gulp": "^3.9.0",
"gulp-rename": "^1.2.2",
"gulp-run": "^1.6.8",
"gulp-zip": "^3.0.2"
},
"scripts": {
"crx": "npm install && node \"$(npm bin)/gulp\" crx/run"
},
"license": "MIT"
}
25 changes: 25 additions & 0 deletions extensions/scripts/run_chrome.sh
@@ -0,0 +1,25 @@
#!/bin/sh

is_command() {
type "$1" > /dev/null 2>&1
}

find_chrome_binary() {
for name in "chromium" "google-chrome" "chromium-browser"; do
if is_command "$name"; then
echo $name
return
fi
done
}

CHROME_BINARY=${CHROME_BINARY:-`find_chrome_binary`}

if is_command $CHROME_BINARY; then
echo $CHROME_BINARY "$@"
$($CHROME_BINARY "$@")
else
echo "Chrome is not found ($CHROME_BINARY)."
echo "Try 'CHROME_BINARY=path/to/chrome'."
exit 1
fi

0 comments on commit f60f126

Please sign in to comment.