透過Angular 來開發 Google Chrome Extension 的重點設定
透過Angular 來開發 Google Chrome Extension 的重點設定
如果沒接觸的朋友可以參考這一篇 https://medium.com/hybrid-maker/簡單來做一個-chrome-extension-2359e43f282a
如果沒接觸的朋友可以參考這一篇 https://medium.com/hybrid-maker/簡單來做一個-chrome-extension-2359e43f282a
因為公司內部有個系統是用Chrome Extension,來做操作介面,然後是使用ko.js ,費了好大筆勁目前已經換成 Angular10
這邊就先來做個筆記
設定 manifest.json
- 編輯
{rootproject}/manifest.json - 設定以下的內容
{
"manifest_version": 2,
...,
"content_security_policy": "script-src 'self' 'unsafe-eval' https://xxx; object-src 'self'",
"content_scripts": [
...
]
}
"script-src ‘self’ 這個security policy務必要設定
{rootproject}/manifest.json{
"manifest_version": 2,
...,
"content_security_policy": "script-src 'self' 'unsafe-eval' https://xxx; object-src 'self'",
"content_scripts": [
...
]
}
"script-src ‘self’ 這個security policy務必要設定
設定 angular.json
- 編輯
{root}/{angular-project}/angular.json - 設定輸出專案的位置,如下
{
"projects": {
"forest-admin-client": {
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "輸出專案的位置",
本專的outputPath設定是 dist/forest-admin-client
{root}/{angular-project}/angular.json{
"projects": {
"forest-admin-client": {
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "輸出專案的位置",
本專的outputPath設定是 dist/forest-admin-client
設定 angular 的 index.html
- 編輯
{root}/{angular-project}/src/index.html - 內容如下
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ForestAdminClient</title>
<base href="/{輸出專案的位置}">
</head>
...
</html>
ex 輸出專案的位置: dist/forest-admin-client
{root}/{angular-project}/src/index.html<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ForestAdminClient</title>
<base href="/{輸出專案的位置}">
</head>
...
</html>
ex 輸出專案的位置: dist/forest-admin-client
angular routing 的設定
因為Chrome Extension不支援 Root index, 所以這邊要用 useHash
請修改 AppRoutingModule 內容如下
import { ContactChartTokenComponent } from './contact-chart-token/contact-chart-token.component';
import { AmbiMappingComponent } from './ambi-mapping/ambi-mapping.component';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{ path: 'ambi/mapping', component: AmbiMappingComponent },
{ path: 'contact/charttoken', component: ContactChartTokenComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes, {
enableTracing: true,
useHash: true
})],
exports: [RouterModule]
})
export class AppRoutingModule { }
useHash: true <-- 這個打開
完成
使用連結大概會如下的形式
forest-admin-client/dist/forest-admin-client/index.html#/contact/charttokenmd code:
留言
張貼留言