Thanks for considering!

While I've been working on supporting react-redux into extension-boilerplate, found a interesting project from react-chrome-redux. It looks very reasonable for extension architecture with react-redux.

So, I forked extension-boilerplate and put react-redux related things with react-chrome-redux and minor changes such like lint. If you're interesting of them, please check on https://github.com/sangwonl/extension-boilerplate-react-redux

I have loaded the boilerplate on chrome and start watching it.
npm run chrome-watch

When I am trying to use contextMenus I am getting a null error

background.js
ext.runtime.onInstalled.addListener(() => {
var id = ext.contextMenus.create({"title": "test menu", "contexts": ["selection"],
"onclick": genericOnClick});
});

This gives me an error 'Cannot read property 'create' of null'
I am tracing the ext object and I see a bunch of null values , alarms, bookmarks etc.

Not an issue, as much as it a tutorial for those wanting/needing to use config variables.

In my development.json I defined a variable "apiUrl": "https://api.test.com" In production it's "https://api.prod.com"

How do you use it?
In my popup.js file:

var api = '/* @echo api */';

I stumbled upon the solution through trial and error and reading the documentation at : https://www.npmjs.com/package/preprocess

That does var text = 'Hi, I am <!-- @echo USERNAME -->'; as an example. The syntax probably would have worked too, but I chose JS style block comment and it worked.

I am getting Unexpected token keyword «function», expected punc «,» when i run npm run build

I am using vueify.

This is gulpfile.babel.js

import fs from "fs";
import gulp from "gulp";
import { merge } from "event-stream";
import browserify from "browserify";
import source from "vinyl-source-stream";
import buffer from "vinyl-buffer";
import preprocessify from "preprocessify";
import gulpif from "gulp-if";

const vueify = require("vueify");

const $ = require("gulp-load-plugins")();

const uglify = require("gulp-uglify");
const gulpUtil = require("gulp-util");
const ignore = require("gulp-ignore");

var production = process.env.NODE_ENV === "production";
var target = process.env.TARGET || "chrome";
var environment = process.env.NODE_ENV || "development";

var generic = JSON.parse(fs.readFileSync(`./config/${environment}.json`));
var specific = JSON.parse(fs.readFileSync(`./config/${target}.json`));
var context = Object.assign({}, generic, specific);

var manifest = {
  dev: {
    background: {
      scripts: ["scripts/livereload.js", "scripts/background.js"]
    }
  },

  firefox: {
    applications: {
      gecko: {
        id: "[email protected]"
      }
    }
  }
};

// Tasks

gulp.task("clean", () => {
  return pipe(`./build/${target}`, $.clean());
});

gulp.task("build", cb => {
  $.runSequence("clean", "styles", "css", "fonts", "ext", cb);
});

gulp.task("watch", ["build"], () => {
  $.livereload.listen();

  gulp
    .watch(["./src/**/*", "./src/components/*", "./manifest.json"])
    .on("change", () => {
      $.runSequence("build", $.livereload.reload);
    });
});

gulp.task("default", ["build"]);

gulp.task("ext", ["manifest", "js"], () => {
  return mergeAll(target);
});

// -----------------
// COMMON
// -----------------
gulp.task("js", () => {
  return buildJS(target);
});

gulp.task("styles", () => {
  return gulp
    .src("src/styles/**/*.scss")
    .pipe($.plumber())
    .pipe(
      $.sass
        .sync({
          outputStyle: "expanded",
          precision: 10,
          includePaths: ["."]
        })
        .on("error", $.sass.logError)
    )
    .pipe(gulp.dest(`build/${target}/styles`));
});

gulp.task("css", () => {
  return gulp
    .src("src/styles/**/*.css")
    .pipe($.plumber())
    .pipe(gulp.dest(`build/${target}/styles`));
});

gulp.task("fonts", () => {
  return gulp
    .src("src/webfonts/**/*")
    .pipe($.plumber())
    .pipe(gulp.dest(`build/${target}/webfonts`));
});

gulp.task("manifest", () => {
  return gulp
    .src("./manifest.json")
    .pipe(
      gulpif(
        !production,
        $.mergeJson({
          fileName: "manifest.json",
          jsonSpace: " ".repeat(4),
          endObj: manifest.dev
        })
      )
    )
    .pipe(
      gulpif(
        target === "firefox",
        $.mergeJson({
          fileName: "manifest.json",
          jsonSpace: " ".repeat(4),
          endObj: manifest.firefox
        })
      )
    )
    .pipe(gulp.dest(`./build/${target}`));
});

// -----------------
// DIST
// -----------------
gulp.task("dist", cb => {
  $.runSequence("build", "zip", cb);
});

gulp.task("zip", () => {
  return pipe(`./build/${target}/**/*`, $.zip(`${target}.zip`), "./dist");
});

