mirror of
https://github.com/gorhill/uBlock.git
synced 2024-07-19 19:52:51 +02:00
684 lines
21 KiB
JavaScript
684 lines
21 KiB
JavaScript
/*******************************************************************************
|
|
|
|
uBlock Origin - a browser extension to block requests.
|
|
Copyright (C) 2014-present Raymond Hill
|
|
|
|
This program is free software: you can redistribute it and/or modify
|
|
it under the terms of the GNU General Public License as published by
|
|
the Free Software Foundation, either version 3 of the License, or
|
|
(at your option) any later version.
|
|
|
|
This program is distributed in the hope that it will be useful,
|
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
GNU General Public License for more details.
|
|
|
|
You should have received a copy of the GNU General Public License
|
|
along with this program. If not, see {http://www.gnu.org/licenses/}.
|
|
|
|
Home: https://github.com/gorhill/uBlock
|
|
*/
|
|
|
|
/* jshint esversion:11 */
|
|
|
|
'use strict';
|
|
|
|
/******************************************************************************/
|
|
|
|
/// name css-specific-procedural
|
|
|
|
/******************************************************************************/
|
|
|
|
// Important!
|
|
// Isolate from global scope
|
|
(function() {
|
|
|
|
/******************************************************************************/
|
|
|
|
// $rulesetId$
|
|
|
|
const argsMap = new Map(self.$argsMap$);
|
|
|
|
const hostnamesMap = new Map(self.$hostnamesMap$);
|
|
|
|
/******************************************************************************/
|
|
|
|
const addStylesheet = text => {
|
|
try {
|
|
const sheet = new CSSStyleSheet();
|
|
sheet.replace(`@layer{${text}}`);
|
|
document.adoptedStyleSheets = [
|
|
...document.adoptedStyleSheets,
|
|
sheet
|
|
];
|
|
} catch(ex) {
|
|
}
|
|
};
|
|
|
|
const nonVisualElements = {
|
|
script: true,
|
|
style: true,
|
|
};
|
|
|
|
// 'P' stands for 'Procedural'
|
|
|
|
class PSelectorTask {
|
|
begin() {
|
|
}
|
|
end() {
|
|
}
|
|
}
|
|
|
|
class PSelectorHasTextTask extends PSelectorTask {
|
|
constructor(task) {
|
|
super();
|
|
let arg0 = task[1], arg1;
|
|
if ( Array.isArray(task[1]) ) {
|
|
arg1 = arg0[1]; arg0 = arg0[0];
|
|
}
|
|
this.needle = new RegExp(arg0, arg1);
|
|
}
|
|
transpose(node, output) {
|
|
if ( this.needle.test(node.textContent) ) {
|
|
output.push(node);
|
|
}
|
|
}
|
|
}
|
|
|
|
class PSelectorIfTask extends PSelectorTask {
|
|
constructor(task) {
|
|
super();
|
|
this.pselector = new PSelector(task[1]);
|
|
}
|
|
transpose(node, output) {
|
|
if ( this.pselector.test(node) === this.target ) {
|
|
output.push(node);
|
|
}
|
|
}
|
|
}
|
|
PSelectorIfTask.prototype.target = true;
|
|
|
|
class PSelectorIfNotTask extends PSelectorIfTask {
|
|
}
|
|
PSelectorIfNotTask.prototype.target = false;
|
|
|
|
class PSelectorMatchesCSSTask extends PSelectorTask {
|
|
constructor(task) {
|
|
super();
|
|
this.name = task[1].name;
|
|
this.pseudo = task[1].pseudo ? `::${task[1].pseudo}` : null;
|
|
let arg0 = task[1].value, arg1;
|
|
if ( Array.isArray(arg0) ) {
|
|
arg1 = arg0[1]; arg0 = arg0[0];
|
|
}
|
|
this.value = new RegExp(arg0, arg1);
|
|
}
|
|
transpose(node, output) {
|
|
const style = window.getComputedStyle(node, this.pseudo);
|
|
if ( style !== null && this.value.test(style[this.name]) ) {
|
|
output.push(node);
|
|
}
|
|
}
|
|
}
|
|
|
|
class PSelectorMatchesMediaTask extends PSelectorTask {
|
|
constructor(task) {
|
|
super();
|
|
this.mql = window.matchMedia(task[1]);
|
|
if ( this.mql.media === 'not all' ) { return; }
|
|
this.mql.addEventListener('change', ( ) => {
|
|
if ( typeof vAPI !== 'object' ) { return; }
|
|
if ( vAPI === null ) { return; }
|
|
const filterer = vAPI.domFilterer && vAPI.domFilterer.proceduralFilterer;
|
|
if ( filterer instanceof Object === false ) { return; }
|
|
filterer.onDOMChanged([ null ]);
|
|
});
|
|
}
|
|
transpose(node, output) {
|
|
if ( this.mql.matches === false ) { return; }
|
|
output.push(node);
|
|
}
|
|
}
|
|
|
|
class PSelectorMatchesPathTask extends PSelectorTask {
|
|
constructor(task) {
|
|
super();
|
|
let arg0 = task[1], arg1;
|
|
if ( Array.isArray(task[1]) ) {
|
|
arg1 = arg0[1]; arg0 = arg0[0];
|
|
}
|
|
this.needle = new RegExp(arg0, arg1);
|
|
}
|
|
transpose(node, output) {
|
|
if ( this.needle.test(self.location.pathname + self.location.search) ) {
|
|
output.push(node);
|
|
}
|
|
}
|
|
}
|
|
|
|
class PSelectorMinTextLengthTask extends PSelectorTask {
|
|
constructor(task) {
|
|
super();
|
|
this.min = task[1];
|
|
}
|
|
transpose(node, output) {
|
|
if ( node.textContent.length >= this.min ) {
|
|
output.push(node);
|
|
}
|
|
}
|
|
}
|
|
|
|
class PSelectorOthersTask extends PSelectorTask {
|
|
constructor() {
|
|
super();
|
|
this.targets = new Set();
|
|
}
|
|
begin() {
|
|
this.targets.clear();
|
|
}
|
|
end(output) {
|
|
const toKeep = new Set(this.targets);
|
|
const toDiscard = new Set();
|
|
const body = document.body;
|
|
let discard = null;
|
|
for ( let keep of this.targets ) {
|
|
while ( keep !== null && keep !== body ) {
|
|
toKeep.add(keep);
|
|
toDiscard.delete(keep);
|
|
discard = keep.previousElementSibling;
|
|
while ( discard !== null ) {
|
|
if (
|
|
nonVisualElements[discard.localName] !== true &&
|
|
toKeep.has(discard) === false
|
|
) {
|
|
toDiscard.add(discard);
|
|
}
|
|
discard = discard.previousElementSibling;
|
|
}
|
|
discard = keep.nextElementSibling;
|
|
while ( discard !== null ) {
|
|
if (
|
|
nonVisualElements[discard.localName] !== true &&
|
|
toKeep.has(discard) === false
|
|
) {
|
|
toDiscard.add(discard);
|
|
}
|
|
discard = discard.nextElementSibling;
|
|
}
|
|
keep = keep.parentElement;
|
|
}
|
|
}
|
|
for ( discard of toDiscard ) {
|
|
output.push(discard);
|
|
}
|
|
this.targets.clear();
|
|
}
|
|
transpose(candidate) {
|
|
for ( const target of this.targets ) {
|
|
if ( target.contains(candidate) ) { return; }
|
|
if ( candidate.contains(target) ) {
|
|
this.targets.delete(target);
|
|
}
|
|
}
|
|
this.targets.add(candidate);
|
|
}
|
|
}
|
|
|
|
// https://github.com/AdguardTeam/ExtendedCss/issues/31#issuecomment-302391277
|
|
// Prepend `:scope ` if needed.
|
|
class PSelectorSpathTask extends PSelectorTask {
|
|
constructor(task) {
|
|
super();
|
|
this.spath = task[1];
|
|
this.nth = /^(?:\s*[+~]|:)/.test(this.spath);
|
|
if ( this.nth ) { return; }
|
|
if ( /^\s*>/.test(this.spath) ) {
|
|
this.spath = `:scope ${this.spath.trim()}`;
|
|
}
|
|
}
|
|
qsa(node) {
|
|
if ( this.nth === false ) {
|
|
return node.querySelectorAll(this.spath);
|
|
}
|
|
const parent = node.parentElement;
|
|
if ( parent === null ) { return; }
|
|
let pos = 1;
|
|
for (;;) {
|
|
node = node.previousElementSibling;
|
|
if ( node === null ) { break; }
|
|
pos += 1;
|
|
}
|
|
return parent.querySelectorAll(
|
|
`:scope > :nth-child(${pos})${this.spath}`
|
|
);
|
|
}
|
|
transpose(node, output) {
|
|
const nodes = this.qsa(node);
|
|
if ( nodes === undefined ) { return; }
|
|
for ( const node of nodes ) {
|
|
output.push(node);
|
|
}
|
|
}
|
|
// Helper method for other operators.
|
|
static qsa(node, selector) {
|
|
const parent = node.parentElement;
|
|
if ( parent === null ) { return []; }
|
|
let pos = 1;
|
|
for (;;) {
|
|
node = node.previousElementSibling;
|
|
if ( node === null ) { break; }
|
|
pos += 1;
|
|
}
|
|
return parent.querySelectorAll(
|
|
`:scope > :nth-child(${pos})${selector}`
|
|
);
|
|
}
|
|
}
|
|
|
|
class PSelectorUpwardTask extends PSelectorTask {
|
|
constructor(task) {
|
|
super();
|
|
const arg = task[1];
|
|
if ( typeof arg === 'number' ) {
|
|
this.i = arg;
|
|
} else {
|
|
this.s = arg;
|
|
}
|
|
}
|
|
transpose(node, output) {
|
|
if ( this.s !== '' ) {
|
|
const parent = node.parentElement;
|
|
if ( parent === null ) { return; }
|
|
node = parent.closest(this.s);
|
|
if ( node === null ) { return; }
|
|
} else {
|
|
let nth = this.i;
|
|
for (;;) {
|
|
node = node.parentElement;
|
|
if ( node === null ) { return; }
|
|
nth -= 1;
|
|
if ( nth === 0 ) { break; }
|
|
}
|
|
}
|
|
output.push(node);
|
|
}
|
|
}
|
|
PSelectorUpwardTask.prototype.i = 0;
|
|
PSelectorUpwardTask.prototype.s = '';
|
|
|
|
class PSelectorWatchAttrs extends PSelectorTask {
|
|
constructor(task) {
|
|
super();
|
|
this.observer = null;
|
|
this.observed = new WeakSet();
|
|
this.observerOptions = {
|
|
attributes: true,
|
|
subtree: true,
|
|
};
|
|
const attrs = task[1];
|
|
if ( Array.isArray(attrs) && attrs.length !== 0 ) {
|
|
this.observerOptions.attributeFilter = task[1];
|
|
}
|
|
}
|
|
// TODO: Is it worth trying to re-apply only the current selector?
|
|
handler() {
|
|
const filterer =
|
|
vAPI.domFilterer && vAPI.domFilterer.proceduralFilterer;
|
|
if ( filterer instanceof Object ) {
|
|
filterer.onDOMChanged([ null ]);
|
|
}
|
|
}
|
|
transpose(node, output) {
|
|
output.push(node);
|
|
if ( this.observed.has(node) ) { return; }
|
|
if ( this.observer === null ) {
|
|
this.observer = new MutationObserver(this.handler);
|
|
}
|
|
this.observer.observe(node, this.observerOptions);
|
|
this.observed.add(node);
|
|
}
|
|
}
|
|
|
|
class PSelectorXpathTask extends PSelectorTask {
|
|
constructor(task) {
|
|
super();
|
|
this.xpe = document.createExpression(task[1], null);
|
|
this.xpr = null;
|
|
}
|
|
transpose(node, output) {
|
|
this.xpr = this.xpe.evaluate(
|
|
node,
|
|
XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
|
|
this.xpr
|
|
);
|
|
let j = this.xpr.snapshotLength;
|
|
while ( j-- ) {
|
|
const node = this.xpr.snapshotItem(j);
|
|
if ( node.nodeType === 1 ) {
|
|
output.push(node);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
class PSelector {
|
|
constructor(o) {
|
|
if ( PSelector.prototype.operatorToTaskMap === undefined ) {
|
|
PSelector.prototype.operatorToTaskMap = new Map([
|
|
[ 'has', PSelectorIfTask ],
|
|
[ 'has-text', PSelectorHasTextTask ],
|
|
[ 'if', PSelectorIfTask ],
|
|
[ 'if-not', PSelectorIfNotTask ],
|
|
[ 'matches-css', PSelectorMatchesCSSTask ],
|
|
[ 'matches-media', PSelectorMatchesMediaTask ],
|
|
[ 'matches-path', PSelectorMatchesPathTask ],
|
|
[ 'min-text-length', PSelectorMinTextLengthTask ],
|
|
[ 'not', PSelectorIfNotTask ],
|
|
[ 'others', PSelectorOthersTask ],
|
|
[ 'spath', PSelectorSpathTask ],
|
|
[ 'upward', PSelectorUpwardTask ],
|
|
[ 'watch-attr', PSelectorWatchAttrs ],
|
|
[ 'xpath', PSelectorXpathTask ],
|
|
]);
|
|
}
|
|
this.raw = o.raw;
|
|
this.selector = o.selector;
|
|
this.tasks = [];
|
|
const tasks = [];
|
|
if ( Array.isArray(o.tasks) === false ) { return; }
|
|
for ( const task of o.tasks ) {
|
|
const ctor = this.operatorToTaskMap.get(task[0]);
|
|
if ( ctor === undefined ) { return; }
|
|
tasks.push(new ctor(task));
|
|
}
|
|
// Initialize only after all tasks have been successfully instantiated
|
|
this.tasks = tasks;
|
|
}
|
|
prime(input) {
|
|
const root = input || document;
|
|
if ( this.selector === '' ) { return [ root ]; }
|
|
let selector = this.selector;
|
|
if ( input !== document && /^ [>+~]/.test(this.selector) ) {
|
|
return Array.from(PSelectorSpathTask.qsa(input, this.selector));
|
|
}
|
|
const elems = root.querySelectorAll(selector);
|
|
return Array.from(elems);
|
|
}
|
|
exec(input) {
|
|
let nodes = this.prime(input);
|
|
for ( const task of this.tasks ) {
|
|
if ( nodes.length === 0 ) { break; }
|
|
const transposed = [];
|
|
task.begin();
|
|
for ( const node of nodes ) {
|
|
task.transpose(node, transposed);
|
|
}
|
|
task.end(transposed);
|
|
nodes = transposed;
|
|
}
|
|
return nodes;
|
|
}
|
|
test(input) {
|
|
const nodes = this.prime(input);
|
|
for ( const node of nodes ) {
|
|
let output = [ node ];
|
|
for ( const task of this.tasks ) {
|
|
const transposed = [];
|
|
task.begin();
|
|
for ( const node of output ) {
|
|
task.transpose(node, transposed);
|
|
}
|
|
task.end(transposed);
|
|
output = transposed;
|
|
if ( output.length === 0 ) { break; }
|
|
}
|
|
if ( output.length !== 0 ) { return true; }
|
|
}
|
|
return false;
|
|
}
|
|
}
|
|
PSelector.prototype.operatorToTaskMap = undefined;
|
|
|
|
class PSelectorRoot extends PSelector {
|
|
constructor(o, styleToken) {
|
|
super(o);
|
|
this.budget = 200; // I arbitrary picked a 1/5 second
|
|
this.raw = o.raw;
|
|
this.cost = 0;
|
|
this.lastAllowanceTime = 0;
|
|
this.styleToken = styleToken;
|
|
}
|
|
prime(input) {
|
|
try {
|
|
return super.prime(input);
|
|
} catch (ex) {
|
|
}
|
|
return [];
|
|
}
|
|
}
|
|
|
|
/******************************************************************************/
|
|
|
|
class ProceduralFilterer {
|
|
constructor(selectors) {
|
|
this.selectors = [];
|
|
this.masterToken = this.randomToken();
|
|
this.styleTokenMap = new Map();
|
|
this.styledNodes = new Set();
|
|
this.timer = undefined;
|
|
this.addSelectors(selectors);
|
|
}
|
|
|
|
addSelectors() {
|
|
for ( const selector of selectors ) {
|
|
let style, styleToken;
|
|
if ( selector.action === undefined ) {
|
|
style = 'display:none!important;';
|
|
} else if ( selector.action[0] === 'style' ) {
|
|
style = selector.action[1];
|
|
}
|
|
if ( style !== undefined ) {
|
|
styleToken = this.styleTokenFromStyle(style);
|
|
}
|
|
const pselector = new PSelectorRoot(selector, styleToken);
|
|
this.selectors.push(pselector);
|
|
}
|
|
this.onDOMChanged();
|
|
}
|
|
|
|
commitNow() {
|
|
//console.time('procedural selectors/dom layout changed');
|
|
|
|
// https://github.com/uBlockOrigin/uBlock-issues/issues/341
|
|
// Be ready to unhide nodes which no longer matches any of
|
|
// the procedural selectors.
|
|
const toUnstyle = this.styledNodes;
|
|
this.styledNodes = new Set();
|
|
|
|
let t0 = Date.now();
|
|
|
|
for ( const pselector of this.selectors.values() ) {
|
|
const allowance = Math.floor((t0 - pselector.lastAllowanceTime) / 2000);
|
|
if ( allowance >= 1 ) {
|
|
pselector.budget += allowance * 50;
|
|
if ( pselector.budget > 200 ) { pselector.budget = 200; }
|
|
pselector.lastAllowanceTime = t0;
|
|
}
|
|
if ( pselector.budget <= 0 ) { continue; }
|
|
const nodes = pselector.exec();
|
|
const t1 = Date.now();
|
|
pselector.budget += t0 - t1;
|
|
if ( pselector.budget < -500 ) {
|
|
console.info('uBOL: disabling %s', pselector.raw);
|
|
pselector.budget = -0x7FFFFFFF;
|
|
}
|
|
t0 = t1;
|
|
if ( nodes.length === 0 ) { continue; }
|
|
this.styleNodes(nodes, pselector.styleToken);
|
|
}
|
|
|
|
this.unstyleNodes(toUnstyle);
|
|
}
|
|
|
|
styleTokenFromStyle(style) {
|
|
if ( style === undefined ) { return; }
|
|
let styleToken = this.styleTokenMap.get(style);
|
|
if ( styleToken !== undefined ) { return styleToken; }
|
|
styleToken = this.randomToken();
|
|
this.styleTokenMap.set(style, styleToken);
|
|
addStylesheet(
|
|
`[${this.masterToken}][${styleToken}]\n{${style}}\n`,
|
|
);
|
|
return styleToken;
|
|
}
|
|
|
|
styleNodes(nodes, styleToken) {
|
|
if ( styleToken === undefined ) {
|
|
for ( const node of nodes ) {
|
|
node.textContent = '';
|
|
node.remove();
|
|
}
|
|
return;
|
|
}
|
|
for ( const node of nodes ) {
|
|
node.setAttribute(this.masterToken, '');
|
|
node.setAttribute(styleToken, '');
|
|
this.styledNodes.add(node);
|
|
}
|
|
}
|
|
|
|
unstyleNodes(nodes) {
|
|
for ( const node of nodes ) {
|
|
if ( this.styledNodes.has(node) ) { continue; }
|
|
node.removeAttribute(this.masterToken);
|
|
}
|
|
}
|
|
|
|
randomToken() {
|
|
const n = Math.random();
|
|
return String.fromCharCode(n * 25 + 97) +
|
|
Math.floor(
|
|
(0.25 + n * 0.75) * Number.MAX_SAFE_INTEGER
|
|
).toString(36).slice(-8);
|
|
}
|
|
|
|
onDOMChanged() {
|
|
if ( this.timer !== undefined ) { return; }
|
|
this.timer = self.requestAnimationFrame(( ) => {
|
|
this.timer = undefined;
|
|
this.commitNow();
|
|
});
|
|
}
|
|
}
|
|
|
|
/******************************************************************************/
|
|
|
|
let hn;
|
|
try { hn = document.location.hostname; } catch(ex) { }
|
|
const selectors = [];
|
|
while ( hn ) {
|
|
if ( hostnamesMap.has(hn) ) {
|
|
let argsHashes = hostnamesMap.get(hn);
|
|
if ( typeof argsHashes === 'number' ) { argsHashes = [ argsHashes ]; }
|
|
for ( const argsHash of argsHashes ) {
|
|
const details = argsMap.get(argsHash);
|
|
if ( details.n && details.n.includes(hn) ) { continue; }
|
|
selectors.push(...details.a);
|
|
}
|
|
}
|
|
if ( hn === '*' ) { break; }
|
|
const pos = hn.indexOf('.');
|
|
if ( pos !== -1 ) {
|
|
hn = hn.slice(pos + 1);
|
|
} else {
|
|
hn = '*';
|
|
}
|
|
}
|
|
|
|
const proceduralSelectors = [];
|
|
const styleSelectors = [];
|
|
for ( const selector of selectors ) {
|
|
if ( selector.cssable ) {
|
|
styleSelectors.push(selector);
|
|
} else {
|
|
proceduralSelectors.push(selector);
|
|
}
|
|
}
|
|
|
|
/******************************************************************************/
|
|
|
|
// Declarative selectors
|
|
|
|
if ( styleSelectors.length !== 0 ) {
|
|
const cssRuleFromProcedural = details => {
|
|
const { tasks, action } = details;
|
|
let mq;
|
|
if ( tasks !== undefined ) {
|
|
if ( tasks.length > 1 ) { return; }
|
|
if ( tasks[0][0] !== 'matches-media' ) { return; }
|
|
mq = tasks[0][1];
|
|
}
|
|
let style;
|
|
if ( Array.isArray(action) ) {
|
|
if ( action[0] !== 'style' ) { return; }
|
|
style = action[1];
|
|
}
|
|
if ( mq === undefined && style === undefined ) { return; }
|
|
if ( mq === undefined ) {
|
|
return `${details.selector}\n{${style}}`;
|
|
}
|
|
if ( style === undefined ) {
|
|
return `@media ${mq} {\n${details.selector}\n{display:none!important;}\n}`;
|
|
}
|
|
return `@media ${mq} {\n${details.selector}\n{${style}}\n}`;
|
|
};
|
|
const sheetText = [];
|
|
for ( const selector of styleSelectors ) {
|
|
const ruleText = cssRuleFromProcedural(selector);
|
|
if ( ruleText === undefined ) { continue; }
|
|
sheetText.push(ruleText);
|
|
}
|
|
if ( sheetText.length !== 0 ) {
|
|
addStylesheet(sheetText.join('\n'));
|
|
}
|
|
}
|
|
|
|
/******************************************************************************/
|
|
|
|
// Procedural selectors
|
|
|
|
if ( proceduralSelectors.length !== 0 ) {
|
|
const filterer = new ProceduralFilterer(proceduralSelectors);
|
|
const observer = new MutationObserver(mutations => {
|
|
let domChanged = false;
|
|
for ( let i = 0; i < mutations.length && !domChanged; i++ ) {
|
|
const mutation = mutations[i];
|
|
for ( const added of mutation.addedNodes ) {
|
|
if ( added.nodeType !== 1 ) { continue; }
|
|
domChanged = true;
|
|
}
|
|
for ( const removed of mutation.removedNodes ) {
|
|
if ( removed.nodeType !== 1 ) { continue; }
|
|
domChanged = true;
|
|
}
|
|
}
|
|
if ( domChanged === false ) { return; }
|
|
filterer.onDOMChanged();
|
|
});
|
|
observer.observe(document, {
|
|
childList: true,
|
|
subtree: true,
|
|
});
|
|
}
|
|
|
|
/******************************************************************************/
|
|
|
|
argsMap.clear();
|
|
hostnamesMap.clear();
|
|
|
|
/******************************************************************************/
|
|
|
|
})();
|
|
|
|
/******************************************************************************/
|