feat: Upgrade to manifest v3

Fixes #376

build/increment.sh

@@ -0,0 +1,17 @@
+#!/bin/bash
+
+next_version=$1
+
+function update_json() {
+	new_json="$(jq -r '.version = "'$next_version'"' $path)"
+	echo "$new_json" >$path
+}
+
+path='package.json'
+update_json
+
+path='src/manifest-chrome.json'
+update_json
+
+path='src/manifest-firefox.json'
+update_json

package.json

@@ -9,24 +9,30 @@
     "url": "https://bamdadsabbagh.com/"
   },
   "scripts": {
-    "build": "pnpm clean && pnpm build:webpack && pnpm build:ext",
+    "build": "pnpm dev:clean && pnpm build:clean && pnpm build:chrome && pnpm build:firefox",
     "build:clean": "rimraf packages",
-    "build:ext": "web-ext build --source-dir dist",
-    "build:prepare": "./bin/prepare.sh",
-    "build:webpack": "NODE_ENV=production webpack",
-    "clean": "pnpm dev:clean && pnpm build:clean",
-    "dev:chrome": "pnpm dev:clean && concurrently 'pnpm dev:webpack' 'wait-on dist/manifest.json && pnpm dev:ext:chrome'",
+    "build:increment": "build/increment.sh",
+    "build:chrome": "pnpm build:chrome:webpack && pnpm build:chrome:package",
+    "build:chrome:package": "web-ext build --source-dir dist/chrome --filename chrome.zip",
+    "build:chrome:webpack": "NODE_ENV=production pnpm webpack:chrome",
+    "build:firefox": "pnpm build:firefox:webpack && pnpm build:firefox:package",
+    "build:firefox:package": "web-ext build --source-dir dist/firefox --filename firefox.zip",
+    "build:firefox:webpack": "NODE_ENV=production pnpm webpack:firefox",
     "dev:clean": "rimraf dist",
-    "dev:ext:chrome": "web-ext run -t chromium",
-    "dev:ext:firefox": "web-ext run",
-    "dev:firefox": "pnpm dev:clean && concurrently 'pnpm dev:webpack' 'wait-on dist/manifest.json && pnpm dev:ext:firefox'",
-    "dev:webpack": "webpack",
+    "dev:chrome": "pnpm dev:clean && pnpm dev:chrome:watch",
+    "dev:chrome:run": "web-ext run --source-dir dist/chrome -t chromium",
+    "dev:chrome:watch": "concurrently 'pnpm webpack:chrome' 'wait-on dist/chrome/manifest.json && pnpm dev:chrome:run'",
+    "dev:firefox": "pnpm dev:clean && pnpm dev:firefox:watch",
+    "dev:firefox:run": "web-ext run --source-dir dist/firefox",
+    "dev:firefox:watch": "concurrently 'pnpm webpack:firefox' 'wait-on dist/firefox/manifest.json && pnpm dev:firefox:run'",
     "lint": "eslint src --ext .js --fix",
     "package:reinstall": "rimraf node_modules && pnpm",
     "package:sort": "npx sort-package-json",
     "test": "jest",
     "test:watch": "jest --watchAll",
-    "test:coverage": "jest --coverage"
+    "test:coverage": "jest --coverage",
+    "webpack:chrome": "webpack --env chrome",
+    "webpack:firefox": "webpack --env firefox"
   },
   "dependencies": {
     "jspdf": "2.5.1"

release.config.js

@@ -1,37 +1,54 @@
 /* eslint-disable no-template-curly-in-string */
 module.exports = {
-  'plugins': [
+  plugins: [
     '@semantic-release/commit-analyzer',
     '@semantic-release/release-notes-generator',
-    ['@semantic-release/changelog', {
-      changelogFile: 'CHANGELOG.md',
-    }],
-    ['@semantic-release/exec', {
-      prepareCmd: 'yarn build:prepare ${nextRelease.version} && yarn build',
-    }],
-    ['semantic-release-firefox-add-on', {
-      extensionId: '{55a4be35-e4be-40dc-a87e-ea6a58d04f46}',
-      targetXpi: 'leboncoin-pdf-ext-${nextRelease.version}.xpi',
-      artifactsDir: 'packages',
-      channel: 'listed',
-    }],
-    ['semantic-release-chrome', {
-      asset: 'leboncoin-pdf-ext-${nextRelease.version}.zip',
-      extensionId: 'mifkoblilhehppoemadbhopbbijpifcj',
-    }],
-    ['@semantic-release/github', {
-      assets: [
-        'packages/leboncoin-pdf-ext-${nextRelease.version}.xpi',
-        'leboncoin-pdf-ext-${nextRelease.version}.zip',
-      ],
-    }],
-    ['@semantic-release/git', {
-      assets: [
-        'CHANGELOG.md',
-        'package.json',
-        'src/manifest.json',
-      ],
-      message: 'chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}',
-    }],
+    [
+      '@semantic-release/changelog',
+      {
+        changelogFile: 'CHANGELOG.md',
+      },
+    ],
+    [
+      '@semantic-release/exec',
+      {
+        prepareCmd: 'pnpm build:increment ${nextRelease.version} && pnpm build',
+      },
+    ],
+    [
+      'semantic-release-firefox-add-on',
+      {
+        extensionId: '{55a4be35-e4be-40dc-a87e-ea6a58d04f46}',
+        targetXpi: 'leboncoin-pdf-ext-${nextRelease.version}.xpi',
+        sourceDir: 'dist/firefox',
+        artifactsDir: 'packages',
+        channel: 'listed',
+      },
+    ],
+    [
+      'semantic-release-chrome',
+      {
+        asset: 'leboncoin-pdf-ext-${nextRelease.version}.zip',
+        extensionId: 'mifkoblilhehppoemadbhopbbijpifcj',
+        distFolder: 'dist/chrome',
+      },
+    ],
+    [
+      '@semantic-release/github',
+      {
+        assets: [
+          'packages/leboncoin-pdf-ext-${nextRelease.version}.xpi',
+          'leboncoin-pdf-ext-${nextRelease.version}.zip',
+        ],
+      },
+    ],
+    [
+      '@semantic-release/git',
+      {
+        assets: ['CHANGELOG.md', 'package.json', 'src/manifest-*.json'],
+        message:
+          'chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}',
+      },
+    ],
   ],
 };

src/app/ad/ad.ts

@@ -3,7 +3,7 @@ import {PDF} from '../pdf/pdf';
 import {FONT_SIZES, FONT_WEIGHTS} from '../constants';
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
-const manifest = require('../../manifest.json');
+const manifest = require('../../manifest-chrome.json');
 
 export interface AdAttribute {
   generic: boolean;
@@ -277,7 +277,6 @@ export class Ad {
     this.pdf.printText({
       text: `Première publication : ${this.props.first_publication_date}`,
       size: FONT_SIZES.xsmall,
-
     });
 
     // Date of last update

src/manifest-chrome.json

@@ -0,0 +1,36 @@
+{
+  "name": "PDF Exporter for leboncoin.fr",
+  "short_name": "leboncoin-pdf",
+  "description": "PDF exporting Web Extension of classified ads listed on leboncoin.fr",
+  "version": "1.12.17",
+  "manifest_version": 3,
+  "icons": {
+    "512": "assets/icon.png"
+  },
+  "action": {
+    "default_icon": {
+      "512": "assets/icon.png"
+    },
+    "default_title": "PDF Exporter for leboncoin.fr",
+    "default_popup": "popup/index.html"
+  },
+  "content_scripts": [
+    {
+      "matches": [
+        "*://*.leboncoin.fr/*"
+      ],
+      "js": [
+        "scripts/content.js"
+      ],
+      "run_at": "document_end",
+      "all_frames": false
+    }
+  ],
+  "background": {
+    "service_worker": "scripts/background.js"
+  },
+  "permissions": [
+    "*://*.leboncoin.fr/*",
+    "storage"
+  ]
+}

webpack.config.js

@@ -3,64 +3,75 @@ const TerserPlugin = require('terser-webpack-plugin');
 const HtmlMinimizerPlugin = require('html-minimizer-webpack-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const isProduction = process.env.NODE_ENV === 'production';
+const path = require('path');
 
 // eslint-disable-next-line no-console
 console.log('Production mode is: ', isProduction);
 
-module.exports = {
-  watch: !isProduction,
-  mode: isProduction ? 'production' : 'development',
-  devtool: isProduction ? false : 'inline-source-map',
-  entry: {
-    'scripts/background': './src/app/background.ts',
-    'scripts/content': './src/app/content.ts',
-    'scripts/popup': './src/app/popup.ts',
-  },
-  output: {
-    publicPath: '',
-  },
-  resolve: {
-    extensions: ['.ts', '.js'],
-  },
-  node: false,
-  plugins: [
-    new CopyPlugin({
-      patterns: [
-        {
-          from: './src/manifest.json',
-          to: 'manifest.json',
-        },
+module.exports = (env) => {
+  const getBrowserFlavour = () => {
+    if (env.chrome === true) {
+      return 'chrome';
+    } else if (env.firefox === true) {
+      return 'firefox';
+    }
+  };
+
+  return {
+    watch: !isProduction,
+    mode: isProduction ? 'production' : 'development',
+    devtool: isProduction ? false : 'inline-source-map',
+    entry: {
+      'scripts/background': './src/app/background.ts',
+      'scripts/content': './src/app/content.ts',
+      'scripts/popup': './src/app/popup.ts',
+    },
+    output: {
+      path: path.resolve(__dirname, `dist/${getBrowserFlavour()}`),
+    },
+    resolve: {
+      extensions: ['.ts', '.js'],
+    },
+    node: false,
+    plugins: [
+      new CopyPlugin({
+        patterns: [
+          {
+            from: `./src/manifest-${getBrowserFlavour()}.json`,
+            to: 'manifest.json',
+          },
+          {
+            from: './src/assets',
+            to: 'assets',
+          },
+          {
+            from: './src/popup',
+            to: 'popup',
+          },
+        ],
+      }),
+    ],
+    module: {
+      rules: [
         {
-          from: './src/assets',
-          to: 'assets',
+          test: /\.js$/,
+          use: 'babel-loader',
+          exclude: /node_modules/,
         },
         {
-          from: './src/popup',
-          to: 'popup',
+          test: /\.ts$/,
+          use: 'ts-loader',
+          exclude: /node_modules/,
         },
       ],
-    }),
-  ],
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        use: 'babel-loader',
-        exclude: /node_modules/,
-      },
-      {
-        test: /\.ts$/,
-        use: 'ts-loader',
-        exclude: /node_modules/,
-      },
-    ],
-  },
-  optimization: {
-    minimize: true,
-    minimizer: [
-      new TerserPlugin(),
-      new HtmlMinimizerPlugin(),
-      new CssMinimizerPlugin(),
-    ],
-  },
+    },
+    optimization: {
+      minimize: true,
+      minimizer: [
+        new TerserPlugin(),
+        new HtmlMinimizerPlugin(),
+        new CssMinimizerPlugin(),
+      ],
+    },
+  };
 };