https://github.com/ecmadao/chrome-utils
Some utils that help to build chrome extension
https://github.com/ecmadao/chrome-utils
chrome chrome-extension chrome-i18n chrome-runtime chrome-storage
Last synced: about 1 year ago
JSON representation
Some utils that help to build chrome extension
- Host: GitHub
- URL: https://github.com/ecmadao/chrome-utils
- Owner: ecmadao
- License: mit
- Created: 2017-04-27T02:34:19.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2022-07-12T04:04:08.000Z (almost 4 years ago)
- Last Synced: 2025-04-11T00:12:09.811Z (about 1 year ago)
- Topics: chrome, chrome-extension, chrome-i18n, chrome-runtime, chrome-storage
- Language: JavaScript
- Size: 59.6 KB
- Stars: 7
- Watchers: 2
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# chrome-utils
[](https://badge.fury.io/js/chrome-utils) [](https://travis-ci.org/ecmadao/chrome-utils) [](https://coveralls.io/github/ecmadao/chrome-utils?branch=master) [](http://standardjs.com) [](https://www.npmjs.com/package/chrome-utils) [](https://raw.githubusercontent.com/ecmadao/chrome-utils/master/LICENSE)
Some utils that help to build chrome extension. **HAVE NO DEPENDENCIES**.
## Usage
```bash
$ npm i chrome-utils --save
```
```javascript
// es6
import { store, message, i18n } from 'chrome-utils';
// es5
const store = require('chrome-utils').store;
```
## Api
### store
`chrome.storage` API is anti-human, for example, if you saved a non-plain object to store, `{a: {b: 1, c: {d: 2}}}`, then how to directly get the value of `d` from it?
One more question, if you have already save `{a1: {b: 1}, a2: {c: 2}}` to store, then wanna update `b` to `2`, then how to do it? If we use raw API like `chrome.storage.sync.set({a1: {b: 2}})`, then we'll find `a2` was totally disappeard!
Actually, by raw `chrome.storage` API:
- you can only get the top key-value
- you can only get `a` but not `a.b.d`.
- if you wanna update a value in a object, you must get it from store first, then update the whole object, finally, save it to store.
WTF?
---
#### get & set
If target value exist, then auto to merge it
```javascript
store.get(key[, resolve, reject]);
store.set(key, value[, options]);
// usage example
store.set('a.c', 1);
store.get('a'); // {c: 1}
store.set('a.b', 2);
store.get('a'); // inject b, get {b: 2, c: 1}
store.get('a.b'); // directly get b, return 2
store.set('a.b', 3);
store.get('a.b'); // update, get 3
```
#### listen
```javascript
store.listen(...listeners);
// listener
const listener = {
key, // the key you wanna to listen change
callback
};
const listeners = [listener1, listener2, listener3];
```
#### clear & remove
```javascript
store.clear();
store.remove(key[, callback]);
// example
store.set({a: {b: 1, c: 2}});
store.get('a'); // {b: 1, c: 2}
store.remove('a.b');
// after remove
store.get('a'); // => {b: null, c: 2}
store.remove('a');
// after remove
store.get('a'); // => null
```
### storeAsync
Uses promises instead of callbacks. Plays well with `async/await`.
```javascript
import { storeAsync as store } from 'chrome-utils';
// with promises
store.set('a', "xxx").then(e => console.log("done"))
store.get('a').then(e => console.log(e))
store.remove('a').then(e => console.log("done"))
store.clear().then(e => console.log("done"))
// with async/await
(async function() {
await store.set("b", "yyy")
const b = await store.get("b")
console.debug("b", b)
})()
```
### message
Compare with raw API `chrome.runtime.onMessage` & `chrome.runtime.sendMessage`, it:
- force user add `type` for each msg
- if msg listener as a `type` key, it will only response to target type msg
#### send message
```javascript
message.sendMsg(msg[, callback]);
// msg
const msg = {
type, // required
data
};
```
#### send msg to tabs
```javascript
message.sendToTabs(msg[, query]);
```
#### register listener
```javascript
message.register(...listeners);
// listener
const listener = {
callback, // required,
type // not required, but if you use it, this listener will only listen same type msg
};
```
### i18n
#### get message
```javascript
i18n.get(...args);
```
## Todo
- [x] remove `merge` api
- [ ] expire time for store
- [x] test
- [x] more use case
## Contributors
- [berstend](https://github.com/berstend)
## License
[MIT License](./LICENSE)