Modern chrome extension development with ESM
- Transform all chrome extension APIs into Promise-style.
- Hot reloader for development installation.
- Load content script programmatically.
- Helper to convert callback-style function to Promise-style.
yarn add krome
Recommand using create-krome-app to start your project.
background.js
import 'krome';
background.html
<script type="module" src="background.js"></script>
manifest.json
"background": {
"page": "background.html",
"persistent": false
},
"browser_action": {
"default_title": "Click to launch",
"name": "Click to launch"
},
"permissions": ["activeTab"],
"content_scripts": [
{
"matches": ["https://*/*"],
"js": ["content.js"]
}
],
A singleton object with promise-style chrome extension APIs and script loading feature.
All chrome.*.*
APIs are traversed and transformed programmatically by toPromise
. Just repalce chrome
with krome
to use it, e.g.
import { krome } from 'krome';
krome.tabs.query<chrome.tabs.Tab[]>({}).then(() => {
// do something
});
If you found some API not working correctly, please publish an issue.
Sometimes we don't want to load the content script automatically for the matches. Use this setting to load content script manually. Require browser_action
or commands
in manifest.json
.
Setter to enable/disable hot reloader. Default enabled.
Note: this will not take effect for production installation.
import { krome } from 'krome';
// To disable hot reloader
krome.hotReload = false;
Convert the legacy callback-based APIs to Promise-based.
See this introductory article: A simple technique to promisify Chrome extension API.
import { toPromise } from 'krome';
toPromise(chrome.tabs.query)({}).then(() => {
// do something
});
yarn start
yarn bump
yarn build
yarn pub
Give a ⭐️ if this project helped you!