refactor: Rewrite extension

.browserslistrc

@@ -0,0 +1,2 @@
+> 1%
+last 2 versions

.editorconfig

@@ -1,9 +1,7 @@
-root = true
-
-[*]
-charset = utf-8
+[*.{js,jsx,ts,tsx,vue}]
 indent_style = space
 indent_size = 2
 end_of_line = lf
-insert_final_newline = true
 trim_trailing_whitespace = true
+insert_final_newline = true
+max_line_length = 100

.eslintrc.js

@@ -0,0 +1,17 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: [
+    'plugin:vue/essential',
+    '@vue/airbnb',
+  ],
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+  },
+  parserOptions: {
+    parser: 'babel-eslint',
+  },
+};

.gitignore

@@ -1,12 +1,21 @@
 .DS_Store
-node_modules/
-dist/
-npm-debug.log
-yarn-error.log
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
 
 # Editor directories and files
 .idea
+.vscode
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
+*.sw?

README.md

@@ -1,28 +1,42 @@
 # splitscreen
 
-> Simple chrome extension to display webpages next to each other, when opening a new tab.
-
+> Simple chrome extension to display webpages next to each other, on its own, or when opening a new tab
 
 Chrome Extension available here https://chrome.google.com/webstore/detail/splitscreen/lejikfhnnennacpmpfcphoodkfklkgnj
 
+Boilerplate generated by [Vue CLI 3](https://cli.vuejs.org).
 
-Based on the [webpack simple](https://github.com/vuejs-templates/webpack-simple) Vue template.
+## Development
 
-## Build Setup
+### Compiles and minifies for production
+Run `yarn run build`, and load the `dist` folder as an unpacked extension on [chrome://extensions](chrome://extensions)
 
-``` bash
-# install dependencies
-npm install 
+Edit the contents of `./src/` and rebuild / reload the folder as an unpacked extension described above.
 
-# serve with hot reload at localhost:8080
-npm run dev
+## Project setup
+```
+yarn install
+```
 
-# build for production with minification
-npm run build
+### Compiles and hot-reloads for development
+```
+yarn run serve
 ```
 
-## Development
+### Compiles and minifies for production
+```
+yarn run build
+```
+
+### Run your tests
+```
+yarn run test
+```
 
-Load this folder as an unpacked extension on [chrome://extensions](chrome://extensions)
+### Lints and fixes files
+```
+yarn run lint
+```
 
-Edit `./src/App.vue` and rerun `npm run dev`
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/app',
+  ],
+};

manifest.json

@@ -1,24 +1,35 @@
 {
-    "manifest_version": 2,
-    "name": "Splitscreen",
-    "description": "Displays two webpages next to each other in a new tab",
-    "version": "0.0.1",
-    "author": "Siddharth Vadgama <me@siddv.net>",
-    "homepage_url": "https://github.com/siddv/splitscreen",
-    "icons": {
-        "16": "icons/splitscreen-16.png",
-        "32": "icons/splitscreen-32.png",
-        "48": "icons/splitscreen-48.png",
-        "128": "icons/splitscreen-128.png"
+  "manifest_version": 2,
+  "name": "Splitscreen",
+  "description": "Displays two webpages next to each other in a new tab",
+  "version": "2.0.0",
+  "author": "Siddharth Vadgama <me@siddv.net>",
+  "homepage_url": "https://github.com/siddv/splitscreen",
+  "icons": {
+      "16": "icons/splitscreen-16.png",
+      "32": "icons/splitscreen-32.png",
+      "48": "icons/splitscreen-48.png",
+      "128": "icons/splitscreen-128.png"
+  },
+  "permissions": [
+      "management",
+      "storage",
+      "webRequest",
+      "webRequestBlocking",
+      "<all_urls>"
+  ],
+  "background": {
+		  "scripts": ["background.js"],
+      "persistent": true
+  },
+  "options_page": "options.html",
+  "browser_action": {
+    "default_icon": {
+      "16": "icons/splitscreen-16.png",
+      "32": "icons/splitscreen-32.png",
+      "48": "icons/splitscreen-48.png",
+      "128": "icons/splitscreen-128.png"
     },
-    "permissions": [
-        "management",
-        "storage",
-        "webRequest",
-        "webRequestBlocking",
-        "<all_urls>"
-    ],
-    "chrome_url_overrides": {
-        "newtab": "index.html"
-    }
+    "default_title": "Splitscreen"
+  }
 }

package.json

@@ -1,33 +1,26 @@
 {
-  "name": "splitscreen",
-  "description": "Displays two webpages next to each other in a new tab",
-  "version": "0.0.1",
-  "author": "Siddharth Vadgama <me@siddv.net>",
-  "license": "MIT",
+  "name": "splitscreen-2",
+  "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
-    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build && cp -a ./icons/ ./dist/icons && cp ./manifest.json ./dist",
+    "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "vue": "^2.5.11"
+    "core-js": "^2.6.5",
+    "vue": "^2.6.10"
   },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not ie <= 8"
-  ],
   "devDependencies": {
-    "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.2",
-    "babel-preset-env": "^1.6.0",
-    "babel-preset-stage-3": "^6.24.1",
-    "cross-env": "^5.0.5",
-    "css-loader": "^0.28.7",
-    "file-loader": "^1.1.4",
-    "vue-loader": "^13.0.5",
-    "vue-template-compiler": "^2.4.4",
-    "webpack": "^3.6.0",
-    "webpack-dev-server": "^2.9.1"
+    "@vue/cli-plugin-babel": "^3.9.0",
+    "@vue/cli-plugin-eslint": "^3.9.0",
+    "@vue/cli-service": "^3.9.0",
+    "@vue/eslint-config-airbnb": "^4.0.0",
+    "babel-eslint": "^10.0.1",
+    "eslint": "^5.16.0",
+    "eslint-plugin-vue": "^5.0.0",
+    "sass": "^1.18.0",
+    "sass-loader": "^7.1.0",
+    "vue-template-compiler": "^2.6.10"
   }
 }

postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {},
+  },
+};

public/background.js

@@ -0,0 +1,22 @@
+/* eslint-disable */
+chrome.tabs.onCreated.addListener(tab => {
+  // If a new tab is opened (without any URL), check user's
+  // replace Tab setting and act accordingly. Default is false.
+  // Huge thanks to  Kushagra Gour for this code
+  // https://kushagra.dev/blog/conditional-newtab-override-chrome-extension/
+  // Slight adjustment as new tabs don't seem to have a URL attached in Chrome 74
+  // if a tab URL is undefined, we're going to assume it's the new tab.
+
+  // TODO: This doesn't work super reliably yet
+  if (tab.url === undefined) {
+    chrome.storage.sync.get(['replaceNewTab'], (items) => {
+      if (items.replaceNewTab === true) {
+        chrome.tabs.update( tab.id, { url: chrome.extension.getURL('index.html') });
+      }
+    });
+  }
+});
+
+chrome.browserAction.onClicked.addListener(() => {
+  chrome.tabs.create({ url: chrome.runtime.getURL("index.html") });
+});

public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+
+    <title>Splitscreen</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but Splitscreen doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>