将 Angular 书面扩展迁移到清单 V3

Question

正如我上个月看到的那样，正如谷歌开发团队所说，清单 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);
    });
  }, { url: [{ urlMatches: 'google.com' }] });
});

自定义-webpack.config.js

module.exports = {
    entry: { background: 'src/background.ts' },
}

我的background.js 看起来像这样：

if (window === null || typeof window !== "object") {
    (window["webpackJsonp"] = window["webpackJsonp"] || []).push([["background"],{
    
    /***/ "EtE5":
    /*!***************************!*\
      !*** ./src/background.ts ***!
      \***************************/
    /*! no static exports found */
    /***/ (function(module, exports) {
    
    var __read = (this && this.__read) || function (o, n) {
        var m = typeof Symbol === "function" && o[Symbol.iterator];
        if (!m) return o;
        var i = m.call(o), r, ar = [], e;
        try {
            while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
        }
        catch (error) { e = { error: error }; }
        finally {
            try {
                if (r && !r.done && (m = i["return"])) m.call(i);
            }
            finally { if (e) throw e.error; }
        }
        return ar;
    };
    chrome.runtime.onInstalled.addListener(function () {
        chrome.storage.sync.set({ color: '#3aa757' });
        chrome.webNavigation.onCompleted.addListener(function () {
            chrome.tabs.query({ active: true, currentWindow: true }, function (_a) {
                var _b = __read(_a, 1), id = _b[0].id;
                chrome.pageAction.show(id);
            });
        }, { url: [{ urlMatches: 'google.com' }] });
    });
    
    
    /***/ })
    
    },[["EtE5","runtime"]]]);
    //# sourceMappingURL=background.js.map
   
}

1. 但如果我尝试在 Google Canary chrome://extension 中加载它，我会收到一条错误消息

window is not defined

我搜索了一下，发现 Service Worker 不支持 window。

2. 我尝试将 workbox 与 Webpack 一起使用，但我再次收到一些 google 错误提示。

TypeError: Failed to execute 'addAll' on 'Cache': Request scheme 'chrome-extension'

我知道background.js需要成为一个服务工作者，但我只是找不到任何解决方案来满足我的问题并帮助我。

在清单 V3 中是否有任何实际可行的解决方案？

Answer 1

在我的例子中添加optimization.runtimeChunk = false作品。

自定义-webpack.config.js

module.exports = {
  entry: { background: 'src/background.ts' },
  optimization: {
    runtimeChunk: false
  }
}