转载

利用 Fluid 自制 Mac 版 Overcast 应用

我喜爱收听播客，健身、上/下班途中，工作中，甚至是忙着做家务时。大多数情况下我会用 Marco Arment 开发的Overcast（Freemium）在 iPhone 上收听，这是我目前最喜爱的 Podcast 应用之一 ¹ ，我享受 Overcast「杀手级」功能 Smart Speed（智能加速） ² 和 Voice Boost（声音均衡器） ³ 所带来的收听效率以及更棒的音质。

虽然 Overcast 有 Web App ，可每日在浏览器中为其独立打开一个标签页总会感到厌烦，一不小心把浏览器关闭了，还得重新打开浏览器输入网址或者点击「个人收藏」上的标签重新开启。我一直渴望 Overcast 的桌面客户端能尽早登陆 OS X 平台，尤其是在 instacast 母公司 Vemedio 宣布终止 Instacast 项目之后，期望更加强烈。

于是，我决定着手解决这件事，利用 Fluid 把 Overcast Web App 创建成 Fake Mac App，方便日常使用。

关于 Fluid

Fluid.app 可以把任意 Web App 创建成独立的 Mac App，支持「Pin to Status Bar」功能（需付费解锁），方便用户在 Menu Bar 上对所创建的 Mac App 进行直接操作。

Fluid.app 的基础功能是免费的，用户可以免费下载安装。支付 4.99 美元可获得完整版，解锁额外的功能：

创建的 Mac App 可以使用单独的 Cookie (Preferences → Security → Cookie Storage) ；
Pin 创建的 Mac App 到 Menu Bar (Fluid.app Menu → Pin to Status Bar…) ；
创建的 Mac App 可以自定义 Userscripts 和 Userstyles (Window → Userscripts/Userstyles) ；
全屏模式 (View → Enter Full Screen) 。

创建 Overcast Mac App

Part 1:

这一步十分简单，开启 Fluid.app 后在 URL 中填写 Overcast Web App 的地址： https://overcast.fm ； Name 按自己喜好填写，如： Overcast ； Lacation 选择存放路径； Icon 添加一个自己喜欢的 icon。如果留空，Fluid.app 会自动从 Web App 上抓取一个 icon。

利用 Fluid 自制 Mac 版 Overcast 应用

点此下载 Overcast 图标 >

Part 2:

点击「Create」即可完成 Overcast Mac App 的创建。开启 Overcast Mac App 后做如下设置：

Preferences → General

Home page: https://overcast.fm
Global shortcut: ⌃⌥⌘O（全局 Hotkey 快捷操作，可按自己的喜好设置）

Preferences → Security

Enable plug-ins
Enable Javascript
Accept Cookies: Only from sites I visit
Cookie Storage: Shared with Safari (需付费解锁)

Preferences → Whitelist

Allow browsing to URLs matching these
Patterns: *overcast.fm*

完成上述设置后，基于免费版 Fluid.app 所创建的 Overcast Mac App 已完成，如果你想让 Overcast Mac App 拥有更为完善的功能，接近完美的用户界面，则需要付费解锁完整版，才可按下列步骤继续操作。

利用 Fluid 自制 Mac 版 Overcast 应用

Pin It

把 Overcast Mac App 的工作界面 Pin 到 Menu Bar 上 ⁴ Overcast Menu → Pin to Status Bar… ，「Pin to Status Bar」后 Overcast Mac App 支持基本的 Hotkey 快捷操作，如： ⌘→ （前进）和 ⌘← （后退）。

Userscripts

利用 @DannyBres 编写的脚本添加自定义 Hotkey 快捷方式，在 Menu Bar 上右键（⌃⇧⌘U）Overcast Mac App 的 icon，点选 Userscripts。

利用 Fluid 自制 Mac 版 Overcast 应用

复制如下脚本，按上图所标注步骤创建一个新的 Userscripts，Pattern： *overcast.fm* ：

