mirror of
https://github.com/gorhill/uBlock.git
synced 2026-03-11 09:04:36 +00:00
9339a75952
This feature is hidden behind the "Developer mode" setting in the dashboard. When "Developer mode" is enabled, a tab named "Develop" will become available in the dashboard. This tab is meant to contain tools for technical users. At the moment, the "Develop" pane allows to create custom DNR rules through a (CodeMirror-based) editor. For the sake of convenience, the DNR rule must be entered in YAML-like format. The format is not really full compliant YAML, just YAML-like, and very strict in order to ensure the parser stays simple enough. Lines starting with `#` are comments and will be ignored by the parser. Any line which do not match the parser's expectation will be marked as invalid, and the whole DNR rule containing such invalid lines will be discarded. There must not be empty lines inside a rule definition. Each DNR rule must be separated with a `---` line, which is known as a YAML document separator. String values must not be quoted, otherwise the quotes will be considered part of the value. There is one exception: `''` will be parsed as "an empty string". The editor will attempt to auto-complete known DNR keywords. That feature will improve over time. Though the parser will identify some errors, not all invalid DNR rules are currently identified by the parser, and these will be reported when the rules are registered through the DNR API. Better identifying invalid DNR rules at edit time will improve over time. The editor will report `regexFilter` values which are not supported by the DNR engine on the current platform. The editor reacts to instances of `regexFilter: ...` to report whether a regex value is supported. This means you can test for a regex value by using `# regexFilter: ...` so that you do not have to create an actual DNR rules just for the sake of testing. Custom DNR rules can be exported into a JSON file (a format known by the DNR API as a "static ruleset"). JSON-based ruleset can be imported, the content will be converted to YAML-like syntax. The editor will attempt to convert to YAML pasted content which can be JSON-parsed. It's possible to paste partially or wholly JSON-based rulesets. When disabling "Developer mode", all custom DNR rules will be unregistered from the DNR API. The DNR rules content will be left intact in such case. Existing DNR rules will be registered into the DNR API when re-enabling "Developer mode". Administrators can prevent "Developer mode" from being enabled by adding `develop` token to `disabledFeatures` setting. Related discussion: https://github.com/uBlockOrigin/uBOL-home/discussions/323 The main motivation is to give list maintainers a tool to assist with resolving filter issues. Custom DNR rules can assist in crafting and validating filters meant to work with uBOL. A secondary motivation is to provide technical users the ability to further customize their content blocker. More conveniences will be added over time, this is a first version.
157 lines
3.6 KiB
HTML
157 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
|
|
Requires a local server in root of uBlock repo:
|
|
python3 -m http.server
|
|
|
|
Then load the following URL in the browser:
|
|
http://localhost:8000/tools/jsonpath-tool.html
|
|
|
|
-->
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>JSONPath tool</title>
|
|
<style>
|
|
body {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
height: 100vh;
|
|
margin: 0;
|
|
padding: 0.5em;
|
|
width: 100vw;
|
|
}
|
|
h2 {
|
|
margin: 0;
|
|
}
|
|
main {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
gap: 0.5em;
|
|
}
|
|
#json-data {
|
|
box-sizing: border-box;
|
|
min-height: 20vh;
|
|
resize: vertical;
|
|
}
|
|
#jsonpath-input {
|
|
font-size: 16px;
|
|
}
|
|
#jsonpath-result {
|
|
background-color: #eee;
|
|
flex-grow: 1;
|
|
white-space: pre-wrap;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h2>uBO-flavored JSONPath tool</h2>
|
|
<main>
|
|
<textarea id="json-data" placeholder="JSON data" spellcheck="false">{
|
|
"store": {
|
|
"book": [
|
|
{ "category": "reference",
|
|
"author": "Nigel Rees",
|
|
"title": "Sayings of the Century",
|
|
"price": 8.95
|
|
},
|
|
{ "category": "fiction",
|
|
"author": "Evelyn Waugh",
|
|
"title": "Sword of Honour",
|
|
"price": 12.99
|
|
},
|
|
{ "category": "fiction",
|
|
"author": "Herman Melville",
|
|
"title": "Moby Dick",
|
|
"isbn": "0-553-21311-3",
|
|
"price": 8.99
|
|
},
|
|
{ "category": "fiction",
|
|
"author": "J. R. R. Tolkien",
|
|
"title": "The Lord of the Rings",
|
|
"isbn": "0-395-19395-8",
|
|
"price": 22.99
|
|
}
|
|
],
|
|
"bicycle": {
|
|
"color": "red",
|
|
"price": 19.95
|
|
}
|
|
}
|
|
}</textarea>
|
|
<input id="jsonpath-input" placeholder="JSON path expression" spellcheck="false" value="$..book[?@.price<10]" />
|
|
<div id="jsonpath-result"> </div>
|
|
</main>
|
|
|
|
<script type="module">
|
|
// Requires a local server in root of repo:
|
|
// python3 -m http.server
|
|
//
|
|
// Then load the following URL in the browser:
|
|
// http://localhost:8000/tools/jsonpath-tool.html
|
|
|
|
import { JSONPath } from '../src/js/jsonpath.js';
|
|
|
|
function readJSON() {
|
|
const textarea = document.querySelector('#json-data');
|
|
try {
|
|
jsonData = JSON.parse(textarea.value);
|
|
} catch {
|
|
jsonData = {};
|
|
}
|
|
if ( typeof jsonData !== 'object' || jsonData === null ) {
|
|
jsonData = {};
|
|
}
|
|
}
|
|
|
|
function formatResult(a) {
|
|
if ( a === undefined ) { return 'undefined'; }
|
|
if ( jsonp.valid === false ) { return 'bad expression'; }
|
|
if ( Array.isArray(a) === false ) {
|
|
return JSON.stringify(a, null, 2);
|
|
}
|
|
const out = [];
|
|
for ( const i of a ) {
|
|
out.push(`[ ${i.map(j => JSON.stringify(j)).join(', ')} ]`);
|
|
}
|
|
return out.join('\n');
|
|
}
|
|
|
|
function process() {
|
|
const input = document.querySelector('#jsonpath-input');
|
|
const jsonpath = input.value;
|
|
jsonp.compile(jsonpath);
|
|
const result = formatResult(jsonp.evaluate(jsonData));
|
|
const div = document.querySelector('#jsonpath-result');
|
|
div.textContent = result;
|
|
}
|
|
|
|
const jsonp = new JSONPath();
|
|
let jsonData = {};
|
|
|
|
{
|
|
const textarea = document.querySelector('#json-data');
|
|
textarea.addEventListener('input', ( ) => {
|
|
readJSON();
|
|
process();
|
|
});
|
|
}
|
|
|
|
{
|
|
const input = document.querySelector('#jsonpath-input');
|
|
input.addEventListener('input', ( ) => {
|
|
process();
|
|
});
|
|
}
|
|
|
|
readJSON();
|
|
process();
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|