0

I'm building a Chrome extension that has both a popup and a background-page. I'm following this tutorial that focuses on using Angular to create the popup and uses @angular-builders/custom-webpack to add another Webpack entrypoint for the background-page so I can also use TypeScript in there.

custom-webpack.config.js

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

All well and good, popup works with Angular, background-page works with TypeScript.

background/test.ts

export const helloWorld = () => {
    console.log('Hello, World!');
}

background.html

<script type="module" src="runtime.js"></script>
<script type="module" src="background.js"></script>

background.ts

//import { helloWorld } from "./background/test";
console.log(">>chrome.runtime.onInstalled")
//helloWorld();

Now the issue is that I cannot use any import's in the background-page script. If I uncomment the lines above, Webpack does produce the right output but but the extension doesn't work anymore

I don't see the console entry:

>>chrome.runtime.onInstalled

Also no errors come up, it just ceases to function...

Any guidance would be greatly appreciated

background.js (first lines of output)

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["background"],{

/***/ "./src/background.ts":
/*!***************************!*\
!*** ./src/background.ts ***!
\***************************/
/*! exports provided: ɵ0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵ0", function() { return ɵ0; });
/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.js");
/* harmony import */ var _background_test__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./background/test */ "./src/background/test.ts");


console.log(">>chrome.runtime.onInstalled");
Object(_background_test__WEBPACK_IMPORTED_MODULE_1__["helloWorld"])();

Edit: added manifest.json

{
  "manifest_version": 2,

  "name": "My extension",
  "description": "Description",
  "version": "1.0",

  "browser_action": {
    "default_icon": "assets/icon.png",
    "default_popup": "index.html"
  },
  "background": {
    "page": "background.html",
    "persistent": false
  },
  "permissions": [
    "identity",
    "storage",
    "<all_urls>"
  ],

  "icons": { 
    "256": "assets/logo.png" 
  }
}

Edit: added angular.json snippet from project property

  "architect": {
    "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "customWebpackConfig": {
          "path": "./custom-webpack.config.js"
        },
        ...
     }
 }
Ropstah
  • 17,538
  • 24
  • 120
  • 194
  • There's nothing special about the background page in that regard so I guess you're looking at the wrong console: [Where to read console messages from background.js in a Chrome extension?](https://stackoverflow.com/a/10258029). In case my guess is wrong show the `background` section of your manifest.json, both the source and the compiled one - you probably use `scripts` but here you need `"page": "background.html"` – wOxxOm Jun 07 '20 at 11:17
  • I tried to be very explicit in that I use a `background-page`. It also all works _just not when I uncomment the `import`(ed) part(s)_ – Ropstah Jun 07 '20 at 11:24
  • > "so I guess you're looking at the wrong console" - maybe it should, maybe it shouldn't use `chrome.extension.getBackgroundPage()`.console but that's not the issue. Problem is that adding any `import` invalidates the entire background-page but I don't see why... Thanks for the comment though. – Ropstah Jun 07 '20 at 11:27
  • 1) It might be helpful to see more of your webpack config. 2) It's best to show the actual excerpt of manifest because "background page" is an umbrella term for background scripts since they automatically create a dummy background page. I'm still not convinced your manifest is using "page". Judging by `entrypoint` it's using `scripts` which is wrong. 3) The wrong console problem is not related to the use of chrome.extension.getBackgroundPage, it's about which devtools you're using to view the console - many people open devtools of a tab. – wOxxOm Jun 07 '20 at 11:43
  • 1) Added `angular.json` which is where Webpack configuration resides, the original snippet was the "extra entrypoint" required for background page, 2) Added (i really use background page). 3) Fair enough, I'm opening background page console via extensions page. – Ropstah Jun 07 '20 at 12:12
  • Those are fine. Looking at the output background.js I see it's a standard JS script, not a module. It means you don't need "page" mode, you can use the standard scripts mode since your webpack produces a standard js, not a ES module. – wOxxOm Jun 07 '20 at 12:45
  • It's not using "page" mode to load the scripts as ES modules... Anyway I tried changing it to use `scripts:["background.js", "runtime.js"]` instead of `page:..` but this doesn't help. It works if I don't use any `import`s, it fails as soon as I uncomment the `helloWorld` lines – Ropstah Jun 08 '20 at 17:55
  • Er, we're going in semantic circles. Might be much faster if you share the entire project or at least the final extension in a zip. – wOxxOm Jun 09 '20 at 04:26
  • Hmm, so when boiled down it does work as expected: http://www.filedropper.com/typescript-background-stack-sample ... So it must be something in the rest of my app, it's so strange though that it just works and only the uncommenting of those specific lines breaks everything... – Ropstah Jun 09 '20 at 22:55
  • Ok it seems I was using `async` methods in the background scripts... This is a no go failing silently. Thanks for sticking with me though wOxxOm hehe – Ropstah Jun 09 '20 at 23:21

0 Answers0