Web Extension Background Logger
What
Log centralization for you Web/Chrome Extension. Compatible with every browser extension : Chrome, Firefox, Safari, Edge.
Why
When you develop your Web Extension, you have to keep an eye on multiple consoles and logs from :
- Background script.
- Content script.
- Popup page (either page action or browser action).
- Option page.
This webpack plugin allows you to centralize all logs in the background page console.
Get Started
First, install Web Extension Background Logger :
# npm npm i -D webpack-webextension-background-logger # yarn yarn add -D webpack-webextension-background-logger
Add to your Webpack config :
const BackgroundLogger = moduleexports = // your webpack config // ... plugins:
Web Extension Background Logger will look for an entry named background
by default, but you can customize this :
backgroundEntry: 'main'
Usage
Now, instead of using good old console.log
, simply use console.bg
:
console
This will print your log in the background page console.
console.bg
Types for If you use TypeScript, or type check your JavaScript (like this project does), you might want to tell the compiler that console.bg
exists.
To do this, include in a declaration file (typings.d.ts
for example) at the root of your project :
///
Or you can add to your tsonfig.json
:
Production build
For production builds, you can opt out of background logger and revert to plain console.log
statements :
revertToLog: true
This will simply remove Background Logger from your build and rewrite every console.bg
statement into console.log
statement.