// Helpers
function pipe(src, ...transforms) {
  return transforms.reduce((stream, transform) => {
    const isDest = typeof transform === "string";
    return stream.pipe(isDest ? gulp.dest(transform) : transform);
  }, gulp.src(src));
}

function mergeAll(dest) {
  return merge(
    pipe("./src/icons/**/*", `./build/${dest}/icons`),
    pipe(["./src/_locales/**/*"], `./build/${dest}/_locales`),
    pipe([`./src/images/${target}/**/*`], `./build/${dest}/images`),
    pipe(["./src/images/shared/**/*"], `./build/${dest}/images`),
    pipe(["./src/**/*.html"], `./build/${dest}`)
  );
}

function buildJS(target) {
  const files = [
    "background.js",
    "contentscript.js",
    "options.js",
    "popup.js",
    "livereload.js",
    "app.js"
  ]; // "materialize.js",

  let tasks = files.map(file => {
    const dest = `build/${target}/scripts`;

    return browserify({ entries: "src/scripts/" + file, debug: true })
      .transform(vueify)
      .transform("babelify", {
        presets: [
          "es2015",
          [
            "env",
            {
              targets: {
                uglify: true
              }
            }
          ]
        ],
        plugins: [
          "transform-remove-console",
          "transform-es2015-shorthand-properties",
          "transform-class-properties",
          [
            "transform-runtime",
            {
              polyfill: false,
              regenerator: true
            }
          ]
        ]
      })
      .transform(preprocessify, {
        includeExtensions: [".js"],
        context: context
      })
      .bundle()
      .pipe(source(file))
      .pipe(buffer())
      .pipe(gulpif(!production, $.sourcemaps.init({ loadMaps: true })))
      .pipe(gulpif(!production, $.sourcemaps.write("./")))
      .pipe(ignore.exclude(["**/*.map"]))
      .pipe(
        gulpif(
          production,
          $.uglify({
            mangle: false,
            output: {
              ascii_only: true
            }
          })
        )
      )
      .pipe(gulp.dest(dest));
  });

  return merge.apply(null, tasks);
}

process.on("uncaughtException", function(err) {
  console.log(err);
});

Since Chrome 63 packed extensions stopped working.

Updates?

I was checking this code:

And there you have chrome.tabs.... Shouldn't it be ext.tabs?

I've build plugin for Firefox, zipped and uploaded to the addons.mozilla.org, the error is:

Your add-on failed validation with 2 errors.
No install.rdf or manifest.json found
Add-on missing manifest.

So why is that? manifest.json exists in the archive.

Hi, i use node v10.6.0 and npm v6.4.1 when run install when finish say me run $npm audit fix --force
have 9 packages vuln, when finish command, and i run build have error, or run chrome-watch
the error say
when run chrome-watch
Failed at the [email protected] chrome-watch script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above

and run build say
verbose Darwin 17.7.0
17 verbose argv "/Users/user1/.nvm/versions/node/v10.6.0/bin/node" "/Users/user1/.nvm/versions/node/v10.6.0/bin/npm" "run" "build"
18 verbose node v10.6.0
19 verbose npm v6.4.1
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] build: cross-env NODE_ENV=production npm run chrome-build && cross-env NODE_ENV=production npm run opera-build && cross-env NODE_ENV=production npm run firefox-build
22 error Exit status 1
23 error Failed at the [email protected] build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

Cheers

No updates in three years :/

Hi,
I recommend to use cross-env npm package for a compatibility on all operating systems.

I wanted to use the chrome.topSites api but it was not already in the scripts/utils/ext.js. Just wanted to leave a note here that it "topSites" api is not in the array by default.

Hey there,

I really like your idea and think about using the boilerplate for one of my projects. What is about supporting edge browser. It is based on web extensions as well. Just a few little changes compared to chrome.

Thanks
Jan

I don't believe the API's are loading properly. Trying to work in chrome and ext.webRequest is NULL.

As this project seems to be deprecated. I build another starter with webpack that can build cross browser extension as well. (This repo takes the inspiration)

Its got

• webpack/html/sass/javascript
• webpack/react/sass/typescript

Combo as well

https://github.com/abhijithvijayan/web-extension-starter

What is the difference between pcss and CSS, in the way it is used in the code?
And you have tailwindcss, and I don't see it in the code. Can you give an example of using tailwind with content script, and shadow house + CSS modules, for components?

如何在浏览器中调试，有类似 npm run dev，开启node服务调试页面的功能吗

webext-options-sync is a simple tool that takes care of autosaving the options form (among other things). If it sounds useful I can send a PR to integrate it into the boilerplate

Eslint will help in keeping a fix pattern of code extension wide, it can be added to git-hooks too before committing any changes

I am making an extension that overrides the standard "New Tab" page. It seems like the live-reloading doesn't work on Chrome latest (v59.0).

When I run: npm run chrome-watch the page refreshes but shows an error in the console:

Then, page crashes and falls back to the original "New Tab" page. I need to close the current tab and open a new one. Then - the extension works (plus my changes are present).

