如何构建Safari应用程序扩展

之前，我曾为Chrome和Safari编写了一个小的浏览器扩展程序，通过删除新闻提要和其他让我分心的内容，将Facebook简化为我认为有用的功能。

但是，使用Safari的最新更新后，每次关闭浏览器后，我的扩展名都会自动关闭。 我发现苹果有一个持续的计划，就是将Safari扩展与苹果应用程序的常规开发集成在一起，而不是像Chrome和Firefox那样采用更具互操作性的浏览器扩展方法。 在不久的将来，获取Safari扩展的唯一方法是将其下载为macOS App Store上与应用相关的扩展。

叹。 我有点喜欢使用Safari，主要是因为Apple在无处不在的跟踪过程中越来越强调保护用户隐私。 不幸的是，这意味着我要构建的所有Safari扩展都必须使用Apple的IDE Xcode开发 。

因此，我尝试这样做，但这很痛苦，主要是因为我找不到在线的单个教程，只能通过一个基本示例进行操作。 最终，我确实使用了Apple的文档和WWDC的Safari小组的谈话来弄清了事情，但是这比必要的时候更令人沮丧和耗时。

因此，为了使其他人学习起来更快，更轻松，下面是一个教程，其中通过一个简单的示例介绍了如何将我的“ Facebook Minimiser”构建为Safari App Extension：

如果尚未安装，请安装Apple的IDE Xcode。

打开Xcode，创建一个新项目，在macOS项目模板下选择“ Cocoa App”，然后单击“下一步”：

为项目命名，例如“ Facebook Minimiser”。 取消选中“使用情节提要”，“包括单元测试”和“包括UI测试”，因为我们仅做一个最小的示例，然后单击“下一步”：

选择保存项目的位置-在本教程中，我们只需将其保存在桌面上即可。 点击“创建”：

现在，我们看到模板应用程序已在Xcode中打开：

如果您和我一样对Xcode还是陌生的，请尝试通过单击左上角的“播放”三角形图标来运行当前的模板应用程序。 这将生成并运行该应用程序：

由于我们尚未向该应用程序添加任何用户界面，因此打开的应用程序窗口将为空白。

再次关闭应用程序：

现在，我们将Safari扩展“目标”添加到我们的应用中。 点击“文件”->“新建”->“目标…”：

在“ macOS”下，选择“ Safari扩展”，然后单击“下一步”。

给扩展名命名，例如“ Facebook Minimiser Extension”，然后单击“ Finish”。

当Xcode询问是否应“激活“ Facebook Minimiser Extension”方案吗？”时，请单击“取消”。

现在，已将名为“ Facebook Minimiser Extension”的文件夹添加到项目中：

如果您点击左上角的“播放”三角形图标，该应用将再次生成并运行。

苹果告诉我们

在构建应用程序时，Xcode首先构建Safari应用程序扩展，然后将其嵌入完成的应用程序包中。 应用程序运行后，您的扩展程序即可在Safari中使用。

让我们转到Safari，然后转到Safari>偏好设置。 点击“扩展程序”窗格。

嗯-我们的分机在哪里？ 事实证明，除非我们使用开发人员证书签署扩展名，否则它将不会自动显示。 如果尚未在Safari中打开“开发”菜单，请转至Safari>“偏好设置”>“高级”，然后勾选“在菜单栏中显示开发菜单”。

现在，转到顶部菜单中的“开发”，单击“允许未签名的扩展名”，然后输入密码。

万岁，现在我们的扩展程序出现了！ 如果勾选以启用它，我们将在工具栏中看到其图标：

该扩展程序尚未执行任何操作。 返回Xcode并通过右键单击“ Facebook Minimiser Extension”文件夹创建一个新文件：

选择“空”，然后单击“下一步”：

让我们将样式表命名为style.css ，将目标设置为“ Facebook Minimiser Extension”，然后单击“创建”：

作为初步测试，让我们隐藏新闻提要。 在Safari中，导航到Facebook，右键单击页面，选择“检查元素”，然后找到包含提要的元素的ID或类：

现在回到Xcode并将此对应的CSS代码添加到style.css ： 

  ＃topnews_main_stream_408239535924329 { 
 显示：无！重要； 
  }

在“ Facebook Minimiser Extension”文件夹中，单击“ Info.plist *”文件。 展开“ NSExtension”元素，然后单击加号图标以添加新元素：

Info.plist文件与Chrome扩展程序中使用的manifest.json文件非常相似。

将此元素命名为“ SFSafariStyleSheet”，并将其类型设置为“ Array”。 展开元素，然后单击加号图标以添加新元素：

将此元素的类型设置为“字典”，将其展开，然后单击加号图标以添加新元素：

将此元素命名为“样式表”，将其类型保留为“字符串”，并为其赋予值“ style.css”：

最后，展开“ SFSafariWebsiteAccess”，然后在“允许的域”下将“项目0”元素的值设置为“ * .facebook.com”：

现在，如果我们重建应用程序并在Safari中激活扩展程序，我们将看到新闻源已隐藏：

最后，调整style.css的内容以构建我的Facebook Minimiser： 

  / *要从显示中删除的元素* / 
  #pagelet_ego_pane，/ *为您推荐和赞助内容* / 
  ＃u_0_1t，/ *右侧栏在线即时聊天的人* / 
  ＃u_0_1u，/ *右侧栏即时聊天提示* / 
  ＃u_0_1v，/ *右侧栏即时聊天提示* / 
  #pagelet_rhc_footer，/ *选择语言提示和Facebook版权页脚* / 
  #createNav，/ *在左下方创建快捷方式* / 
  #appsNav，/ *左侧的浏览栏* / 
  #pagelet_trending_tags_and_topics，/ *热门话题* / 
  #stories_pagelet_rhc，/ *故事* / 
  ＃topnews_main_stream_408239535924329，/ *新闻提要* / 
  .fbChatSidebarBody， 
  ＃u_0_1w， 
  #pagelet_gaming_destination_rhc，/ *游戏侧边栏* / 
  #pagelet_marketplace_new_user_top_picks_rhc / *市场侧边栏* / { 
 显示：无！重要； 
  } / *从聊天边栏所在的位置删除边框* / 
  .fbChatSidebar { 
 左边框：无！重要； 
  } / *将背景设为白色，而不是通常的灰色* /＃globalContainer，＃contentCol，._ 5vb _，._ 5vb_＃contentCol，＃u_0_1s，._ 4oes，._ 51x_，body { 
 背景色：白色！重要； 
  }

现在，我们获得了一个很好，简单且分散注意力的免费Facebook体验：

这些是使用Xcode在应用程序中嵌入基本Safari扩展程序的基本步骤。 我确实发现（并向Apple提交了错误报告），在Mojave中，我的扩展有时会从Safari>首选项>扩展中神秘地消失-希望这不会在您的计算机上发生，并且/或Apple会尽快修复此错误。

最初于 2018 年11月2日 发布在 blog.ulriklyngs.com 上。

Interesting Posts