titusfx / initial-chrome-base-extension

Workflow

Build angular app and wait for 1 second and the build serviceWorker and contentPage ( because is a watch can't be done sequentially)

npm run dev

Compile chrome contentScript and ServiceWorker

1. Installing webpack-cli as dev-dep
2. Add npm commando to build contentScript and serviceWorker "build:dev:service-worker": "webpack --config src/chrome/webpack.config",
3. Add how to compile contentScript and serviceWorker with webpack specificated on webpack.config.js

const { join } = require("path");

module.exports = {
  mode: "development",
  devtool: "inline-source-map", // Add source map support
  entry: {
    contentPage: join(__dirname, "src/contentPage.ts"),
    serviceWorker: join(__dirname, "src/serviceWorker.ts"),
  },
  output: {
    path: join(__dirname, "../../dist/base-extension"),
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        exclude: /node_modules/,
        test: /\.ts?$/,
      },
    ],
  },
  plugins: [],
  resolve: {
    extensions: [".ts", ".js"],
  },
};

and the Typescript specification on tsconfig.chrome-extension.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es5",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2018", "dom"]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

Adding Angular to the build

Add command and configuration

Adding the commando build:dev:angular on package.json:

        "build:dev:angular": "ng build --configuration dev --watch --delete-output-path false",

Where --delete-output-path false avoid that contentScript and serviceWorker are deleted.

The configuration that it will use is dev ( see angular.json the path: project.<project-name>.architect.build.configuration.development )

Add manifest

In order to any website work as chrome extension it requires a manifest.json file, we are using the last version v3.

This has 5 main sections:

ContentPage Script

Is one of the files transpiled before, it will be executed on the context of a website, you specify which url do you want to execute the ContentPage Script

...
 "content_scripts": [{
        "js": ["contentPage.js"],
...

ServiceWorker

Is one of the files transpiled before, it will be executed on background when required, it start when need to do something and stop when finish. In order to keep state is needed to write on a persistence storage.

...
 "background": {
        "service_worker": "serviceWorker.js"
    },

...

Action Page ( Popup page)

NOTE: In order to this page to work see section Add RouterTestingModule

This is executed when the button of the extension is clicked with right click

The path has # because it dynamic, does not exist as file so in order to identified that is needed.

The path specified there is: "index.html?#/popup"

Option Page

NOTE: In order to this page to work see section Add RouterTestingModule

This is executed when the button of the extension is clicked with left click button

The path specified there is: "index.html?#/options"

New Tab Page

NOTE: In order to this page to work see section Add RouterTestingModule

This is executed when a new tab is created

The path specified there is: "index.html?#/new-tab"

Add RouterTestingModule

When you open those pages the url has the prefix /index.html/ which means:

In order to access /options you need to have /index.html in every root as prefix also you need # in order to load dynamic content.

The first problem is that angular doesn't allow to declare an url with starting / so you need to specify the way you application will work, with respect to url, in this case we use the HashLocationStrategy which is added on the app-routing.module.ts file:

link

    // if you call location.go('/foo'), the browser's URL will become example.com#/foo.
    RouterModule.forRoot(routes, { useHash: true }),]

Install Dependencies

Install ts-loader

npm i -D ts-loader

and then add loader: "ts-loader" to webpack.config.js and webpack.config.prod.js in mode.rules, this is from this:

//...
module: {
        rules: [{
            exclude: /node_modules/,
            test: /\.ts?$/,
        }, ],
    },
    //...

to this:

//...
module: {
        rules: [{
            exclude: /node_modules/,
            test: /\.ts?$/,
            loader: "ts-loader"
        }, ],
    },
    //...

Generate Popup

ng g module modules/popup --route popup --module app.module

Generate Options

ng g module modules/options --route options --module app.module

Generate new Tab Override

ng g module modules/new-tab --route new-tab --module app.module'oML

BaseExtension

This project was generated with Angular CLI version 15.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.