var episodeBody = $('#episode_body').text();  if (showUnreadNumberOnDock == false){  window.fluid.dockBadge = "";  } else {  var pathname = window.location.pathname;  if (pathname == "/podcasts" && showUnreadNumberOnDock == true) {  var numberOfUnread = $('.episodecell').length;  window.fluid.dockBadge = numberOfUnread;  } }  $('body').keydown(function(event) {  if (event.keyCode == 80) {  toggleAudio();  }  if (event.keyCode == 70) {  skipForwards();  }  if (event.keyCode == 66) {  skipBackwards();  }  if (event.keyCode == 71) {  goFaster();  }  if (event.keyCode == 83) {  goSlower();  }  console.log(event.keyCode) }); function toggleAudio() {  if (!$('#audioplayer').get(0).paused) {  $('#audioplayer').get(0).pause();  } else {  $('#audioplayer').get(0).play();  }  } function skipForwards() {  $('#audioplayer').get(0).currentTime+=forwardSkipDuration; } function skipBackwards() {  $('#audioplayer').get(0).currentTime-=backwardSkipDuration; } function goFaster() {  $('#audioplayer').get(0).playbackRate+=speedIncrease;  updatePlaybackDisplay(); } function goSlower() {  if($('#audioplayer').get(0).playbackRate - speedDecrease > 0) $('#audioplayer').get(0).playbackRate-=speedDecrease;  updatePlaybackDisplay(); } function updatePlaybackDisplay() {  if ($('#audioplayer').get(0).playbackRate == 1) {  var textForBody = episodeBody;  } else {  var textForBody = 'Playback speed: ' + $('#audioplayer').get(0).playbackRate.toFixed(2) + " - "+episodeBody;  }  $('#episode_body').text(textForBody); }

此脚本所对应的 Hotkey ⁵ 快捷方式如下：

P — [Play] 暂停或播放当前播客；
F — [Forwards] 向前快进 30 秒；
B — [Backwards] 向后倒退 30 秒；
G — [Go Faster] 提高 0.1 倍播放速度 ⁵ ；
S — [Slower] 降低 0.1 倍播放速度。

Userstyles

Overcast Mac App 工作界面在 OS X 10.10+ 上有点格格不入，利用 @thanland 所编写的 Userstyles 和手动收缩窗口重新布局 Overcast Mac App 的工作界面，并新增一条 2px 橙色滚动条 ⁶ ，使之更有原生 Mac App 的范儿。

利用 Fluid 自制 Mac 版 Overcast 应用

复制如下脚本，按上图所标注步骤创建一个新的 Userstyles，Pattern 同为： overcast.fm ：

/* Custom scroll bar */ html {  overflow: auto; } body {  position: absolute;  top: 10px;  left: 0;  bottom: 10px;  right: 10px;  padding: 30px 20px 30px 30px;   overflow-y: scroll;  overflow-x: hidden; } ::-webkit-scrollbar {  width: 2px; } ::-webkit-scrollbar-track {  background: #eee; } ::-webkit-scrollbar-thumb {  -webkit-border-radius: 10px;  border-radius: 10px;  background: rgba(252,126,15,0.8);  } ::-webkit-scrollbar-thumb:window-inactive {  background: rgba(252,126,15,0.4);  } /* Page layout tweaks */ .nav {  padding-top: 0 !important; } .container h2:first-child {  margin-top: 0 !important; } #audioplayer {  margin-bottom: 1em !important; }

按上述步骤操作完毕后，一款功能完善功能，界面美观的 Fake Overcast Mac App 便创建完成。Enjoy it!

结语

以上内容只是抛砖引玉，如果感兴趣还可以利用 Fluid.app + Web App 创建你所需要的 Fake Mac App，对应的 Userscripts/Userstyles 脚本可在 GitHub Gist 上查找或者自行编写。

正文到此结束

所属分类：编程技术

本文标签： App https 智能 git GitHub 锁 ip Menu 开发 UI list web 安装 key update cat URLs java tar HTML
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二