clipper(web): add web clipper browser extension

Author: thecodrr

extensions/web-clipper/.gitignore

@@ -0,0 +1 @@
+build.pem

extensions/web-clipper/assets/128x128.png

@@ -0,0 +1,15 @@
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.BABEL_ENV = "production";
+process.env.NODE_ENV = "production";
+process.env.ASSET_PATH = "/";
+
+var webpack = require("webpack"),
+  config = require("../webpack.config");
+
+delete config.chromeExtensionBoilerplate;
+
+config.mode = "production";
+
+webpack(config, function (err) {
+  if (err) throw err;
+});

extensions/web-clipper/assets/16x16.png

@@ -0,0 +1,60 @@
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.BABEL_ENV = "development";
+process.env.NODE_ENV = "development";
+process.env.ASSET_PATH = "/";
+
+var WebpackDevServer = require("webpack-dev-server"),
+  webpack = require("webpack"),
+  config = require("../webpack.config"),
+  env = require("./env"),
+  path = require("path");
+
+var options = config.chromeExtensionBoilerplate || {};
+var excludeEntriesToHotReload = options.notHotReload || [];
+
+for (var entryName in config.entry) {
+  if (excludeEntriesToHotReload.indexOf(entryName) === -1) {
+    config.entry[entryName] = [
+      "webpack/hot/dev-server",
+      `webpack-dev-server/client?hot=true&hostname=localhost&port=${env.PORT}`,
+    ].concat(config.entry[entryName]);
+  }
+}
+
+config.plugins = [new webpack.HotModuleReplacementPlugin()].concat(
+  config.plugins || []
+);
+
+delete config.chromeExtensionBoilerplate;
+
+var compiler = webpack(config);
+
+var server = new WebpackDevServer(
+  {
+    https: false,
+    hot: false,
+    client: false,
+    host: "localhost",
+    port: env.PORT,
+    static: {
+      directory: path.join(__dirname, "../build"),
+    },
+    devMiddleware: {
+      publicPath: `http://localhost:${env.PORT}/`,
+      writeToDisk: true,
+    },
+    headers: {
+      "Access-Control-Allow-Origin": "*",
+    },
+    allowedHosts: "all",
+  },
+  compiler
+);
+
+if (process.env.NODE_ENV === "development" && module.hot) {
+  module.hot.accept();
+}
+
+(async () => {
+  await server.start();
+})();

extensions/web-clipper/assets/24x24.png

@@ -0,0 +1,5 @@
+// tiny wrapper with default env vars
+module.exports = {
+  NODE_ENV: process.env.NODE_ENV || "development",
+  PORT: process.env.PORT || 3000,
+};

extensions/web-clipper/assets/256x256.png

@@ -0,0 +1,68 @@
+const ICONS = {
+  16: "16x16.png",
+  32: "32x32.png",
+  48: "48x48.png",
+  64: "64x64.png",
+  128: "128x128.png",
+  256: "256x256.png"
+};
+const BACKGROUND_SCRIPT = "background.bundle.js";
+const ACTION = {
+  default_icon: ICONS,
+  default_title: "Notesnook Web Clipper",
+  default_popup: "popup.html"
+};
+
+const common = {
+  name: "Notesnook Web Clipper",
+  version: "1.0",
+  description: "Clip web pages.",
+  permissions: [
+    "activeTab",
+    "tabs",
+    "storage",
+    "contextMenus",
+    "notifications"
+  ],
+  key: "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAmXQb9xwsSWbvAbBVnWa+DwsXLtRLbjfLyWRZtT5KF8bjCrEg3InvntWlk1PrNo73lsTov1m8Y5K9fJcCVKuYZkTCmNf4iGsHqOafi9ny5MX53oQ53+/s7gao2ZicHtTylnCIqn8f/l+RkV3tHO8BwANDLX2TTe7zCYLzFH19jiKAI+7qmUDZvyCH/OMVohluUCQO94s7sghslalwPbAcQQLpAKxYdd5GJDn4FryitsCMTYX962X+O6Tivq2QPML/Gm7BrZqJsU1enFRH1ss0UK0b9COpEYqqPhZ+GJP5K6WOL46NX+CvZnQmux1ehTZgIhw64IQJ57TvG2kIQTA8ZQIDAQAB",
+  content_scripts: [
+    {
+      js: ["nnContentScript.bundle.js"],
+      matches: ["*://app.notesnook.com/*", "*://localhost/*"]
+    },
+    {
+      js: ["contentScript.bundle.js"],
+      matches: ["http://*/*", "https://*/*"],
+      exclude_matches: ["*://app.notesnook.com/*", "*://localhost/*"]
+    },
+  ],
+  browser_specific_settings: {
+    gecko: {
+      strict_min_version: "105.0"
+    }
+  },
+  icons: ICONS,
+};
+
+const v2 = {
+  ...common,
+  manifest_version: 2,
+  background: {
+    scripts: [BACKGROUND_SCRIPT]
+  },
+  browser_action: ACTION
+};
+
+const v3 = {
+  ...common,
+  manifest_version: 3,
+  background: {
+    service_worker: BACKGROUND_SCRIPT
+  },
+  action: ACTION
+};
+
+module.exports = {
+  v2,
+  v3
+};

extensions/web-clipper/assets/32x32.png

@@ -0,0 +1,6 @@
+declare module "*.svg" {
+  import React = require("react");
+  export const ReactComponent: React.SFC<React.SVGProps<SVGSVGElement>>;
+  const src: string;
+  export default src;
+}