iOS 9 更新之Safari广告拦截器(Content Blocker)开发教程

下面是针对“iOS 9 更新之Safari广告拦截器(Content Blocker)开发教程”的完整攻略。

简介

iOS 9 更新后,Safari引入了 Content Blocker API。Content Blocker 可以用于拦截 Safari 加载的网页中的广告、图片以及其他的资源,以达到优化网站加载速度、降低流量消耗和提升用户体验的效果。本教程将会详细介绍 Content Blocker 的开发步骤。

开发步骤

1. 创建 Content Blocker Extension

Content Blocker Extension 是 Content Blocker 的一种实现方式,可用于拦截网页中的资源。要创建 Content Blocker Extension,只需在 Xcode 中新建一个 Target,选择 Content Blocker Extension 模板。

2. 添加规则(Rules)

在 Content Blocker Extension 中,规则是用于指定要拦截的内容的。规则可以是 JSON 或者是 Property List 格式。常见的规则包括:

  • url-filter(必选):用于指定拦截的 URL 地址,可以使用通配符或正则表达式。
  • action:用于指定拦截的行为,包括 block(阻止请求)、redirect-url(重定向 URL)和 css-display-none(隐藏元素)。

3. 加载规则

在 Content Blocker Extension 中,可以将规则存储在 Bundle 中,也可以从网络中加载规则。加载规则的步骤包括:

  • 创建一个新的 Data 类型的规则对象。
  • 解析 JSON 格式的规则,并初始化规则对象。
  • 将规则对象的值设置到 Content Blocker Extension 的存储中。

4. 调试 Content Blocker

调试 Content Blocker 的整个过程比较难以直观地观察到其效果。不过,我们可以通过 Safari 远程调试器来查看拦截的效果。具体步骤如下:

  • 在 iOS 设备或模拟器中运行应用程序。
  • 在 Safari 中打开开发者工具面板并选择远程 iOS 设备。
  • 选择该设备上的 Content Blocker Extension 并开启它,然后在面板中加载一个可以拦截广告的网站,即可查看效果。

示例说明

接下来,我们来看两个实例说明。

示例一:屏蔽知乎广告

以下代码片段是一个可以屏蔽知乎广告的规则:

{
    "trigger": {
        "url-filter": ".*zhihu.*",
        "resource-type": ["script", "image", "xhr"]
    },
    "action": {
        "type": "block"
    }
}

解释一下这个规则的含义:在 URL 匹配到“zhihu”的时候,对于所有的 script、image 和xhr 资源,通过 block 阻止它们的请求。

示例二:屏蔽 PCPOP 网页中的广告

以下是可以屏蔽 PCPOP 网页的广告的规则:

{
    "trigger": {
        "url-filter": ".*pcpop.*",
        "resource-type": ["script", "image", "style-sheet"]
    },
    "action": {
        "type": "css-display-none",
        "selector": "body > div[class]:not([class^='ad']), #topad, .related-box, #right-box"
    }
}

解释一下这个规则的含义:在 URL 匹配到“pcpop”的时候,根据选择器屏蔽 body 中所有 class 值不以“ad”开头的 div 元素、#topad 元素、.related-box 元素和 #right-box 元素。

以上是适用于 Content Blocker 的开发教程,希望对你有所帮助。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:iOS 9 更新之Safari广告拦截器(Content Blocker)开发教程 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • 浅谈html5标签css3的常用样式

    下面是关于“浅谈HTML5标签CSS3的常用样式”的完整攻略: HTML5标签的常用样式 div div是HTML5中最常用的标签之一,主要用于区分网页中的不同部分,通常用CSS样式来设置其外观。下面是一个设置div样式的示例: div { width: 200px; height: 200px; background-color: gray; border…

    css 2023年6月9日
    00
  • 网页制作中字体使用小结

    下面是关于网页制作中字体使用的攻略。 一、选择字体 在网页制作中,我们需要选择合适的字体来展示文字内容。通常情况下,我们可以使用以下两种方法来选择字体: 1. 使用标准字体 在网页中,标准字体指的是不需要用户额外下载才能显示的字体,这些字体通常已经预装在操作系统中。在网页制作中,我们可以使用以下几种标准字体: Arial:Arial字体是一种无衬线字体,清晰…

    css 2023年6月9日
    00
  • IOS登录页面动画、转场动画开发详解

    实现iOS登录页面动画、转场动画所需的技术有很多,下面我将介绍其中两种常用的方式。 一、使用CATransition实现转场动画 CATransition是CALayer的子类,它提供了一种简单的方式来添加转场动画效果。下面是步骤: 在源控制器实例化CATransition对象,并设置动画类型和方向 objc CATransition *trans = [C…

    css 2023年6月11日
    00
  • 使用css3背景渐变中的透明度来设置不同颜色的背景渐变

    使用CSS3背景渐变中的透明度来设置不同颜色的背景渐变是一种常见的前端设计技巧。下面是具体的操作方法和示例说明: 操作方法 使用CSS3的linear-gradient函数来设置渐变背景。 在渐变色值中添加透明度参数,使用rgba函数。 确定起始点和结束点的方向,使用方向参数设置渐变的方向。 将渐变色值赋值给background属性。 示例1:从上至下渐变 …

    css 2023年6月9日
    00
  • Div+CSS仿支付宝登录页面

    Div+CSS仿支付宝登录页面是一种实现网页布局的常见方法,其中Div表示网页中使用的块元素,CSS表示负责样式的层叠样式表。以下是完整的攻略。 1.创建基本文件夹结构 在本地环境下,创建一个文件夹,包含html、css、img三个文件夹,分别用于存放html文件、css样式文件和图片资源。 – index.html – /css – style.css -…

    css 2023年6月10日
    00
  • 引入css的四种方式总结(分享)

    我来为你详细讲解“引入CSS的四种方式总结(分享)”的完整攻略。 引入CSS的四种方式总结(分享) 在网页开发中,CSS是必不可少的。为了让页面获得各种各样的样式和布局,我们需要引入CSS文件。而引入CSS文件的方式一般有四种,分别是内联样式、嵌入式样式、外部样式和导入样式。 一、内联样式 内联样式就是在HTML标签中直接添加样式属性,这种方式适用于只有一两…

    css 2023年6月9日
    00
  • 最新百度PM告诉你SEO这六个方面的优化原则(干货)

    最新百度PM告诉你SEO这六个方面的优化原则(干货) 本文介绍了最新的百度搜索引擎优化原则,将涵盖以下六个方面的优化原则: 网站内容要有价值 关键词选择要精准 网站结构要清晰 链接质量要高 移动端适配要到位 速度优化要充分 下面将从这六个方面给出详细的优化攻略。 1. 网站内容要有价值 为了让用户有更好的体验,同时也是满足百度对内容要求的基础,网站内容需要提…

    css 2023年6月10日
    00
  • Vue项目中关于全局css的处理

    在Vue项目中处理全局css,有以下几种常见的方法: 1. 使用全局样式表 可以通过在<head>标签中引入全局样式表来实现全局css处理。在Vue Cli的脚手架中,在src目录下创建一个assets文件夹,用于存放全局css文件。然后在public/index.html文件中添加全局样式表的引用: <head> <link …

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部