| OLD | NEW |
| 1 /* | 1 /* |
| 2 * This file is part of Adblock Plus <https://adblockplus.org/>, | 2 * This file is part of Adblock Plus <https://adblockplus.org/>, |
| 3 * Copyright (C) 2006-present eyeo GmbH | 3 * Copyright (C) 2006-present eyeo GmbH |
| 4 * | 4 * |
| 5 * Adblock Plus is free software: you can redistribute it and/or modify | 5 * Adblock Plus is free software: you can redistribute it and/or modify |
| 6 * it under the terms of the GNU General Public License version 3 as | 6 * it under the terms of the GNU General Public License version 3 as |
| 7 * published by the Free Software Foundation. | 7 * published by the Free Software Foundation. |
| 8 * | 8 * |
| 9 * Adblock Plus is distributed in the hope that it will be useful, | 9 * Adblock Plus is distributed in the hope that it will be useful, |
| 10 * but WITHOUT ANY WARRANTY; without even the implied warranty of | 10 * but WITHOUT ANY WARRANTY; without even the implied warranty of |
| 11 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | 11 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
| 12 * GNU General Public License for more details. | 12 * GNU General Public License for more details. |
| 13 * | 13 * |
| 14 * You should have received a copy of the GNU General Public License | 14 * You should have received a copy of the GNU General Public License |
| 15 * along with Adblock Plus. If not, see <http://www.gnu.org/licenses/>. | 15 * along with Adblock Plus. If not, see <http://www.gnu.org/licenses/>. |
| 16 */ | 16 */ |
| 17 | 17 |
| 18 "use strict"; | 18 "use strict"; |
| 19 | 19 |
| 20 let {splitSelector} = require("./adblockpluscore/lib/common"); | |
| 21 let {ElemHideEmulation} = | 20 let {ElemHideEmulation} = |
| 22 require("./adblockpluscore/lib/content/elemHideEmulation"); | 21 require("./adblockpluscore/lib/content/elemHideEmulation"); |
| 23 | 22 |
| 24 // This variable is also used by our other content scripts. | 23 // This variable is also used by our other content scripts. |
| 25 let contentFiltering; | 24 let contentFiltering; |
| 26 | 25 |
| 27 const typeMap = new Map([ | 26 const typeMap = new Map([ |
| 28 ["img", "IMAGE"], | 27 ["img", "IMAGE"], |
| 29 ["input", "IMAGE"], | 28 ["input", "IMAGE"], |
| 30 ["picture", "IMAGE"], | 29 ["picture", "IMAGE"], |
| (...skipping 358 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 389 disconnect() | 388 disconnect() |
| 390 { | 389 { |
| 391 document.removeEventListener("DOMContentLoaded", this.trace); | 390 document.removeEventListener("DOMContentLoaded", this.trace); |
| 392 this.observer.disconnect(); | 391 this.observer.disconnect(); |
| 393 clearTimeout(this.timeout); | 392 clearTimeout(this.timeout); |
| 394 } | 393 } |
| 395 }; | 394 }; |
| 396 | 395 |
| 397 function ContentFiltering() | 396 function ContentFiltering() |
| 398 { | 397 { |
| 399 this.shadow = this.createShadowTree(); | |
| 400 this.styles = new Map(); | 398 this.styles = new Map(); |
| 401 this.tracer = null; | 399 this.tracer = null; |
| 402 this.inline = true; | 400 this.inline = true; |
| 403 this.inlineEmulated = true; | 401 this.inlineEmulated = true; |
| 404 | 402 |
| 405 this.elemHideEmulation = new ElemHideEmulation( | 403 this.elemHideEmulation = new ElemHideEmulation( |
| 406 this.addSelectors.bind(this), | 404 this.addSelectors.bind(this), |
| 407 this.hideElements.bind(this) | 405 this.hideElements.bind(this) |
| 408 ); | 406 ); |
| 409 } | 407 } |
| 410 ContentFiltering.prototype = { | 408 ContentFiltering.prototype = { |
| 411 selectorGroupSize: 1024, | 409 selectorGroupSize: 1024, |
| 412 | 410 |
| 413 createShadowTree() | |
| 414 { | |
| 415 // Use Shadow DOM if available as to not mess with with web pages that | |
| 416 // rely on the order of their own <style> tags (#309). However, creating | |
| 417 // a shadow root breaks running CSS transitions. So we have to create | |
| 418 // the shadow root before transistions might start (#452). | |
| 419 if (!("createShadowRoot" in document.documentElement)) | |
| 420 return null; | |
| 421 | |
| 422 // Both Firefox and Chrome 66+ support user style sheets, so we can avoid | |
| 423 // creating an unnecessary shadow root on these platforms. | |
| 424 let match = /\bChrome\/(\d+)/.exec(navigator.userAgent); | |
| 425 if (!match || match[1] >= 66) | |
| 426 return null; | |
| 427 | |
| 428 // Using shadow DOM causes issues on some Google websites, | |
| 429 // including Google Docs, Gmail and Blogger (#1770, #2602, #2687). | |
| 430 if (/\.(?:google|blogger)\.com$/.test(document.domain)) | |
| 431 return null; | |
| 432 | |
| 433 // Finally since some users have both AdBlock and Adblock Plus installed we | |
| 434 // have to consider how the two extensions interact. For example we want to | |
| 435 // avoid creating the shadowRoot twice. | |
| 436 let shadow = document.documentElement.shadowRoot || | |
| 437 document.documentElement.createShadowRoot(); | |
| 438 shadow.appendChild(document.createElement("content")); | |
| 439 | |
| 440 return shadow; | |
| 441 }, | |
| 442 | |
| 443 addSelectorsInline(selectors, groupName, appendOnly = false) | 411 addSelectorsInline(selectors, groupName, appendOnly = false) |
| 444 { | 412 { |
| 445 let style = this.styles.get(groupName); | 413 let style = this.styles.get(groupName); |
| 446 | 414 |
| 447 if (style && !appendOnly) | 415 if (style && !appendOnly) |
| 448 { | 416 { |
| 449 while (style.sheet.cssRules.length > 0) | 417 while (style.sheet.cssRules.length > 0) |
| 450 style.sheet.deleteRule(0); | 418 style.sheet.deleteRule(0); |
| 451 } | 419 } |
| 452 | 420 |
| 453 if (selectors.length == 0) | 421 if (selectors.length == 0) |
| 454 return; | 422 return; |
| 455 | 423 |
| 456 if (!style) | 424 if (!style) |
| 457 { | 425 { |
| 458 // Create <style> element lazily, only if we add styles. Add it to | 426 // Create <style> element lazily, only if we add styles. Add it to |
| 459 // the shadow DOM if possible. Otherwise fallback to the <head> or | 427 // the <head> or <html> element. If we have injected a style element |
| 460 // <html> element. If we have injected a style element before that | 428 // before that has been removed (the sheet property is null), create a |
| 461 // has been removed (the sheet property is null), create a new one. | 429 // new one. |
| 462 style = document.createElement("style"); | 430 style = document.createElement("style"); |
| 463 (this.shadow || document.head || | 431 (document.head || document.documentElement).appendChild(style); |
| 464 document.documentElement).appendChild(style); | |
| 465 | 432 |
| 466 // It can happen that the frame already navigated to a different | 433 // It can happen that the frame already navigated to a different |
| 467 // document while we were waiting for the background page to respond. | 434 // document while we were waiting for the background page to respond. |
| 468 // In that case the sheet property will stay null, after addind the | 435 // In that case the sheet property may stay null, after adding the |
| 469 // <style> element to the shadow DOM. | 436 // <style> element. |
| 470 if (!style.sheet) | 437 if (!style.sheet) |
| 471 return; | 438 return; |
| 472 | 439 |
| 473 this.styles.set(groupName, style); | 440 this.styles.set(groupName, style); |
| 474 } | 441 } |
| 475 | 442 |
| 476 // If using shadow DOM, we have to add the ::content pseudo-element | |
| 477 // before each selector, in order to match elements within the | |
| 478 // insertion point. | |
| 479 let preparedSelectors = []; | |
| 480 if (this.shadow) | |
| 481 { | |
| 482 for (let selector of selectors) | |
| 483 { | |
| 484 let subSelectors = splitSelector(selector); | |
| 485 for (let subSelector of subSelectors) | |
| 486 preparedSelectors.push("::content " + subSelector); | |
| 487 } | |
| 488 } | |
| 489 else | |
| 490 { | |
| 491 preparedSelectors = selectors; | |
| 492 } | |
| 493 | |
| 494 // Chromium's Blink engine supports only up to 8,192 simple selectors, and | 443 // Chromium's Blink engine supports only up to 8,192 simple selectors, and |
| 495 // even fewer compound selectors, in a rule. The exact number of selectors | 444 // even fewer compound selectors, in a rule. The exact number of selectors |
| 496 // that would work depends on their sizes (e.g. "#foo .bar" has a | 445 // that would work depends on their sizes (e.g. "#foo .bar" has a |
| 497 // size of 2). Since we don't know the sizes of the selectors here, we | 446 // size of 2). Since we don't know the sizes of the selectors here, we |
| 498 // simply split them into groups of 1,024, based on the reasonable | 447 // simply split them into groups of 1,024, based on the reasonable |
| 499 // assumption that the average selector won't have a size greater than 8. | 448 // assumption that the average selector won't have a size greater than 8. |
| 500 // The alternative would be to calculate the sizes of the selectors and | 449 // The alternative would be to calculate the sizes of the selectors and |
| 501 // divide them up accordingly, but this approach is more efficient and has | 450 // divide them up accordingly, but this approach is more efficient and has |
| 502 // worked well in practice. In theory this could still lead to some | 451 // worked well in practice. In theory this could still lead to some |
| 503 // selectors not working on Chromium, but it is highly unlikely. | 452 // selectors not working on Chromium, but it is highly unlikely. |
| 504 // See issue #6298 and https://crbug.com/804179 | 453 // See issue #6298 and https://crbug.com/804179 |
| 505 for (let i = 0; i < preparedSelectors.length; i += this.selectorGroupSize) | 454 for (let i = 0; i < selectors.length; i += this.selectorGroupSize) |
| 506 { | 455 { |
| 507 let selector = preparedSelectors.slice( | 456 let selector = selectors.slice(i, i + this.selectorGroupSize).join(", "); |
| 508 i, i + this.selectorGroupSize | |
| 509 ).join(", "); | |
| 510 style.sheet.insertRule(selector + "{display: none !important;}", | 457 style.sheet.insertRule(selector + "{display: none !important;}", |
| 511 style.sheet.cssRules.length); | 458 style.sheet.cssRules.length); |
| 512 } | 459 } |
| 513 }, | 460 }, |
| 514 | 461 |
| 515 addSelectors(selectors, filters, groupName = "emulated", appendOnly = false) | 462 addSelectors(selectors, filters, groupName = "emulated", appendOnly = false) |
| 516 { | 463 { |
| 517 if (this.inline || this.inlineEmulated) | 464 if (this.inline || this.inlineEmulated) |
| 518 { | 465 { |
| 519 // Insert the style rules inline if we have been instructed by the | 466 // Insert the style rules inline if we have been instructed by the |
| (...skipping 89 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 609 let element = event.target; | 556 let element = event.target; |
| 610 if (/^i?frame$/.test(element.localName)) | 557 if (/^i?frame$/.test(element.localName)) |
| 611 checkCollapse(element); | 558 checkCollapse(element); |
| 612 }, true); | 559 }, true); |
| 613 } | 560 } |
| 614 | 561 |
| 615 window.checkCollapse = checkCollapse; | 562 window.checkCollapse = checkCollapse; |
| 616 window.contentFiltering = contentFiltering; | 563 window.contentFiltering = contentFiltering; |
| 617 window.typeMap = typeMap; | 564 window.typeMap = typeMap; |
| 618 window.getURLsFromElement = getURLsFromElement; | 565 window.getURLsFromElement = getURLsFromElement; |
| OLD | NEW |