Implement cosmetic filtering of DOM elements via rules provided by ad…

… block component.

Reverts the revert of the oringal implementation: "Merge pull request #4255 from brave/bsc-revert-cosmetic-filtering"

This reverts commit fcfe38a, reversing
changes made to 950778a.

Fixes some conflicts as a result of master getting flag features and uses updated adblock-rust-ffi version which provides a slightly different API than for the original implementation.

DEPS

@@ -1,7 +1,7 @@
 use_relative_paths = True
 
 deps = {
-  "vendor/adblock_rust_ffi": "https://github.com/brave/adblock-rust-ffi.git@89127a30655eaf54cf73794309846084ea8b91b9",
+  "vendor/adblock_rust_ffi": "https://github.com/brave/adblock-rust-ffi.git@optional-css-validation",
   "vendor/autoplay-whitelist": "https://github.com/brave/autoplay-whitelist.git@ea527a4d36051daedb34421e129c98eda06cb5d3",
   "vendor/extension-whitelist": "https://github.com/brave/extension-whitelist.git@7843f62e26a23c51336330e220e9d7992680aae9",
   "vendor/hashset-cpp": "https://github.com/brave/hashset-cpp.git@6eab0271d014ff09bd9f38abe1e0c117e13e9aa9",

browser/extensions/BUILD.gn

@@ -70,8 +70,11 @@ source_set("extensions") {
     "//brave/components/brave_component_updater/browser",
     "//brave/components/brave_extension:generated_resources",
     "//brave/components/brave_extension:static_resources",
+    "//brave/components/brave_shields/browser",
+    "//brave/components/brave_shields/common",
     "//brave/components/brave_wayback_machine:buildflags",
     "//chrome/browser/extensions",
+    "//chrome/common",
     "//components/gcm_driver:gcm_driver",
     "//components/gcm_driver:gcm_buildflags",
     "//components/prefs",

browser/extensions/api/brave_shields_api.cc

@@ -10,14 +10,17 @@
 #include <utility>
 
 #include "base/strings/string_number_conversions.h"
+#include "brave/browser/brave_browser_process_impl.h"
 #include "brave/browser/extensions/api/brave_action_api.h"
 #include "brave/browser/webcompat_reporter/webcompat_reporter_dialog.h"
 #include "brave/common/extensions/api/brave_shields.h"
 #include "brave/common/extensions/extension_constants.h"
+#include "brave/components/brave_shields/browser/ad_block_service.h"
 #include "brave/components/brave_shields/browser/brave_shields_p3a.h"
 #include "brave/components/brave_shields/browser/brave_shields_util.h"
 #include "brave/components/brave_shields/browser/brave_shields_web_contents_observer.h"
 #include "brave/components/brave_shields/common/brave_shield_constants.h"
+#include "brave/components/brave_shields/common/features.h"
 #include "chrome/browser/browser_process.h"
 #include "chrome/browser/extensions/api/tabs/tabs_constants.h"
 #include "chrome/browser/extensions/chrome_extension_function_details.h"
@@ -30,6 +33,7 @@ using brave_shields::BraveShieldsWebContentsObserver;
 using brave_shields::ControlType;
 using brave_shields::ControlTypeFromString;
 using brave_shields::ControlTypeToString;
+using brave_shields::features::kBraveAdblockCosmeticFiltering;
 
 namespace extensions {
 namespace api {
@@ -41,6 +45,41 @@ const char kInvalidControlTypeError[] = "Invalid ControlType.";
 
 }  // namespace
 
+
+ExtensionFunction::ResponseAction
+BraveShieldsHostnameCosmeticResourcesFunction::Run() {
+  std::unique_ptr<brave_shields::HostnameCosmeticResources::Params> params(
+      brave_shields::HostnameCosmeticResources::Params::Create(*args_));
+  EXTENSION_FUNCTION_VALIDATE(params.get());
+
+  base::Optional<base::Value> resources = g_brave_browser_process->
+      ad_block_service()->HostnameCosmeticResources(params->hostname);
+
+  if (!resources || !resources->is_dict()) {
+    return RespondNow(Error(
+        "Hostname-specific cosmetic resources could not be returned"));
+  }
+  auto result_list = std::make_unique<base::ListValue>();
+
+  result_list->GetList().push_back(std::move(*resources));
+
+  return RespondNow(ArgumentList(std::move(result_list)));
+}
+
+ExtensionFunction::ResponseAction
+BraveShieldsHiddenClassIdSelectorsFunction::Run() {
+  std::unique_ptr<brave_shields::HiddenClassIdSelectors::Params> params(
+      brave_shields::HiddenClassIdSelectors::Params::Create(*args_));
+  EXTENSION_FUNCTION_VALIDATE(params.get());
+
+  std::string stylesheet = g_brave_browser_process->
+      ad_block_service()->HiddenClassIdSelectors(params->classes,
+                                                 params->ids,
+                                                 params->exceptions);
+  return RespondNow(OneArgument(std::make_unique<base::Value>(stylesheet)));
+}
+
+
 ExtensionFunction::ResponseAction BraveShieldsAllowScriptsOnceFunction::Run() {
   std::unique_ptr<brave_shields::AllowScriptsOnce::Params> params(
       brave_shields::AllowScriptsOnce::Params::Create(*args_));
@@ -117,6 +156,14 @@ BraveShieldsGetBraveShieldsEnabledFunction::Run() {
   return RespondNow(OneArgument(std::move(result)));
 }
 
+ExtensionFunction::ResponseAction
+BraveShieldsGetCosmeticFilteringEnabledFunction::Run() {
+  auto result = std::make_unique<base::Value>(
+      base::FeatureList::IsEnabled(kBraveAdblockCosmeticFiltering));
+
+  return RespondNow(OneArgument(std::move(result)));
+}
+
 ExtensionFunction::ResponseAction BraveShieldsSetAdControlTypeFunction::Run() {
   std::unique_ptr<brave_shields::SetAdControlType::Params> params(
       brave_shields::SetAdControlType::Params::Create(*args_));

browser/extensions/api/brave_shields_api.h

@@ -11,6 +11,26 @@
 namespace extensions {
 namespace api {
 
+class BraveShieldsHostnameCosmeticResourcesFunction : public ExtensionFunction {
+ public:
+  DECLARE_EXTENSION_FUNCTION("braveShields.hostnameCosmeticResources", UNKNOWN)
+
+ protected:
+  ~BraveShieldsHostnameCosmeticResourcesFunction() override {}
+
+  ResponseAction Run() override;
+};
+
+class BraveShieldsHiddenClassIdSelectorsFunction : public ExtensionFunction {
+ public:
+  DECLARE_EXTENSION_FUNCTION("braveShields.hiddenClassIdSelectors", UNKNOWN)
+
+ protected:
+  ~BraveShieldsHiddenClassIdSelectorsFunction() override {}
+
+  ResponseAction Run() override;
+};
+
 class BraveShieldsAllowScriptsOnceFunction : public ExtensionFunction {
  public:
   DECLARE_EXTENSION_FUNCTION("braveShields.allowScriptsOnce", UNKNOWN)
@@ -52,6 +72,18 @@ class BraveShieldsGetBraveShieldsEnabledFunction : public ExtensionFunction {
   ResponseAction Run() override;
 };
 
+class BraveShieldsGetCosmeticFilteringEnabledFunction
+    : public ExtensionFunction {
+ public:
+  DECLARE_EXTENSION_FUNCTION("braveShields.getCosmeticFilteringEnabled",
+                             UNKNOWN)
+
+ protected:
+  ~BraveShieldsGetCosmeticFilteringEnabledFunction() override {}
+
+  ResponseAction Run() override;
+};
+
 class BraveShieldsSetAdControlTypeFunction : public ExtensionFunction {
  public:
   DECLARE_EXTENSION_FUNCTION("braveShields.setAdControlType", UNKNOWN)

chromium_src/chrome/browser/about_flags.cc

@@ -4,10 +4,12 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 #include "brave/components/ntp_sponsored_images/browser/features.h"
+#include "brave/components/brave_shields/common/features.h"
 #include "chrome/browser/about_flags.h"
 
 using ntp_sponsored_images::features::kBraveNTPBrandedWallpaper;
 using ntp_sponsored_images::features::kBraveNTPBrandedWallpaperDemo;
+using brave_shields::features::kBraveAdblockCosmeticFiltering;
 
 #define BRAVE_FEATURE_ENTRIES \
     {"brave-ntp-branded-wallpaper",                                        \
@@ -17,7 +19,11 @@ using ntp_sponsored_images::features::kBraveNTPBrandedWallpaperDemo;
     {"brave-ntp-branded-wallpaper-demo",                                   \
      flag_descriptions::kBraveNTPBrandedWallpaperDemoName,                 \
      flag_descriptions::kBraveNTPBrandedWallpaperDemoDescription, kOsAll,  \
-     FEATURE_VALUE_TYPE(kBraveNTPBrandedWallpaperDemo)},
+     FEATURE_VALUE_TYPE(kBraveNTPBrandedWallpaperDemo)},                   \
+    {"brave-adblock-cosmetic-filtering",                                   \
+     flag_descriptions::kBraveAdblockCosmeticFilteringName,                \
+     flag_descriptions::kBraveAdblockCosmeticFilteringDescription, kOsAll, \
+     FEATURE_VALUE_TYPE(kBraveAdblockCosmeticFiltering)},
 
 #define SetFeatureEntryEnabled SetFeatureEntryEnabled_ChromiumImpl
 #include "../../../../chrome/browser/about_flags.cc"  // NOLINT

chromium_src/chrome/browser/flag_descriptions.cc

@@ -16,4 +16,7 @@ const char kBraveNTPBrandedWallpaperDemoDescription[] =
     "Force dummy data for the Branded Wallpaper New Tab Page Experience. "
     "View rate and user opt-in conditionals will still be followed to decide "
     "when to display the Branded Wallpaper.";
+const char kBraveAdblockCosmeticFilteringName[] = "Enable cosmetic filtering";
+const char kBraveAdblockCosmeticFilteringDescription[] =
+    "Enable support for cosmetic filtering";
 }  // namespace flag_descriptions

chromium_src/chrome/browser/flag_descriptions.h

@@ -13,6 +13,8 @@ extern const char kBraveNTPBrandedWallpaperName[];
 extern const char kBraveNTPBrandedWallpaperDescription[];
 extern const char kBraveNTPBrandedWallpaperDemoName[];
 extern const char kBraveNTPBrandedWallpaperDemoDescription[];
+extern const char kBraveAdblockCosmeticFilteringName[];
+extern const char kBraveAdblockCosmeticFilteringDescription[];
 }
 
 #endif  // BRAVE_CHROMIUM_SRC_CHROME_BROWSER_FLAG_DESCRIPTIONS_H_

common/extensions/api/brave_shields.json

@@ -73,6 +73,65 @@
         "description": "Notifies the browser about the fact of showing the panel",
         "parameters": []
       },
+      {
+        "name": "hostnameCosmeticResources",
+        "type": "function",
+        "description": "Get a cosmetic adblocking stylesheet, generic style exceptions, and script injections specific for the given hostname and domain",
+        "parameters": [
+          {
+            "name": "hostname",
+            "type": "string"
+          },
+          {
+            "type": "function",
+            "name": "callback",
+            "parameters": [
+              {
+                "name": "hostnameSpecificResources",
+                "type": "object",
+                "properties": {
+                  "hide_selectors": {"type": "array", "items": {"type": "string"}, "description": "Hostname-specific CSS selectors that should be hidden from the page"},
+                  "style_selectors": {"type": "object", "additionalProperties": {"type": "array", "items": {"type": "string"}}, "description": "Hostname-specific CSS selectors that should be restyled, with their associated CSS style rules"},
+                  "exceptions": {"type": "array", "items": {"type": "string"}, "description": "Hostname-specific overrides for generic cosmetic blocking selectors"},
+                  "injected_script": {"type": "string", "description": "A script to inject as the page is loading"}
+                }
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "name": "hiddenClassIdSelectors",
+        "type": "function",
+        "description": "Get a stylesheet of generic rules that may apply to the given set of classes and ids without any of the given excepted selectors",
+        "parameters": [
+          {
+            "name": "classes",
+            "type": "array",
+            "items": {"type": "string"}
+          },
+          {
+            "name": "ids",
+            "type": "array",
+            "items": {"type": "string"}
+          },
+          {
+            "name": "exceptions",
+            "type": "array",
+            "items": {"type": "string"}
+          },
+          {
+            "type": "function",
+            "name": "callback",
+            "parameters": [
+              {
+                "name": "selectorsJson",
+                "type": "string"
+              }
+            ]
+          }
+        ]
+      },
       {
         "name": "getBraveShieldsEnabled",
         "type": "function",
@@ -94,6 +153,23 @@
           }
         ]
       },
+      {
+        "name": "getCosmeticFilteringEnabled",
+        "type": "function",
+        "description": "Get whether or not the cosmetic filtering feature flag is enabled",
+        "parameters": [
+          {
+            "type": "function",
+            "name": "callback",
+            "parameters": [
+              {
+                "name": "enabled",
+                "type": "boolean"
+              }
+            ]
+          }
+        ]
+      },
       {
         "name": "setAdControlType",
         "type": "function",

components/brave_extension/extension/brave_extension/BUILD.gn

@@ -9,6 +9,7 @@ transpile_web_ui("brave_extension") {
     ["brave_extension_background", rebase_path("background.ts")],
     ["content", rebase_path("content.ts")],
     ["content_dapps", rebase_path("content_dapps.ts")],
+    ["content_cosmetic", rebase_path("content_cosmetic.ts")],
     ["webstore", rebase_path("webstore.ts")],
   ]
 

components/brave_extension/extension/brave_extension/actions/shieldsPanelActions.ts

@@ -137,3 +137,28 @@ export const shieldsReady: actions.ShieldsReady = () => {
     type: types.SHIELDS_READY
   }
 }
+
+export const generateClassIdStylesheet = (tabId: number, classes: string[], ids: string[]) => {
+  return {
+    type: types.GENERATE_CLASS_ID_STYLESHEET,
+    tabId,
+    classes,
+    ids
+  }
+}
+
+export const cosmeticFilterRuleExceptions = (tabId: number, exceptions: string[]) => {
+  return {
+    type: types.COSMETIC_FILTER_RULE_EXCEPTIONS,
+    tabId,
+    exceptions
+  }
+}
+
+export const contentScriptsLoaded: actions.ContentScriptsLoaded = (tabId: number, url: string) => {
+  return {
+    type: types.CONTENT_SCRIPTS_LOADED,
+    tabId,
+    url
+  }
+}

components/brave_extension/extension/brave_extension/background/api/cosmeticFilterAPI.ts

@@ -2,6 +2,37 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+import shieldsPanelActions from '../actions/shieldsPanelActions'
+
+const generateCosmeticBlockingStylesheet = (hideSelectors: string[], styleSelectors: any) => {
+  let stylesheet = ''
+  if (hideSelectors.length > 0) {
+    stylesheet += hideSelectors[0]
+    for (const selector of hideSelectors.slice(1)) {
+      stylesheet += ',' + selector
+    }
+    stylesheet += '{display:none !important;}\n'
+  }
+  for (const selector in styleSelectors) {
+    stylesheet += selector + '{' + styleSelectors[selector] + '\n'
+  }
+
+  return stylesheet
+}
+
+export const injectClassIdStylesheet = (tabId: number, classes: string[], ids: string[], exceptions: string[]) => {
+  chrome.braveShields.hiddenClassIdSelectors(classes, ids, exceptions, (jsonSelectors) => {
+    const hideSelectors = JSON.parse(jsonSelectors)
+    /*
+    chrome.tabs.insertCSS(tabId, {
+      code: stylesheet,
+      cssOrigin: 'user',
+      runAt: 'document_start'
+    })
+    */
+  })
+}
+
 export const addSiteCosmeticFilter = async (origin: string, cssfilter: string) => {
   chrome.storage.local.get('cosmeticFilterList', (storeData = {}) => {
     let storeList = Object.assign({}, storeData.cosmeticFilterList)
@@ -22,7 +53,34 @@ export const removeSiteFilter = (origin: string) => {
   })
 }
 
-export const applySiteFilters = (tabId: number, hostname: string) => {
+export const applyAdblockCosmeticFilters = (tabId: number, hostname: string) => {
+  chrome.braveShields.hostnameCosmeticResources(hostname, async (resources) => {
+    if (chrome.runtime.lastError) {
+      console.warn('Unable to get cosmetic filter data for the current host')
+      return
+    }
+
+    const stylesheet = generateCosmeticBlockingStylesheet(resources.hide_selectors, resources.style_selectors)
+    if (stylesheet) {
+      chrome.tabs.insertCSS(tabId, {
+        code: stylesheet,
+        cssOrigin: 'user',
+        runAt: 'document_start'
+      })
+    }
+
+    if (resources.injected_script) {
+      chrome.tabs.executeScript(tabId, {
+        code: resources.injected_script,
+        runAt: 'document_start'
+      })
+    }
+
+    shieldsPanelActions.cosmeticFilterRuleExceptions(tabId, resources.exceptions)
+  })
+}
+
+export const applyCSSCosmeticFilters = (tabId: number, hostname: string) => {
   chrome.storage.local.get('cosmeticFilterList', (storeData = {}) => {
     if (!storeData.cosmeticFilterList) {
       if (process.env.NODE_ENV === 'shields_development') {