add compatibility with manifest V3

[lmichelin]

This PR adds the compatibility with the manifest V3 without breaking the compatibility with the manifest V2.

Checklist

• I ran the linting and formatting tools (ESLint and Prettier)
• I added addittional tests if adding new features

Closes #28

[sherifmayika]

I locally compiled and tested with Manifest v3. I still get error Uncaught ReferenceError: window is not defined
at
var injectionContext = this || window || {

[sherifmayika]

commented the "window" as var injectionContext = this || /*window ||*/ { then "window" error is gone in MV 3. not tested with Mv2. But now get Uncaught TypeError: Cannot read properties of null (reading 'extension') var extension = browser.extension,

[lmichelin]

Could you explain how to reproduce the bug? (Browser version, manifest content, steps to follow...). Thanks!

[sherifmayika]

@lmichelin lmichelin (#319 (comment))

Chromium
Version 107.0.5304.110 (Official Build) Arch Linux (64-bit)

Manifest
{ "manifest_version": 3, "name": "__MSG_extName__", "homepage_url": "http://localhost:8080/", "description": "A Vue Browser Extension", "default_locale": "en", "permissions": [ "activeTab" ], "icons": { "16": "icons/16.png", "48": "icons/48.png", "128": "icons/128.png" }, "background": { "service_worker": "js/background.js", "type": "module" }, "content_security_policy": { "extension_pages": "script-src 'self'; object-src 'self'; script-src-elem 'self' 'unsafe-inline'; connect-src https://* data: blob: filesystem:" }, "action": { "default_popup": "popup.html", "default_title": "__MSG_extName__", "default_icon": { "19": "icons/19.png", "38": "icons/38.png" } }, "version": "0.1.0" }
no content script
Background

chrome.action.onClicked.addListener(() => { console.log("browser action clicked"); // openApp("popup.html"); chrome.tabs.create({ url: chrome.runtime.getURL("popup.html"), }); });

package,json
{ "name": "my-extension", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service build --mode development --watch", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "axios": "^0.20.0", "core-js": "^3.8.3", "vue": "^2.6.14", "vue-router": "^3.5.1", "vuex": "^3.6.2" }, "devDependencies": { "@babel/core": "^7.12.16", "@babel/eslint-parser": "^7.12.16", "@vue/cli-plugin-babel": "~5.0.0", "@vue/cli-plugin-eslint": "~5.0.0", "@vue/cli-plugin-router": "~5.0.0", "@vue/cli-plugin-vuex": "~5.0.0", "@vue/cli-service": "~5.0.0", "eslint": "^7.32.0", "eslint-plugin-vue": "^8.0.3", "sass": "^1.32.7", "sass-loader": "^12.0.0", "vue-cli-plugin-browser-extension": "npm:@rhilip/vue-cli-plugin-browser-extension@^0.26.0", "vue-template-compiler": "^2.6.14" } }

[sherifmayika]

@lmichelin
Somehow I managed to remove errors in serviceworker
1)

-/* eslint:disable */ +/* eslint-disable */

-(function(window) {

+(function() { +try {window} catch {var window: any;}

this solves the "window is not defined" error

to remove 'extension'is undefined error

- const { extension, runtime, tabs } = browser; const manifest = runtime.getManifest()

+ const { runtime, tabs } = browser; const manifest = runtime.getManifest()

refer this
voyage-finance@3c96c5c
4)
to resolve "runtime" is undefined error

I replaced browser.runtime with chrome.runtime and browser.tabs with chrome.tabs in

node_modules/webpack-ext-reloader/dist/webpack-ext-reloader.js

now everything working fine for me.

browser.runtime comes from 'webextension-polyfill'

mozilla/webextension-polyfill#329 has clue how to make changes in wer-middleware.raw.ts