Support manifest v3 for Chrome (#197)

* Support manifest v3

* Fix deps

.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 dist/
 src/js/vendor/vue-stuff/
+build/

addon/chrome/background.js

@@ -0,0 +1,27 @@
+/*    
+    Copyright (C) 2017-present Mirko Perillo and contributors
+    
+    This file is part of Resting.
+
+    Resting is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Resting is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Resting.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+// Open a new tab, and load Resting
+const openResting = (tabs) => {
+  chrome.tabs.create({
+    url: '/index.html',
+  })
+}
+
+chrome.action.onClicked.addListener(openResting)

addon/chrome/manifest.json

@@ -0,0 +1,20 @@
+{
+  "description": "Debug, inspect and test http requests in a easy way",
+  "manifest_version": 3,
+  "name": "Resting",
+  "version": "1.8.0",
+  "author": "Mirko Perillo",
+  "homepage_url": "https://github.com/mirkoperillo/resting",
+  "icons": {
+    "32": "icons/letter-r_32.png",
+    "64": "icons/letter-r_64.png"
+  },
+  "background": {
+    "service_worker": "background.js"
+  },
+  "action": {
+    "default_icon": "icons/letter-r_32.png"
+  },
+  "permissions": ["webRequest", "downloads"],
+  "host_permissions": ["<all_urls>"]
+}

src/manifest.json → addon/firefox/manifest.json

@@ -1,5 +1,5 @@
 {
-  "description": "rest client focused on organization of the saved requests",
+  "description": "Debug, inspect and test http requests in a easy way",
   "manifest_version": 2,
   "name": "Resting",
   "version": "1.8.0",

package.json

@@ -6,14 +6,17 @@
   "scripts": {
     "check-format": "prettier -c src",
     "format": "prettier --write src",
-    "test": "jasmine --config=test/config/jasmine.json"
+    "test": "jasmine --config=test/config/jasmine.json",
+    "dev:chrome": "./node_modules/nodemon/bin/nodemon.js --ext '*' --watch ./src --ignore 'js/vendor/**' --exec './scripts/build-dev.sh chrome'",
+    "dev:firefox": "./node_modules/nodemon/bin/nodemon.js --ext '*' --watch ./src --ignore 'js/vendor/**' --exec './scripts/build-dev.sh firefox'"
   },
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "@vue/cli-service": "~4.5.0",
     "jasmine": "~3.0.0",
     "lodash": "^4.17.21",
+    "nodemon": "^3.1.0",
     "prettier": "^2.8.8",
     "requirejs": "~2.3.5",
     "vue-template-compiler": "^2.6.11"

scripts/build-dev.sh

@@ -0,0 +1,40 @@
+#!/bin/bash
+
+parent_path=$( cd "$(dirname "${BASH_SOURCE[0]}")" ; pwd -P )
+
+cd $parent_path;
+echo "Moved to scripts dir"
+
+if [ $1 == 'chrome' ]
+then
+  echo "Build Chrome Extension"
+else
+  echo "Build Firefox Extension"
+fi
+
+if [ -d "../build" ]
+then
+  rm -r ../build
+  echo "Removed build dir"
+fi
+
+mkdir ../build
+echo "Created build dir"
+
+cp -r ../src/* ../build
+echo "Copied sources"
+
+cd ..
+./scripts/build-vue-comp.sh
+echo "Built vue components"
+
+cd scripts
+if [ $1 == 'chrome' ]
+then
+  cp ../addon/chrome/* ../build
+else  
+  cp ../addon/firefox/* ../build
+fi
+echo "Copied webextension files"
+
+echo "Done!"

scripts/build-unsigned.sh

@@ -1,6 +1,9 @@
 #!/bin/bash
 
-actual_dir=`pwd`
+parent_path=$( cd "$(dirname "${BASH_SOURCE[0]}")" ; pwd -P )
+
+cd $parent_path;
+echo "Moved to scripts dir"
 
 if [ ! -d "../dist" ] 
 then
@@ -16,14 +19,24 @@ cd ..
 ./scripts/build-vue-comp.sh
 echo "vue components built"
 
-cd src
-
 # patch the manifest
-mkdir -p ../dist/tmp
+mkdir -p dist/tmp
 if [ $? -eq 0 ]; then
   echo "created tmp folder"
 fi
 
+if [ $1 == 'chrome' ]
+then
+  cp addon/chrome/* dist/tmp/
+  echo "copy chrome manifest"
+else
+  cp addon/firefox/* dist/tmp/ 
+  echo "copy firefox manifest"
+fi
+
+
+# copy sources
+cd src
 cp -R * ../dist/tmp
 if [ $? -eq 0 ]; then
   echo "copy src in tmp folder"
@@ -60,4 +73,5 @@ if [ $? -eq 0 ]; then
 else
   echo "error deleting tmp folder"
 fi
-cd $actual_dir
+
+echo "Done!"

scripts/build-vue-comp.sh

@@ -1,4 +1,4 @@
-#!/bin/sh
+#!/bin/bash
 
 COMPONENTS_FOLDER="src/js/app/components"
 DIST_FOLDER="src/js/vendor/vue-stuff"

scripts/build.sh

@@ -1,4 +1,14 @@
-#!/bin/sh
+#!/bin/bash
+
+parent_path=$( cd "$(dirname "${BASH_SOURCE[0]}")" ; pwd -P )
+
+cd $parent_path;
+echo "Moved to scripts dir"
+
+if [ ! -d "../dist" ] 
+then
+  mkdir ../dist
+fi
 
 if [ ! -d "../dist" ] 
 then
@@ -17,4 +27,15 @@ echo "vue components built"
 cd src
 zip -r ../dist/resting.zip *
 cd ..
+if [ $1 == 'chrome' ]
+then
+  echo "copy chrome manifest"
+  zip -j dist/resting.zip addon/chrome/*
+else
+  echo "copy firefox manifest"
+  zip -j dist/resting.zip addon/firefox/*
+fi
+
 zip dist/resting.zip LICENSE README.md
+
+echo "Done!"

src/index.html

@@ -31,7 +31,7 @@
     <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
     <title>Resting - the REST client</title>
 
-    <!-- Bootstrap -->
+    <!-- Bootstrap-->
     <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
     <link href="css/fork-awesome.min.css" rel="stylesheet" type="text/css" />
     <link href="css/resting.css" rel="stylesheet" type="text/css" />

src/js/app/request.js

@@ -172,7 +172,7 @@ define(['jquery', 'app/response'], function ($, response) {
   }
 
   chrome.tabs.getCurrent((currentTab) =>
-    browser.webRequest.onResponseStarted.addListener(
+    chrome.webRequest.onResponseStarted.addListener(
       (request) => {
         const headers = []
         for (let { name, value } of request.responseHeaders) {

vue.config.js

@@ -5,13 +5,13 @@ module.exports = {
     resolve: {
       alias: {
         Components: path.resolve(__dirname, 'src/js/app/components'),
-        Services: path.resolve(__dirname, 'src/js/app')
-      }
+        Services: path.resolve(__dirname, 'src/js/app'),
+      },
     },
     externals: {
       'Services/clipboard': 'app/clipboard',
       'Services/storage': 'app/storage',
-      'Services/bacheca': 'app/bacheca'
-    }      
-  }
+      'Services/bacheca': 'app/bacheca',
+    },
+  },
 }