Using the Ad Blocking Feature

import { webview } from '@kit.ArkWeb';    
import { picker, fileUri } from '@kit.CoreFileKit';    

// This example demonstrates how to click a button to open the EasyList using file picker and set the file in the Web component.   
@Entry    
@Component    
struct WebComponent {    
  main_url: string = 'https://www.example.com';    
  controller: webview.WebviewController = new webview.WebviewController();    

  @State input_text: string = 'https://www.example.com';    

  build() {    
    Column() {    
      Row() {    
        Flex() {    
          Button({type: ButtonType.Capsule}) {    
            Text('setAdsBlockRules')
          }    
          .onClick(() => {    
            try {    
              let documentSelectionOptions: ESObject = new picker.DocumentSelectOptions();    
              let documentPicker: ESObject = new picker.DocumentViewPicker();    
              documentPicker.select(documentSelectionOptions).then((documentSelectResult: ESObject) => {    
                if (documentSelectResult && documentSelectResult.length > 0) {    
                  let fileRealPath = new fileUri.FileUri(documentSelectResult[0]);    
                  console.info('DocumentViewPicker.select successfully, uri: ' + fileRealPath);    
                  webview.AdsBlockManager.setAdsBlockRules(fileRealPath.path, true);    
                }    
              })    
            } catch (err) {    
              console.error('DocumentViewPicker.select failed with err:' + err);    
            }    
          })    
        }    
      }    
      Web({ src: this.main_url, controller: this.controller })    
        .onControllerAttached(()=>{    
          this.controller.enableAdsBlock(true);    
        })    
    }    
  }    
}

EnablingAdsBlocking.ets

import { webview } from '@kit.ArkWeb';    

// This example demonstrates how to click a button to add an array of domain names to the disallowed list.   
@Entry    
@Component    
struct WebComponent {    
  main_url: string = 'https://www.example.com';    
  text_input_controller: TextInputController = new TextInputController();    
  controller: webview.WebviewController = new webview.WebviewController();    

  @State input_text: string = 'https://www.example.com';    

  build() {    
    Column() {    
      Row() {    
        Flex() {    
          TextInput({ text: this.input_text, placeholder: this.main_url, controller: this.text_input_controller})    
            .id('input_url')    
            .height(40)    
            .margin(5)    
            .borderColor(Color.Blue)    
            .onChange((value: string) => {    
              this.input_text = value;    
            })    

          Button({type: ButtonType.Capsule}) { Text('Go') }    
          .onClick(() => {    
            this.controller.loadUrl(this.input_text);    
          })    

          Button({type: ButtonType.Capsule}) { Text('addAdsBlockDisallowedList') }    
          .onClick(() => {    
            let arrDomainSuffixes = new Array<string>();    
            arrDomainSuffixes.push('example.com');    
            arrDomainSuffixes.push('abcdefg.cn');    
            webview.AdsBlockManager.addAdsBlockDisallowedList(arrDomainSuffixes);    
          })    
        }    
      }    
      Web({ src: this.main_url, controller: this.controller })    
        .onControllerAttached(()=>{    
          this.controller.enableAdsBlock(true);    
        })    
    }    
  }    
}

DisAdsBlockSpecDomPages_one.ets

import { webview } from '@kit.ArkWeb';    

// In the following example, **addAdsBlockAllowedList()** and **addAdsBlockDisallowedList()** are used together to set the ad blocking feature for web pages.   
@Entry    
@Component    
struct WebComponent {    
  main_url: string = 'https://www.example.com';    
  text_input_controller: TextInputController = new TextInputController();    
  controller: webview.WebviewController = new webview.WebviewController();    

  @State input_text: string = 'https://www.example.com';    

  build() {    
    Column() {    
      Row() {    
        Flex() {    
          TextInput({ text: this.input_text, placeholder: this.main_url, controller: this.text_input_controller})    
            .id('input_url')    
            .height(40)    
            .margin(5)    
            .borderColor(Color.Blue)    
            .onChange((value: string) => {    
              this.input_text = value;    
            })    

          Button({type: ButtonType.Capsule}) { Text('Go') }    
          .onClick(() => {    
            this.controller.loadUrl(this.input_text);    
          })    

          Button({type: ButtonType.Capsule}) { Text('addAdsBlockAllowedList') }    
          .onClick(() => {    
            let arrDisallowDomainSuffixes = new Array<string>();    
            arrDisallowDomainSuffixes.push('example.com');
            webview.AdsBlockManager.addAdsBlockDisallowedList(arrDisallowDomainSuffixes);    

            let arrAllowedDomainSuffixes = new Array<string>();    
            arrAllowedDomainSuffixes.push('news.example.com');
            arrAllowedDomainSuffixes.push('sport.example.com');
            webview.AdsBlockManager.addAdsBlockAllowedList(arrAllowedDomainSuffixes);    
          })    
        }    
      }    
      Web({ src: this.main_url, controller: this.controller })    
        .onControllerAttached(()=>{    
          this.controller.enableAdsBlock(true);    
        })    
    }    
  }    
}

DisAdsBlockSpecDomPages_two.ets

import { webview } from '@kit.ArkWeb';

@Entry    
@Component    
struct WebComponent {    
  @State totalAdsBlockCounts: number = 0;    

  controller: webview.WebviewController = new webview.WebviewController();    

  build() {    
    Column() {    
      Web({ src: 'https://www.example.com', controller: this.controller })    
        .onAdsBlocked((details: AdsBlockedDetails) => {    
          if (details) {    
            console.info(' Blocked ' + details.adsBlocked.length + ' in ' + details.url);    
            let adList: Array<string> = Array.from(new Set(details.adsBlocked));    
            this.totalAdsBlockCounts += adList.length;    
            console.info('Total blocked counts :' + this.totalAdsBlockCounts);    
          }    
        })    
    }    
  }    
}

CollectingAdsBlockingInformation.ets