0

I'm new to extension development and not good at bundlers so I'm using chrome-extension-webpack-boilerplate to start developing my extension.

I want to make a simple timer extension, so after following the bolirplate repository's instructions, I downloaded a module called tiny-timer with yarn add tiny-timer. Then changed the popup.html and popup.js (added code from the tiny-timer repo that works fine on RunKit).

manifest.json:

{
  "name": "Chrome Timer Extension",
  "options_page": "options.html",
  "background": {
    "page": "background.html"
  },
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": "icon-34.png"
  },
  "icons": {
    "128": "icon-128.png"
  },
  "manifest_version": 2,
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}

popup.js

import "../css/popup.css";
const Timer = require("tiny-timer");
console.log(Timer);
const timer = new Timer();

popup.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <h1 id="timer"></h1>
  <button id="pause">Pause</button>
  <button id="reset">Reset</button>
  <button id="continue">Go</button>
</body>
</html>

Popup output:

Module
    >default: class Timer
    Symbol(Symbol.toStringTag): "Module"
    __esModule: true
    >[[Prototype]]: Object

Uncaught TypeError: Timer is not a constructor
    at eval (popup.js?dffe:3)
    at Module../src/js/popup.js (popup.bundle.js:1271)
    at __webpack_require__ (popup.bundle.js:727)
    at fn (popup.bundle.js:101)
    at Object.0 (popup.bundle.js:1286)
    at __webpack_require__ (popup.bundle.js:727)
    at popup.bundle.js:794
    at popup.bundle.js:797
Alk
  • 313
  • 4
  • 13
  • Generally npm packages can't be used in a browser as is. Why do you need a package for `setInterval`? – wOxxOm Aug 07 '21 at 18:57
  • @wOxxOm I practiced the basics and just wanted to learn how to develop an extension with an npm package as well. This was the first thing came to my mind and sounded easy – Alk Aug 07 '21 at 19:02
  • See [Is it possible to require npm modules in a chrome extension ?](https://stackoverflow.com/q/43684452) – wOxxOm Aug 07 '21 at 19:05

0 Answers0