Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add actionsBlacklist and actionsWhitelist config options #79

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,8 @@ If you do not know what [Redux DevTools](https://github.com/gaearon/redux-devtoo
- state, transformedState - Redux state objects
- **deserializeAction(action): transformedAction** (*function*) - optional transformation of actions deserialized from debug session (useful if actions are not plain object. Example: immutable-js action payload)
- action, transformedAction - Redux action objects
- **actionsBlacklist** (*array*) - actions to be hidden in DevTools. Overwrites corresponding global setting in the options page.
- **actionsWhitelist** (*array*) - all other actions will be hidden in DevTools. Overwrites corresponding global setting in the options page.

## Examples
Open these urls to test the extension:
Expand All @@ -106,7 +108,8 @@ Also you may run them from `./examples` folder (on port 4001 and 4002 by default
- If something goes wrong, [open an issue](https://github.com/zalmoxisus/redux-devtools-extension/issues) or tweet me: [@mdiordiev](https://twitter.com/mdiordiev).

#### How to filter actions
On the options page you may enable actions filtering and specify either actions to be hidden or shown in DevTools. If the latter is specified, other than those actions will be hidden.
On the options page you may enable actions filtering and specify either actions to be hidden or shown in DevTools. If the latter is specified, other than those actions will be hidden.
You can overwrite theese settings for an individual project using `actionsBlacklist` and `actionsWhitelist` [config options](#API).
#### How to disable/enable it in production
On the options page you may enable the extension to be injected in all pages or you may specify the pages urls to be injected in. Use regex values and new line as a separator.
#### How to open Redux DevTools in a new window
Expand Down
22 changes: 17 additions & 5 deletions src/browser/extension/inject/pageScript.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,20 @@ import configureStore from '../../../app/store/configureStore';
import { isAllowed } from '../options/syncOptions';
import notifyErrors from '../utils/notifyErrors';

const actionsArrToReg = (arr) => arr ? arr.join('|') : null;

window.devToolsExtension = function(config = {}) {
let store = {};
if (!window.devToolsOptions) window.devToolsOptions = {};

let localFilter;
if (config.actionsBlacklist || config.actionsWhitelist) {
localFilter = {
whitelist: actionsArrToReg(config.actionsWhitelist),
blacklist: actionsArrToReg(config.actionsBlacklist)
};
}

let shouldSerialize = false;
let lastAction;
let errorOccurred = false;
Expand Down Expand Up @@ -75,18 +86,19 @@ window.devToolsExtension = function(config = {}) {
}

function isFiltered(action) {
if (!window.devToolsOptions.filter) return false;
const { whitelist, blacklist } = window.devToolsOptions;
if (!localFilter && !window.devToolsOptions.filter) return false;
const { whitelist, blacklist } = localFilter || window.devToolsOptions;
return (
whitelist && !action.type.match(whitelist) ||
blacklist && action.type.match(blacklist)
);
}

function addFilter(state) {
if (window.devToolsOptions.filter) {
if (window.devToolsOptions.whitelist) state.whitelist = [window.devToolsOptions.whitelist];
else if (window.devToolsOptions.blacklist) state.blacklist = [window.devToolsOptions.blacklist];
if (localFilter || window.devToolsOptions.filter) {
const { whitelist, blacklist } = localFilter || window.devToolsOptions;
if (whitelist) state.whitelist = [whitelist];
else if (blacklist) state.blacklist = [blacklist];
}
}

Expand Down