
Chrome扩展程序是生命。
至少我的生活 我将它们用于广告拦截,时间管理,语言学习,开发,保存文章以及无数其他所有内容。
尽管我使用了很多,但我从未想过要构建一个。 也就是说,直到上周。 我读了Mackenzie Higa的一篇有关如何制作一个的文章,并意识到它可以多么容易。 然后,我构建了一个扩展程序,该扩展程序允许我将歌曲添加到Spotify。
- Spotify的新个性化播放列表– Stephen Cirino –中
- 2018年10月播客的10个播客
- 心情日记— 004
- 不要让Spotify通过#BlackGirlMagic获利。 智力资产=世代财富
- 播放列表2016年夏季
要使用扩展名,首先我要在页面上选择任何文本,代表我要查找的歌曲或歌手。 然后,右键单击并选择“添加到Spotify”,然后iframe将根据我突出显示的任何文本打开搜索。 然后,我可以从结果中选择一首歌曲,然后将其直接添加到我的任何播放列表中。

在进行此操作的同时,我了解了很多扩展结构的知识,因此今天我想就此进行简要概述。
大多数chrome扩展程序都有4个主要部分,在本文中,我将以扩展程序为例来介绍它们的含义以及它们如何协同工作。
1.清单

此json文件是扩展程序的蓝图。 它定义了应用程序的体系结构,使用的资源,所需的权限以及其他重要细节,例如名称,描述和版本号。
2.背景

后台页面是在浏览器运行时始终处于活动状态的页面。 它的主要目的是控制扩展的行为。 也有所谓的事件页面,它们以相同的方式工作,但是仅在某些事件触发时才运行。 除非您绝对需要始终运行背景脚本,否则事件页面可能是更好的选择。
就我而言,我的背景不是一个带有脚本的html页面,而是一个javascript文件。 这是我扩展程序的控制中心,内容脚本和iframe通过该消息中心彼此进行通信,并负责保存和检索用户的Spotify帐户数据,因此它们只需要登录一次即可。
3.弹出窗口

这是扩展程序最容易设置和理解的部分。 只是一个html页面而已。 大多数扩展程序都与网页进行交互,为使弹出窗口进行交互,它需要发送要通过chrome.tabs.executeScript()方法执行的代码。 例如,您可以发送一个脚本,以将您所在页面的背景颜色更改为从弹出菜单的下拉菜单中单击的任何颜色。 但是,就其本身而言,弹出窗口实际上无法从您的主窗口读取DOM。 为此,您需要一个内容脚本。
3.内容脚本

这是扩展程序的一部分,将在浏览器中加载的网页中执行。 它具有对DOM的完全访问权限,就像它是该页面的一部分一样。 但是,这意味着它无权访问扩展程序的其他脚本和页面。 要让他们进行交流,您可以使用chrome.runtime.SendMessage发送消息,并在后台脚本中使用相应的侦听器发送消息。
如果是Add-to-Spotify,则内容脚本会打开和关闭iframe,并会跟踪选定的文本,以便它可以出现在搜索查询中。
自己尝试!
Chrome开发者网站上有更详细的说明,以及一些教程和示例,您可以使用它们来轻松了解发生的情况,因此,我强烈建议您尝试一下。
另外,如果您有Spotify Premium帐户,请尝试我的扩展程序,让我知道您的想法think
谢谢阅读!