It doesn't work on Firefox (v54.0) either. When I run: npm run firefox-watch and I do a change - the tab with the extension closes and I need to manually open it again.

Hello @bharani91 ,

I was wondering what are the guidelines (the best practice approaches) to adopt (use) the boilerplate, in order to get future changes/updates/releases? Obviously, I can just clone the repo and start doing changes on top, but that doesn't sound to me very maintainable... Or is it? 👷

I'll appreciate if you please share your thoughts.

PS: Thanks for sharing your awesome work! ⭐️ I appreciate it a lot! 🤘

Having some trouble getting this into the build process for extension-boilerplate: https://github.com/mozilla/webextension-polyfill.

Tried manually adding the built polyfill file to extension-boilerplate src and referencing in the manifest.json, but its not making its way into the build/ when building.

Would be a great feature to have. Am currently dealing with a nightmare trying to use the cookies.get() API and support callbacks in chrome and promises in firefox.

Hi, i use storage.set but i need use local
i put this ext.storage.set not working
i put ext.storage.local.set not working

What is the best way used storage.local in this extension boilerplate??

thank any help!!

Maybe this could be useful
https://github.com/kritollm/chrome-extension-api-for-safari-and-firefox/blob/master/chromeAPISafari/chromeAPIForSafari.js
https://github.com/disconnectme/port/blob/master/port.js

Hi there, nice project,

how to go about targeting single browser for apis not yet supported (like chrome's declarativeContent)?

also using yarn instead of npm provides better performance and reliability of deps

Thanks

Node 12.3.1

error: no matching function for call to ‘v8::String::Utf8Value::Utf8Value(v8::Local<v8::Value>&)’
   17 |   v8::String::Utf8Value string(value);

In file included from ../src/create_string.cpp:1:
../../nan/nan.h: In function ‘void Nan::AsyncQueueWorker(Nan::AsyncWorker*)’:
../../nan/nan.h:2298:62: warning: cast between incompatible function types from ‘void (*)(uv_work_t*)’ {aka ‘void (*)(uv_work_s*)’} to ‘uv_after_work_cb’ {aka ‘void (*)(uv_work_s*, int)’} [-Wcast-function-type]
 2298 |     , reinterpret_cast<uv_after_work_cb>(AsyncExecuteComplete)
      |                                                              ^
../src/create_string.cpp: In function ‘char* create_string(Nan::MaybeLocal<v8::Value>)’:
../src/create_string.cpp:17:37: error: no matching function for call to ‘v8::String::Utf8Value::Utf8Value(v8::Local<v8::Value>&)’
   17 |   v8::String::Utf8Value string(value);
      |                                     ^
In file included from /home/jdunlap/.node-gyp/12.3.1/include/node/node.h:63,
                 from ../../nan/nan.h:54,
                 from ../src/create_string.cpp:1:
/home/jdunlap/.node-gyp/12.3.1/include/node/v8.h:2995:5: note: candidate: ‘v8::String::Utf8Value::Utf8Value(v8::Isolate*, v8::Local<v8::Value>)’
 2995 |     Utf8Value(Isolate* isolate, Local<v8::Value> obj);
      |     ^~~~~~~~~
/home/jdunlap/.node-gyp/12.3.1/include/node/v8.h:2995:5: note:   candidate expects 2 arguments, 1 provided
/home/jdunlap/.node-gyp/12.3.1/include/node/v8.h: In instantiation of ‘void v8::PersistentBase<T>::SetWeak(P*, typename v8::WeakCallbackInfo<P>::Callback, v8::WeakCallbackType) [with P = node::ObjectWrap; T = v8::Object; typename v8::WeakCallbackInfo<P>::Callback = void (*)(const v8::WeakCallbackInfo<node::ObjectWrap>&)]’:
/home/jdunlap/.node-gyp/12.3.1/include/node/node_object_wrap.h:84:78:   required from here
/home/jdunlap/.node-gyp/12.3.1/include/node/v8.h:9817:16: warning: cast between incompatible function types from ‘v8::WeakCallbackInfo<node::ObjectWrap>::Callback’ {aka ‘void (*)(const v8::WeakCallbackInfo<node::ObjectWrap>&)’} to ‘Callback’ {aka ‘void (*)(const v8::WeakCallbackInfo<void>&)’} [-Wcast-function-type]
 9817 |                reinterpret_cast<Callback>(callback), type)

Error when making npm install

I solved this by changing in package.json:
"gulp-sass": "^2.3.2"
to
"gulp-sass": "3.0.0",

codecombat/codecombat#4430 (comment)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\yrrod_000\AppData\Roaming\npm-cache\_logs\2019-10-18T09_03_25_525Z-debug.log

I see there's no gulp task for moving fonts in the dist/build folder.
I can easily add one and send a pr if someone's interested?

Mozilla has web-ext CLI to sign and publish Firefox extensions.
It would be nice if signing also build in.