Issue 6507 - Inject style sheet proactively from background page

lib/cssInjection.js

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-present eyeo GmbH
  *
  * Adblock Plus is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License version 3 as
  * published by the Free Software Foundation.
  *
  * Adblock Plus is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
@@ skipping 20 matching lines @@
 // Chromium's support for tabs.removeCSS is still a work in progress and the
 // API is likely to be different from Firefox's; for now we just don't use it
 // at all, even if it's available.
 // See https://crbug.com/608854
 const styleSheetRemovalSupported = info.platform == "gecko";
 
 const selectorGroupSize = 1024;
 
 let userStyleSheetsSupported = true;
 
+function delay(time, func = () => {}, ...args)

[Manish Jethani, 2018/04/06 06:20:02]

This simply wraps setTimeout into a promise, which is convenient to use
elsewhere (in a promise chain).

+{
+  return new Promise((resolve, reject) =>
+  {
+    setTimeout(() =>
+    {
+      try
+      {
+        resolve(func(...args));
+      }
+      catch (error)
+      {
+        reject(error);
+      }
+    },
+    time);
+  });
+}
+
 function* splitSelectors(selectors)
 {
   // Chromium's Blink engine supports only up to 8,192 simple selectors, and
   // even fewer compound selectors, in a rule. The exact number of selectors
   // that would work depends on their sizes (e.g. "#foo .bar" has a size of 2).
   // Since we don't know the sizes of the selectors here, we simply split them
   // into groups of 1,024, based on the reasonable assumption that the average
   // selector won't have a size greater than 8. The alternative would be to
   // calculate the sizes of the selectors and divide them up accordingly, but
   // this approach is more efficient and has worked well in practice. In theory
@@ skipping 99 matching lines @@
   // Sometimes the old and new style sheets can be exactly the same. In such a
   // case, do not remove the "old" style sheet, because it is in fact the new
   // style sheet now.
   if (oldStyleSheet && oldStyleSheet != styleSheet)
     removeStyleSheet(tabId, frameId, oldStyleSheet);
 
   frame.injectedStyleSheets.set(groupName, styleSheet);
   return true;
 }
 
-port.on("elemhide.getSelectors", (message, sender) =>
+function doElementHiding(page, frame)
 {
   let selectors = [];
   let emulatedPatterns = [];
-  let trace = devtools && devtools.hasPanel(sender.page);
+  let trace = devtools && devtools.hasPanel(page);
   let inline = !userStyleSheetsSupported;
 
-  if (!checkWhitelisted(sender.page, sender.frame,
+  if (!checkWhitelisted(page, frame,
                         RegExpFilter.typeMap.DOCUMENT |
                         RegExpFilter.typeMap.ELEMHIDE))
   {
-    let hostname = extractHostFromFrame(sender.frame);
-    let specificOnly = checkWhitelisted(sender.page, sender.frame,
+    let hostname = extractHostFromFrame(frame);
+    let specificOnly = checkWhitelisted(page, frame,
                                         RegExpFilter.typeMap.GENERICHIDE);
 
     selectors = ElemHide.getSelectorsForDomain(
       hostname,
       specificOnly ? ElemHide.SPECIFIC_ONLY : ElemHide.ALL_MATCHING
     );
 
     for (let filter of ElemHideEmulation.getRulesForDomain(hostname))
       emulatedPatterns.push({selector: filter.selector, text: filter.text});
   }
 
-  if (!inline && !updateFrameStyles(sender.page.id, sender.frame.id,
-                                    selectors, "standard"))
-  {
+  if (!inline && !updateFrameStyles(page.id, frame.id, selectors, "standard"))
     inline = true;
-  }
 
-  let response = {trace, inline, emulatedPatterns};
+  let message = {type: "elemhide.apply", trace, inline};
   if (trace || inline)
-    response.selectors = selectors;
+    message.selectors = selectors;
+
+  if (emulatedPatterns.length > 0)
+    message.emulatedPatterns = emulatedPatterns;
 
   // If we can't remove user style sheets using tabs.removeCSS, we'll only keep
   // adding them, which could cause problems with emulation filters as
   // described in issue #5864. Instead, we can just ask the content script to
   // add styles for emulation filters inline.
   if (!styleSheetRemovalSupported)
-    response.inlineEmulated = true;
+    message.inlineEmulated = true;
 
-  return response;
+  // In most cases on modern browsers there's nothing for the content script to
+  // do.
+  if (!message.selectors && !message.emulatedPatterns)
+    return;
+
+  // The content script is loaded at about the same time as we get the
+  // webNavigation.onCommitted event; sometimes we have to retry a couple of
+  // times before we get through.
+  browser.tabs.sendMessage(page.id, message, {frameId: frame.id})
+  .catch(() =>
+    delay(250, browser.tabs.sendMessage, page.id, message, {frameId: frame.id})

[Manish Jethani, 2018/04/06 06:20:02]

Unfortunately sometimes the content script hasn't loaded yet when this code runs
(rarely, but it happens). Most of the time on modern browsers the code won't
even come to this point, because everything is handled by the background page.
But when the DevTools panel is open, for example, we still need to contact the
content script. In that case, we can retry a couple of times with increasing
delays of 250ms and 1s.

+  )
+  .catch(() =>
+    delay(1000, browser.tabs.sendMessage, page.id, message, {frameId: frame.id})
+  );
+}
+
+browser.webNavigation.onCommitted.addListener(({tabId, frameId, url}) =>
+{
+  // There's a bug in Chrome that causes webNavigation.onCommitted to get
+  // dispatched twice if there's a URL filter present, therefore we must listen
+  // for all URLs and do an explicit check here.
+  // https://crbug.com/827855
+  if (!/^(https?:\/\/|about:blank\b|about:srcdoc\b)/.test(url))
+    return;
+
+  let page = new ext.Page({id: tabId, url: url});
+  let frame = ext.getFrame(tabId, frameId);
+
+  if (!frame)
+    return;
+
+  doElementHiding(page, frame);
+});
+
+port.on("elemhide.needApply", (message, sender) =>
+{
+  doElementHiding(sender.page, sender.frame);
 });
 
 port.on("elemhide.injectSelectors", (message, sender) =>
 {
   updateFrameStyles(sender.page.id, sender.frame.id, message.selectors,
                     message.groupName);
 });