Flutter广告拦截插件adblocker_webview的使用

简介

adblocker_webview 是一个在 Flutter 中实现的 WebView 插件，可以阻止网页中出现的大部分广告。当前实现基于官方的 flutter_inappwebview 包，因此该包的功能和限制也包含在内。

平台支持

WebView 实现

• iOS: 使用 WKWebView
• Android: 使用 WebView

入门

添加依赖

在 pubspec.yaml 文件中添加 adblocker_webview 作为依赖：

dependencies:
  adblocker_webview: ^x.x.x  # 请替换为最新版本号

使用

1. 获取 AdBlockerWebviewController 实例

final _adBlockerWebviewController = AdBlockerWebviewController.instance;

最好在显示 WebView 之前初始化控制器：

@override
void initState() {
  super.initState();
  _adBlockerWebviewController.initialize();
  // ... 其他代码
}

2. 在 widget 树中添加 AdBlockerWebview

AdBlockerWebview(
  url: "Valid url Here",
  adBlockerWebviewController: _adBlockerWebviewController,
  onProgress: (progress) {
    setState(() {
      _progress = progress;
    });
  },
  shouldBlockAds: true,
  // 其他参数
);

支持的参数

const AdBlockerWebview({
  required this.adBlockerWebviewController,
  required this.shouldBlockAds,
  this.url,
  this.initialHtmlData,
  this.onLoadStart,
  this.onLoadFinished,
  this.onProgress,
  this.onLoadError,
  this.onTitleChanged,
  this.options,
  this.additionalHostsToBlock = const [],
  super.key,
}) : assert(
    (url == null && initialHtmlData != null) ||
    (url != null && initialHtmlData == null),
    'Both url and initialHtmlData can not be non null');

缓存

• API 响应的广告主机列表会自动缓存，无需额外配置！

贡献

欢迎贡献 😄。如果您想添加新功能或发现错误，请在此 GitHub 仓库 提交问题。

贡献指南

1. 首先创建一个 issue，确保您的请求不是重复的。
2. 创建仓库的 fork（如果是第一次贡献）。
3. 从 develop 分支创建一个新的分支。
4. 分支名称应指示贡献类型：
   • feature/** 用于新功能
   • bugfix/** 用于修复错误
5. 向 develop 分支提交 PR。

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 adblocker_webview 插件：

import 'package:adblocker_webview/adblocker_webview.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _adBlockerWebviewController = AdBlockerWebviewController.instance;
  bool _showBrowser = false;
  bool _shouldBlockAds = true;
  String _url = "";

  @override
  void initState() {
    super.initState();
    _adBlockerWebviewController.initialize();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      floatingActionButton: _showBrowser
          ? FloatingActionButton(
              child: const Icon(Icons.edit),
              onPressed: () {
                setState(() {
                  _showBrowser = false;
                });
              },
            )
          : null,
      body: _showBrowser
          ? Browser(
              url: _url,
              controller: _adBlockerWebviewController,
              shouldBlockAds: _shouldBlockAds,
            )
          : UrlInput(
              onSubmit: (url) {
                setState(() {
                  _url = url;
                  _showBrowser = true;
                });
              },
              onBlockAdsStatusChange: (shouldBlockAds) {
                setState(() {
                  _shouldBlockAds = shouldBlockAds;
                });
              },
              shouldBlockAds: _shouldBlockAds,
            ),
    );
  }
}

class Browser extends StatelessWidget {
  final String url;
  final AdBlockerWebviewController controller;
  final bool shouldBlockAds;

  const Browser({
    Key? key,
    required this.url,
    required this.controller,
    required this.shouldBlockAds,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return AdBlockerWebview(
      url: url,
      adBlockerWebviewController: controller,
      onProgress: (progress) {
        // 处理进度变化
      },
      shouldBlockAds: shouldBlockAds,
    );
  }
}

class UrlInput extends StatelessWidget {
  final Function(String) onSubmit;
  final Function(bool) onBlockAdsStatusChange;
  final bool shouldBlockAds;

  const UrlInput({
    Key? key,
    required this.onSubmit,
    required this.onBlockAdsStatusChange,
    required this.shouldBlockAds,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(
          onSubmitted: (value) {
            onSubmit(value);
          },
          decoration: const InputDecoration(
            labelText: 'Enter URL',
          ),
        ),
        SwitchListTile(
          title: const Text('Block Ads'),
          value: shouldBlockAds,
          onChanged: (value) {
            onBlockAdsStatusChange(value);
          },
        ),
      ],
    );
  }
}

希望这个示例能帮助你更好地理解和使用 adblocker_webview 插件！如果有任何问题或建议，请随时提出来。