使用 TypeScript

如果您是使用 VSCode 或 Atom 等程式碼編輯器進行開發，則可使用 npm 套件 chrome-types，

藉此利用 Chrome API 的自動完成功能。當 Chromium 原始碼變更時，這個 npm 套件會自動更新。

ref:

• https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world?hl=zh-tw#types
  • .
• https://www.npmjs.com/package/chrome-types
  • .
• https://github.com/GoogleChrome/chrome-extensions-samples/tree/main
  • .
• https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples
  • .
• https://developer.chrome.com/docs/extensions/get-started?hl=zh-tw
  • .
• https://medium.com/@doublekien/chrome-extension-with-typescript-1589aa84e80
  • .
• .

.

Important notes

.

add chrome-types in tsconfig.app.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": [
      "chrome-types"
    ]
  },
  "files": [
    "src/main.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

register Service Worker

• add background.js in manifest.json
• add background.js in angular.json
• .

in manifest.json

{
  "background": {
    "service_worker": "background.js"
  },
  "permissions": [
    "activeTab"
  ]
}

in angular.json

{
  "assets": [
    "src/manifest.json",
    "src/background.js"
  ]
}

in background.js

//
chrome.runtime.onInstalled.addListener(() => {

  console.log("Background script is running");

  // chrome.action.setBadgeText({
  //   text: "OFF",
  // });
});

.