Init Project with template

.babelrc

@@ -0,0 +1,15 @@
+{
+  "plugins": [
+    "@babel/plugin-proposal-optional-chaining"
+  ],
+  "presets": [
+    ["@babel/preset-env", {
+      "useBuiltIns": "usage",
+      "corejs": 3,
+      "targets": {
+        // https://jamie.build/last-2-versions
+        "browsers": ["> 0.25%", "not ie 11", "not op_mini all"]
+      }
+    }]
+  ]
+}

.eslintrc.js

@@ -0,0 +1,33 @@
+// https://eslint.org/docs/user-guide/configuring
+// File taken from https://github.com/vuejs-templates/webpack/blob/1.3.1/template/.eslintrc.js, thanks.
+
+module.exports = {
+  root: true,
+  parserOptions: {
+    parser: 'babel-eslint',
+  },
+  env: {
+    browser: true,
+    webextensions: true,
+  },
+  extends: [
+    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
+    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
+    'plugin:vue/essential',
+    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
+    'standard',
+    // https://prettier.io/docs/en/index.html
+    'plugin:prettier/recommended',
+  ],
+  // required to lint *.vue files
+  plugins: ['vue'],
+  // add your custom rules here
+  rules: {
+    // allow async-await
+    'generator-star-spacing': 'off',
+    // allow new For Side Effects (no-new)
+    'no-new': 0,
+    // allow debugger during development
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+  },
+};

.gitignore

@@ -0,0 +1,7 @@
+/node_modules
+/*.log
+/dist
+/dist-zip
+package-lock.json
+.idea
+.DS_store

.prettierrc

@@ -0,0 +1,5 @@
+{
+    "singleQuote": true,
+    "printWidth": 180,
+    "trailingComma": "es5"
+}

README.md

@@ -0,0 +1,3 @@
+# Web Notes & Comments <small>Chrome Extension</small>
+
+`Web Notes & Comments` can be a very useful **chrome extension**, with which, you can easily annotate any text in any page with your comments.

package.json

@@ -0,0 +1,87 @@
+{
+  "name": "saltynote",
+  "version": "0.1.0",
+  "description": "An extension that helps you take comments and notes for any page",
+  "author": "Hao Zhou <[email protected]>",
+  "engines": {
+    "node": ">=10"
+  },
+  "scripts": {
+    "build:scss": "scss-powertools src/custom.scss dist/bs4.css",
+    "lint": "eslint --ext .js,.vue src",
+    "prettier": "prettier \"src/**/*.{js,vue}\"",
+    "prettier:write": "npm run prettier -- --write",
+    "build": "npm run build:scss && cross-env NODE_ENV=production webpack --hide-modules",
+    "package": "npm run build:scss && cross-env NODE_ENV=production RELEASE=true webpack --hide-modules",
+    "build:dev": "npm run build:scss && cross-env NODE_ENV=development webpack --hide-modules",
+    "build-zip": "npm run package && node scripts/build-zip.js",
+    "watch": "npm run build -- --watch",
+    "watch:dev": "cross-env HMR=true npm run build:dev -- --watch"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "pretty-quick --staged"
+    }
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.28",
+    "@fortawesome/free-solid-svg-icons": "^5.13.0",
+    "@fortawesome/vue-fontawesome": "^0.1.9",
+    "bootstrap": "^4.5.0",
+    "crypto-js": "^4.0.0",
+    "datatables.net": "^1.10.21",
+    "datatables.net-bs4": "^1.10.21",
+    "datatables.net-buttons": "^1.6.2",
+    "dayjs": "^1.8.27",
+    "highlight.js": "^10.0.3",
+    "jquery": "^3.5.1",
+    "mark.js": "^8.11.1",
+    "markdown-it": "^10.0.0",
+    "popper.js": "^1.16.1",
+    "toastr": "^2.1.4",
+    "vue": "^2.6.10",
+    "vuex": "^3.4.0",
+    "webextension-polyfill": "^0.3.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.9.6",
+    "@babel/plugin-proposal-optional-chaining": "^7.0.0",
+    "@babel/preset-env": "^7.9.6",
+    "@babel/runtime-corejs3": "^7.9.6",
+    "archiver": "^3.0.0",
+    "babel-eslint": "^10.0.3",
+    "babel-loader": "^8.0.2",
+    "babel-runtime": "^6.26.0",
+    "copy-webpack-plugin": "^7.0.0",
+    "core-js": "^3.6.5",
+    "cross-env": "^5.2.0",
+    "css-loader": "^3.5.3",
+    "ejs": "^2.6.1",
+    "eslint": "^6.6.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-config-standard": "^14.1.0",
+    "eslint-friendly-formatter": "^4.0.1",
+    "eslint-loader": "^3.0.2",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-node": "^10.0.0",
+    "eslint-plugin-prettier": "^3.1.1",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-standard": "^4.0.1",
+    "eslint-plugin-vue": "^6.0.1",
+    "file-loader": "^5.0.2",
+    "husky": "^2.4.0",
+    "mini-css-extract-plugin": "^0.9.0",
+    "node-sass": "^4.14.1",
+    "prettier": "^1.17.1",
+    "pretty-quick": "^1.8.0",
+    "sass-loader": "^7.1.0",
+    "scss-powertools": "^1.2.1",
+    "terser-webpack-plugin": "^2.3.6",
+    "vue-loader": "^15.9.2",
+    "vue-template-compiler": "^2.6.10",
+    "web-ext-types": "^2.1.0",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.10",
+    "webpack-extension-reloader": "^1.1.0"
+  }
+}

