| LEFT | RIGHT |
| 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("common"); | 20 let {splitSelector} = require("./adblockpluscore/lib/common"); |
| 21 let {ElemHideEmulation} = require("content_elemHideEmulation"); | 21 let {ElemHideEmulation} = |
| 22 require("./adblockpluscore/lib/content/elemHideEmulation"); |
| 22 | 23 |
| 23 // This variable is also used by our other content scripts. | 24 // This variable is also used by our other content scripts. |
| 24 let elemhide; | 25 let elemhide; |
| 25 | 26 |
| 26 const typeMap = new Map([ | 27 const typeMap = new Map([ |
| 27 ["img", "IMAGE"], | 28 ["img", "IMAGE"], |
| 28 ["input", "IMAGE"], | 29 ["input", "IMAGE"], |
| 29 ["picture", "IMAGE"], | 30 ["picture", "IMAGE"], |
| 30 ["audio", "MEDIA"], | 31 ["audio", "MEDIA"], |
| 31 ["video", "MEDIA"], | 32 ["video", "MEDIA"], |
| 32 ["frame", "SUBDOCUMENT"], | 33 ["frame", "SUBDOCUMENT"], |
| 33 ["iframe", "SUBDOCUMENT"], | 34 ["iframe", "SUBDOCUMENT"], |
| 34 ["object", "OBJECT"], | 35 ["object", "OBJECT"], |
| 35 ["embed", "OBJECT"] | 36 ["embed", "OBJECT"] |
| 36 ]); | 37 ]); |
| 37 | 38 |
| 39 let collapsingSelectors = new Set(); |
| 40 |
| 38 function getURLsFromObjectElement(element) | 41 function getURLsFromObjectElement(element) |
| 39 { | 42 { |
| 40 let url = element.getAttribute("data"); | 43 let url = element.getAttribute("data"); |
| 41 if (url) | 44 if (url) |
| 42 return [url]; | 45 return [url]; |
| 43 | 46 |
| 44 for (let child of element.children) | 47 for (let child of element.children) |
| 45 { | 48 { |
| 46 if (child.localName != "param") | 49 if (child.localName != "param") |
| 47 continue; | 50 continue; |
| (...skipping 73 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 121 | 124 |
| 122 for (let i = 0; i < urls.length; i++) | 125 for (let i = 0; i < urls.length; i++) |
| 123 { | 126 { |
| 124 if (/^(?!https?:)[\w-]+:/i.test(urls[i])) | 127 if (/^(?!https?:)[\w-]+:/i.test(urls[i])) |
| 125 urls.splice(i--, 1); | 128 urls.splice(i--, 1); |
| 126 } | 129 } |
| 127 | 130 |
| 128 return urls; | 131 return urls; |
| 129 } | 132 } |
| 130 | 133 |
| 134 function isCollapsibleMediaElement(element, mediatype) |
| 135 { |
| 136 if (mediatype != "MEDIA") |
| 137 return false; |
| 138 |
| 139 if (!element.getAttribute("src")) |
| 140 return false; |
| 141 |
| 142 for (let child of element.children) |
| 143 { |
| 144 // If the <video> or <audio> element contains any <source> or <track> |
| 145 // children, we cannot address it in CSS by the source URL; in that case we |
| 146 // don't "collapse" it using a CSS selector but rather hide it directly by |
| 147 // setting the style="..." attribute. |
| 148 if (child.localName == "source" || child.localName == "track") |
| 149 return false; |
| 150 } |
| 151 |
| 152 return true; |
| 153 } |
| 154 |
| 155 function collapseMediaElement(element, srcValue) |
| 156 { |
| 157 if (!srcValue) |
| 158 return; |
| 159 |
| 160 let selector = element.localName + "[src=" + CSS.escape(srcValue) + "]"; |
| 161 |
| 162 // Adding selectors is expensive so do it only if we really have a new |
| 163 // selector. |
| 164 if (!collapsingSelectors.has(selector)) |
| 165 { |
| 166 collapsingSelectors.add(selector); |
| 167 elemhide.addSelectors([selector], null, "collapsing", true); |
| 168 } |
| 169 } |
| 170 |
| 131 function hideElement(element) | 171 function hideElement(element) |
| 132 { | 172 { |
| 133 function doHide() | 173 function doHide() |
| 134 { | 174 { |
| 135 let propertyName = "display"; | 175 let propertyName = "display"; |
| 136 let propertyValue = "none"; | 176 let propertyValue = "none"; |
| 137 if (element.localName == "frame") | 177 if (element.localName == "frame") |
| 138 { | 178 { |
| 139 propertyName = "visibility"; | 179 propertyName = "visibility"; |
| 140 propertyValue = "hidden"; | 180 propertyValue = "hidden"; |
| (...skipping 16 matching lines...) Expand all Loading... |
| 157 | 197 |
| 158 function checkCollapse(element) | 198 function checkCollapse(element) |
| 159 { | 199 { |
| 160 let mediatype = typeMap.get(element.localName); | 200 let mediatype = typeMap.get(element.localName); |
| 161 if (!mediatype) | 201 if (!mediatype) |
| 162 return; | 202 return; |
| 163 | 203 |
| 164 let urls = getURLsFromElement(element); | 204 let urls = getURLsFromElement(element); |
| 165 if (urls.length == 0) | 205 if (urls.length == 0) |
| 166 return; | 206 return; |
| 207 |
| 208 let collapsibleMediaElement = isCollapsibleMediaElement(element, mediatype); |
| 209 |
| 210 // Save the value of the src attribute because it can change between now and |
| 211 // when we get the response from the background page. |
| 212 let srcValue = collapsibleMediaElement ? element.getAttribute("src") : null; |
| 167 | 213 |
| 168 browser.runtime.sendMessage( | 214 browser.runtime.sendMessage( |
| 169 { | 215 { |
| 170 type: "filters.collapse", | 216 type: "filters.collapse", |
| 171 urls, | 217 urls, |
| 172 mediatype, | 218 mediatype, |
| 173 baseURL: document.location.href | 219 baseURL: document.location.href |
| 174 }, | 220 }, |
| 175 | |
| 176 collapse => | 221 collapse => |
| 177 { | 222 { |
| 178 if (collapse) | 223 if (collapse) |
| 179 { | 224 { |
| 180 hideElement(element); | 225 if (collapsibleMediaElement) |
| 226 collapseMediaElement(element, srcValue); |
| 227 else |
| 228 hideElement(element); |
| 181 } | 229 } |
| 182 } | 230 } |
| 183 ); | 231 ); |
| 184 } | 232 } |
| 185 | 233 |
| 186 function checkSitekey() | 234 function checkSitekey() |
| 187 { | 235 { |
| 188 let attr = document.documentElement.getAttribute("data-adblockkey"); | 236 let attr = document.documentElement.getAttribute("data-adblockkey"); |
| 189 if (attr) | 237 if (attr) |
| 190 browser.runtime.sendMessage({type: "filters.addKey", token: attr}); | 238 browser.runtime.sendMessage({type: "filters.addKey", token: attr}); |
| (...skipping 51 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 242 | 290 |
| 243 break nodes; | 291 break nodes; |
| 244 } | 292 } |
| 245 } | 293 } |
| 246 } | 294 } |
| 247 } | 295 } |
| 248 | 296 |
| 249 if (selectors.length > 0 || filters.length > 0) | 297 if (selectors.length > 0 || filters.length > 0) |
| 250 { | 298 { |
| 251 browser.runtime.sendMessage({ | 299 browser.runtime.sendMessage({ |
| 252 type: "devlogger.traceElemHide", | 300 type: "hitLogger.traceElemHide", |
| 253 selectors, filters | 301 selectors, filters |
| 254 }); | 302 }); |
| 255 } | 303 } |
| 256 }, | 304 }, |
| 257 | 305 |
| 258 onTimeout() | 306 onTimeout() |
| 259 { | 307 { |
| 260 this.checkNodes(this.changedNodes, this.selectors); | 308 this.checkNodes(this.changedNodes, this.selectors); |
| 261 this.changedNodes = []; | 309 this.changedNodes = []; |
| 262 this.timeout = null; | 310 this.timeout = null; |
| (...skipping 76 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 339 } | 387 } |
| 340 }; | 388 }; |
| 341 | 389 |
| 342 function ElemHide() | 390 function ElemHide() |
| 343 { | 391 { |
| 344 this.shadow = this.createShadowTree(); | 392 this.shadow = this.createShadowTree(); |
| 345 this.styles = new Map(); | 393 this.styles = new Map(); |
| 346 this.tracer = null; | 394 this.tracer = null; |
| 347 this.inline = true; | 395 this.inline = true; |
| 348 this.inlineEmulated = true; | 396 this.inlineEmulated = true; |
| 349 this.emulatedPatterns = null; | |
| 350 | 397 |
| 351 this.elemHideEmulation = new ElemHideEmulation( | 398 this.elemHideEmulation = new ElemHideEmulation( |
| 352 this.addSelectors.bind(this), | 399 this.addSelectors.bind(this), |
| 353 this.hideElements.bind(this) | 400 this.hideElements.bind(this) |
| 354 ); | 401 ); |
| 355 } | 402 } |
| 356 ElemHide.prototype = { | 403 ElemHide.prototype = { |
| 357 selectorGroupSize: 1024, | 404 selectorGroupSize: 1024, |
| 358 | 405 |
| 359 createShadowTree() | 406 createShadowTree() |
| 360 { | 407 { |
| 361 // Use Shadow DOM if available as to not mess with with web pages that | 408 // Use Shadow DOM if available as to not mess with with web pages that |
| 362 // rely on the order of their own <style> tags (#309). However, creating | 409 // rely on the order of their own <style> tags (#309). However, creating |
| 363 // a shadow root breaks running CSS transitions. So we have to create | 410 // a shadow root breaks running CSS transitions. So we have to create |
| 364 // the shadow root before transistions might start (#452). | 411 // the shadow root before transistions might start (#452). |
| 365 if (!("createShadowRoot" in document.documentElement)) | 412 if (!("createShadowRoot" in document.documentElement)) |
| 366 return null; | 413 return null; |
| 367 | 414 |
| 415 // Both Firefox and Chrome 66+ support user style sheets, so we can avoid |
| 416 // creating an unnecessary shadow root on these platforms. |
| 417 let match = /\bChrome\/(\d+)/.exec(navigator.userAgent); |
| 418 if (!match || match[1] >= 66) |
| 419 return null; |
| 420 |
| 368 // Using shadow DOM causes issues on some Google websites, | 421 // Using shadow DOM causes issues on some Google websites, |
| 369 // including Google Docs, Gmail and Blogger (#1770, #2602, #2687). | 422 // including Google Docs, Gmail and Blogger (#1770, #2602, #2687). |
| 370 if (/\.(?:google|blogger)\.com$/.test(document.domain)) | 423 if (/\.(?:google|blogger)\.com$/.test(document.domain)) |
| 371 return null; | 424 return null; |
| 372 | 425 |
| 373 // Finally since some users have both AdBlock and Adblock Plus installed we | 426 // Finally since some users have both AdBlock and Adblock Plus installed we |
| 374 // have to consider how the two extensions interact. For example we want to | 427 // have to consider how the two extensions interact. For example we want to |
| 375 // avoid creating the shadowRoot twice. | 428 // avoid creating the shadowRoot twice. |
| 376 let shadow = document.documentElement.shadowRoot || | 429 let shadow = document.documentElement.shadowRoot || |
| 377 document.documentElement.createShadowRoot(); | 430 document.documentElement.createShadowRoot(); |
| 378 shadow.appendChild(document.createElement("shadow")); | 431 shadow.appendChild(document.createElement("content")); |
| 379 | 432 |
| 380 return shadow; | 433 return shadow; |
| 381 }, | 434 }, |
| 382 | 435 |
| 383 addSelectorsInline(selectors, groupName) | 436 addSelectorsInline(selectors, groupName, appendOnly = false) |
| 384 { | 437 { |
| 385 let style = this.styles.get(groupName); | 438 let style = this.styles.get(groupName); |
| 386 | 439 |
| 387 if (style) | 440 if (style && !appendOnly) |
| 388 { | 441 { |
| 389 while (style.sheet.cssRules.length > 0) | 442 while (style.sheet.cssRules.length > 0) |
| 390 style.sheet.deleteRule(0); | 443 style.sheet.deleteRule(0); |
| 391 } | 444 } |
| 392 | 445 |
| 393 if (selectors.length == 0) | 446 if (selectors.length == 0) |
| 394 return; | 447 return; |
| 395 | 448 |
| 396 if (!style) | 449 if (!style) |
| 397 { | 450 { |
| (...skipping 47 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 445 for (let i = 0; i < preparedSelectors.length; i += this.selectorGroupSize) | 498 for (let i = 0; i < preparedSelectors.length; i += this.selectorGroupSize) |
| 446 { | 499 { |
| 447 let selector = preparedSelectors.slice( | 500 let selector = preparedSelectors.slice( |
| 448 i, i + this.selectorGroupSize | 501 i, i + this.selectorGroupSize |
| 449 ).join(", "); | 502 ).join(", "); |
| 450 style.sheet.insertRule(selector + "{display: none !important;}", | 503 style.sheet.insertRule(selector + "{display: none !important;}", |
| 451 style.sheet.cssRules.length); | 504 style.sheet.cssRules.length); |
| 452 } | 505 } |
| 453 }, | 506 }, |
| 454 | 507 |
| 455 addSelectors(selectors, filters) | 508 addSelectors(selectors, filters, groupName = "emulated", appendOnly = false) |
| 456 { | 509 { |
| 457 if (this.inline || this.inlineEmulated) | 510 if (this.inline || this.inlineEmulated) |
| 458 { | 511 { |
| 459 // Insert the style rules inline if we have been instructed by the | 512 // Insert the style rules inline if we have been instructed by the |
| 460 // background page to do so. This is usually the case, except on platforms | 513 // background page to do so. This is usually the case, except on platforms |
| 461 // that do support user stylesheets via the browser.tabs.insertCSS API | 514 // that do support user stylesheets via the browser.tabs.insertCSS API |
| 462 // (Firefox 53 onwards for now and possibly Chrome in the near future). | 515 // (Firefox 53 onwards for now and possibly Chrome in the near future). |
| 463 // Once all supported platforms have implemented this API, we can remove | 516 // Once all supported platforms have implemented this API, we can remove |
| 464 // the code below. See issue #5090. | 517 // the code below. See issue #5090. |
| 465 // Related Chrome and Firefox issues: | 518 // Related Chrome and Firefox issues: |
| 466 // https://bugs.chromium.org/p/chromium/issues/detail?id=632009 | 519 // https://bugs.chromium.org/p/chromium/issues/detail?id=632009 |
| 467 // https://bugzilla.mozilla.org/show_bug.cgi?id=1310026 | 520 // https://bugzilla.mozilla.org/show_bug.cgi?id=1310026 |
| 468 this.addSelectorsInline(selectors, "emulated"); | 521 this.addSelectorsInline(selectors, groupName, appendOnly); |
| 469 } | 522 } |
| 470 else | 523 else |
| 471 { | 524 { |
| 472 browser.runtime.sendMessage({ | 525 browser.runtime.sendMessage({ |
| 473 type: "elemhide.injectSelectors", | 526 type: "elemhide.injectSelectors", |
| 474 selectors, | 527 selectors, |
| 475 groupName: "emulated" | 528 groupName, |
| 529 appendOnly |
| 476 }); | 530 }); |
| 477 } | 531 } |
| 478 | 532 |
| 479 if (this.tracer) | 533 // Only trace selectors that are based directly on hiding filters |
| 534 // (i.e. leave out collapsing selectors). |
| 535 if (this.tracer && groupName != "collapsing") |
| 480 this.tracer.addSelectors(selectors, filters); | 536 this.tracer.addSelectors(selectors, filters); |
| 481 }, | 537 }, |
| 482 | 538 |
| 483 hideElements(elements, filters) | 539 hideElements(elements, filters) |
| 484 { | 540 { |
| 485 for (let element of elements) | 541 for (let element of elements) |
| 486 hideElement(element); | 542 hideElement(element); |
| 487 | 543 |
| 488 if (this.tracer) | 544 if (this.tracer) |
| 489 { | 545 { |
| 490 browser.runtime.sendMessage({ | 546 browser.runtime.sendMessage({ |
| 491 type: "devlogger.traceElemHide", | 547 type: "hitLogger.traceElemHide", |
| 492 selectors: [], | 548 selectors: [], |
| 493 filters | 549 filters |
| 494 }); | 550 }); |
| 495 } | 551 } |
| 496 }, | 552 }, |
| 497 | 553 |
| 498 apply() | 554 apply() |
| 499 { | 555 { |
| 500 browser.runtime.sendMessage({type: "elemhide.getSelectors"}, response => | 556 browser.runtime.sendMessage({type: "elemhide.getSelectors"}, response => |
| 501 { | 557 { |
| 502 if (this.tracer) | 558 if (this.tracer) |
| 503 this.tracer.disconnect(); | 559 this.tracer.disconnect(); |
| 504 this.tracer = null; | 560 this.tracer = null; |
| 505 | 561 |
| 506 if (response.trace) | 562 if (response.trace) |
| 507 this.tracer = new ElementHidingTracer(); | 563 this.tracer = new ElementHidingTracer(); |
| 508 | 564 |
| 509 this.inline = response.inline; | 565 this.inline = response.inline; |
| 510 this.inlineEmulated = !!response.inlineEmulated; | 566 this.inlineEmulated = !!response.inlineEmulated; |
| 511 | 567 |
| 512 if (this.inline) | 568 if (this.inline) |
| 513 this.addSelectorsInline(response.selectors, "standard"); | 569 this.addSelectorsInline(response.selectors, "standard"); |
| 514 | 570 |
| 515 if (this.tracer) | 571 if (this.tracer) |
| 516 this.tracer.addSelectors(response.selectors); | 572 this.tracer.addSelectors(response.selectors); |
| 573 |
| 574 // Prefer CSS selectors for -abp-has and -abp-contains unless the |
| 575 // background page has asked us to use inline styles. |
| 576 this.elemHideEmulation.useInlineStyles = this.inline || |
| 577 this.inlineEmulated; |
| 517 | 578 |
| 518 this.elemHideEmulation.apply(response.emulatedPatterns); | 579 this.elemHideEmulation.apply(response.emulatedPatterns); |
| 519 }); | 580 }); |
| 520 } | 581 } |
| 521 }; | 582 }; |
| 522 | 583 |
| 523 if (document instanceof HTMLDocument) | 584 if (document instanceof HTMLDocument) |
| 524 { | 585 { |
| 525 checkSitekey(); | 586 checkSitekey(); |
| 526 | 587 |
| (...skipping 10 matching lines...) Expand all Loading... |
| 537 let element = event.target; | 598 let element = event.target; |
| 538 if (/^i?frame$/.test(element.localName)) | 599 if (/^i?frame$/.test(element.localName)) |
| 539 checkCollapse(element); | 600 checkCollapse(element); |
| 540 }, true); | 601 }, true); |
| 541 } | 602 } |
| 542 | 603 |
| 543 window.checkCollapse = checkCollapse; | 604 window.checkCollapse = checkCollapse; |
| 544 window.elemhide = elemhide; | 605 window.elemhide = elemhide; |
| 545 window.typeMap = typeMap; | 606 window.typeMap = typeMap; |
| 546 window.getURLsFromElement = getURLsFromElement; | 607 window.getURLsFromElement = getURLsFromElement; |
| LEFT | RIGHT |