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
- Installing
webpack-cli
as dev-dep - Add npm commando to build contentScript and serviceWorker
"build:dev:service-worker": "webpack --config src/chrome/webpack.config",
- Add how to compile
contentScript
andserviceWorker
with webpack specificated onwebpack.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 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
)
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:
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"],
...
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"
},
...
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"
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"
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"
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 }),]
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"
}, ],
},
//...
ng g module modules/popup --route popup --module app.module
ng g module modules/options --route options --module app.module
ng g module modules/new-tab --route new-tab --module app.module'oML
This project was generated with Angular CLI version 15.
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.
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
.
Run ng build
to build the project. The build artifacts will be stored in the dist/
directory.
Run ng test
to execute the unit tests via Karma.
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.
To get more help on the Angular CLI use ng help
or go check out the Angular CLI Overview and Command Reference page.