小编Bog*_*321的帖子

正如我上个月看到的那样，正如谷歌开发团队所说，清单 V3 现已准备好投入生产。但我认为文档不完整（https://developer.chrome.com/docs/extensions/mv3/intro/mv3-migration）或者不是最新的。我正在尝试学习如何使用 Angular、TypeScript 和 Webpack 开发扩展，而且我希望扩展使用清单 v3。我使用本教程作为参考（https://medium.com/angular-in-deep/chrome-extension-with-angular-why-and-how-778200b87575）。不知何故，我想保留本教程中的相同步骤，而不是过多转移。我的扩展是一个生成的 Angular 项目，我的背景是用 TypeScript 编写的，并使用 Webpack 在 js 中编译。

清单.json

{
    "name": "Great Extension",
    "version": "1.0",
    "description": "Build an Extension with Angular",
    "manifest_version": 3,
    "permissions": [
        "activeTab",
        "webNavigation",
        "storage"
    ],
    "background": {
        "service_worker":"background.js"
    },
    "action": {
        "default_popup": "index.html"
    },
    "content_security_policy": {
      "extension_pages": "script-src 'self'; object-src 'self' "
    }
}

背景.ts

  chrome.storage.sync.set({ color: '#3aa757' });

  chrome.webNavigation.onCompleted.addListener(() => {
    chrome.tabs.query({ active: true, currentWindow: true }, ([{ id }]) => {
      chrome.pageAction.show(id); …