scripts/build-zip.js

@@ -0,0 +1,53 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+const archiver = require('archiver');
+
+const DEST_DIR = path.join(__dirname, '../dist');
+const DEST_ZIP_DIR = path.join(__dirname, '../dist-zip');
+
+const extractExtensionData = () => {
+  const extPackageJson = require('../package.json');
+
+  return {
+    name: extPackageJson.name,
+    version: extPackageJson.version,
+  };
+};
+
+const makeDestZipDirIfNotExists = () => {
+  if (!fs.existsSync(DEST_ZIP_DIR)) {
+    fs.mkdirSync(DEST_ZIP_DIR);
+  }
+};
+
+const buildZip = (src, dist, zipFilename) => {
+  console.info(`Building ${zipFilename}...`);
+
+  const archive = archiver('zip', { zlib: { level: 9 } });
+  const stream = fs.createWriteStream(path.join(dist, zipFilename));
+
+  return new Promise((resolve, reject) => {
+    archive
+      .directory(src, false)
+      .on('error', err => reject(err))
+      .pipe(stream);
+
+    stream.on('close', () => resolve());
+    archive.finalize();
+  });
+};
+
+const main = () => {
+  const { name, version } = extractExtensionData();
+  const zipFilename = `${name}-v${version}.zip`;
+
+  makeDestZipDirIfNotExists();
+
+  buildZip(DEST_DIR, DEST_ZIP_DIR, zipFilename)
+    .then(() => console.info('OK'))
+    .catch(console.err);
+};
+
+main();

src/background.js

