A chrome extension help to import pkg in devtools

Latest Version

Version

1.0.4

Update

November 24, 2024

Size

18.49KiB

Developer

Import Pkg In Devtools Extension

A chrome plugin that helps import npm packages into devtools for easier debugging. The package contents are attached to the window.lucky variable by default.You can also specify to mount it on a different global variable. You also can specify different package version.

Feature:
- Import npm package into devtool
- Specify package version. (default latest version)
- Specify attached gloabal variable. (default window.lucky)
- Multiple Instance. (by specify different global variable)

Example: In Chrome devtools
- Basic:
$npm('dayjs') // you can use window.lucky
- Specify package version
$npm('[email protected]') //
- Specify attached gloabal variable
$npm('[email protected]', 'MyDayJs') // you can use window.MyDayJs
- Multiple Instance
$npm('[email protected]', 'MyDayJs1') // you can use window.MyDayJs1
$npm('[email protected]', 'MyDayJs2') // you can use window.MyDayJs2

Notice: since this chrome extension old version may not work in some website's (eg. npmjs.com) devtools since these website has some csp policy. To workaround this, we add a feature to remove the csp policy by default. Currently, this feature is not able to switch on/off now, but i may release it as soon as possible

chrome 插件，帮助将 npm 包引入到 devtools 中，便于调试。包内容默认会挂到 window.lucky变量上。
比如：
$npm('dayjs') // 则可以使用 lucky().format('YYYY-MM-DD')
$npm('number-precision') // 则可以使用 lucky.times(1, 2)

也可以自己指定名字，比如：

$npm('dayjs', 'dayjs') // 则可以使用 dayjs().format('YYYY-MM-DD')
$npm('number-precision', 'NP') // 则可以使用 NP.times(1, 2)

Source Manifest.json

{
"update_url": "https://clients2.google.com/service/update2/crx",
"description":"A chrome extension help to import pkg in devtools",
"version":"1.0.4",
"manifest_version":3,
"name":"Import Pkg In Devtools",
"icons":{"128":"icon-128.png"},
"options_page":"options.html",
"background":{"service_worker":"background.bundle.js"},
"content_scripts":[{"world":"MAIN",
"matches":["http://*/*",
"https://*/*",
""],
"js":["contentScript.bundle.js"]}],
"declarative_net_request":{"rule_resources":[{"id":"remove_csp",
"enabled":true,
"path":"rules/remove_csp.json"}]},
"permissions":["declarativeNetRequest",
"declarativeNetRequestFeedback"],
"host_permissions":[""],
"web_accessible_resources":[{"resources":["icon-128.png",
"icon-32.png"],
"matches":[]}]}

Download CRX(18.49KiB)