@@ -0,0 +1,96 @@
+import * as types from './utils/action-types';
+import refreshUserInfo from './utils/identity';
+import { getSanitizedUrl } from './utils/urls';
+import { removeScriptTags } from './utils/base';
+import { defaultColor } from './utils/color';
+
+global.browser = require('webextension-polyfill');
+
+const getNotes = (tab, actionType) => {
+  refreshUserInfo().then(user => {
+    const url = getSanitizedUrl(tab.url);
+
+    // TODO: query notes by current url
+    // then send back to tab
+    // chrome.tabs.sendMessage(tab.id, { action: actionType, data: notes }, response => {
+    //   console.log(response);
+    // });
+  });
+};
+
+chrome.runtime.onInstalled.addListener(() => {
+  chrome.contextMenus.create({
+    title: 'Annotate in WebNote',
+    id: types.WEB_NOTE_RIGHT_CLICK_MENU_ID,
+    contexts: ['selection'],
+  });
+});
+
+chrome.contextMenus.onClicked.addListener((info, tab) => {
+  if (info.menuItemId === types.WEB_NOTE_RIGHT_CLICK_MENU_ID) {
+    console.log('right click triggered');
+    chrome.tabs.sendMessage(tab.id, { action: types.RIGHT_CLICK }, response => {
+      console.log(response);
+    });
+  }
+});
+
+chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
+  if (changeInfo.status === 'complete' && tab.url && tab.url.toLowerCase().startsWith('http')) {
+    getNotes(tab, types.HIGHLIGHT_ALL);
+  }
+});
+
+chrome.browserAction.onClicked.addListener(tab => {
+  getNotes(tab, types.SHOW_SIDE_BAR);
+});
+
+chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+  refreshUserInfo()
+    .then(user => {
+      // simple filter for remove script tags
+      if (request && request.note) {
+        request.note = removeScriptTags(request.note);
+      }
+
+      if (request.action === types.ADD_NOTE) {
+        const pa = request.pageAnnotation;
+        const pageAnnotation = {
+          text: pa.text,
+          note: pa.note,
+          highlightColor: pa.highlightColor || defaultColor,
+          isCustom: pa.isCustom || false,
+          url: getSanitizedUrl(sender.tab.url),
+          timestamp: new Date().getTime(),
+        };
+        // TODO: save note
+      }
+      if (request.action === types.DELETE_NOTE) {
+        // TODO: delete note
+      }
+      if (request.action === types.UPDATE_NOTE) {
+        if (!request.pageAnnotation.id) return;
+        note = {
+          note: removeScriptTags(request.pageAnnotation.note || ''),
+          highlightColor: request.pageAnnotation.highlightColor || defaultColor,
+          timestamp: new Date().getTime(),
+        };
+        // TODO: UPDATE note
+      }
+    })
+    .then(() => sendResponse({ done: 'true' }));
+  return true;
+});
+
+chrome.commands.onCommand.addListener(command => {
+  if (command === types.CMD_HIGHLIGHT_TOGGLE) {
+    console.log(types.CMD_HIGHLIGHT_TOGGLE);
+    chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
+      chrome.tabs.sendMessage(tabs[0].id, { action: types.CMD_HIGHLIGHT_TOGGLE }, response => {
+        console.log(response);
+      });
+    });
+  } else if (command === types.CMD_OPEN_OPTIONS_PAGE) {
+    chrome.runtime.openOptionsPage(() => console.log('Options page is opened'));
+  }
+});

src/custom.scss

@@ -0,0 +1,20 @@
+//Custom SCSS
+mark[data-v-highlight] {
+  background-color: yellow;
+  color: black;
+}
+
+.saltynote {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #212529;
+  text-align: left;
+  background-color: #fff;
+
+  // Required
+  @import 'bootstrap/scss/bootstrap';
+  @import 'highlight.js/styles/github';
+}

src/manifest.json

@@ -0,0 +1,51 @@
+{
+  "name": "Web Notes & Comments",
+  "description": "An extension that helps you take comments and notes for any page",
+  "version": "0.1.0",
+  "manifest_version": 2,
+  "icons": {
+    "48": "icons/icon.png",
+    "128": "icons/icon.png",
+    "144": "icons/icon.png"
+  },
+  "browser_action": {
+    "default_title": "Web Notes & Comments"
+  },
+  "background": {
+    "scripts": ["background.js"],
+    "persistent": false
+  },
+  "options_page": "options/options.html",
+  "permissions": ["activeTab", "contextMenus", "tabs"],
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["overlay/overlay.js"],
+      "css": ["bs4.css", "overlay/overlay.css"]
+    }
+  ],
+  "commands": {
+    "HIGHLIGHT_TOGGLE": {
+      "suggested_key": {
+        "default": "Ctrl+Shift+X",
+        "mac": "Command+Shift+X"
+      },
+      "description": "Toggle highlight for current page"
+    },
+    "OPEN_OPTIONS_PAGE": {
+      "suggested_key": {
+        "default": "Ctrl+Shift+O",
+        "mac": "Command+Shift+O"
+      },
+      "description": "Open Options Page"
+    },
+    "OPEN_NOTES_PAGE": {
+      "suggested_key": {
+        "default": "Ctrl+Shift+N",
+        "mac": "Command+Shift+N"
+      },
+      "description": "Open Notes Page"
+    }
+  },
+  "web_accessible_resources": ["icons/dog.jpg"]
+}