一款可以跳过 YouTube 广告的 Chrome 扩展程序（+创建步骤）
跳过广告
章节
1. 如何安装Skip Ad
2.跳过广告的外观
3. Skip Ad 的工作原理
4 如何创建跳过广告
5存储库
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
最近我开发了一款名为“我的笔记”的 Chrome 扩展程序，由于它获得了不错的评价，所以我决定再开发一款—— “跳过广告”。
这次我还添加了一个教程，讲解如何创建扩展程序。
跳过广告
Skip Ad是一款简单的 Chrome 扩展程序，它可以在https://www.youtube.com上为您跳过 YouTube 广告，让您可以不受干扰地享受内容。
我选择创建Skip Ad，是因为这是我个人想使用的功能，而且创建起来也很简单，因此很适合用来展示如何创建 Chrome 扩展程序。
读完本文后，您不仅可以享受无广告的 YouTube 观看体验，还可以创建像这样的 Chrome 扩展程序。
章节
1. 如何安装Skip Ad
该扩展程序可以从网络商店安装，网络商店是发布扩展程序的地方。
关联：
https://chrome.google.com/webstore/detail/skip-ad/bimlffinhbdhgpomhngmnhidjgnfcnoc
2.跳过广告的外观
扩展程序安装完成后，扩展程序列表和工具栏中将出现以下图标。
如果您想从工具栏中隐藏该图标，请右键单击该图标，然后选择“在 Chrome 菜单中隐藏”。
3. Skip Ad 的工作原理
打开 YouTube 页面后，该扩展程序会定期检查是否有新广告出现并自动关闭。如果您在安装该扩展程序之前已经打开了 YouTube 页面，只需刷新页面即可。
下面显示的是一些会自动为您关闭的广告类型，这些广告通常需要您手动关闭。
^^^ 视频广告可以通过“跳过广告”按钮（显示单个广告）或“跳过广告”按钮（播放列表中显示多个广告）关闭。
^^^ 横幅广告可以通过X按钮关闭。
视频广告和横幅广告可以在视频开头出现，也可以在播放过程中出现。
用于关闭广告的按钮会随广告一起加载，但如果是视频广告，按钮通常会有延迟显示。“跳过广告”功能甚至可以在关闭按钮显示之前就跳过广告。因此，广告可能只会短暂出现。
4 如何创建跳过广告
4.1 首先创建一个新文件夹
我们首先创建一个新文件夹，用于存放扩展文件。
文件夹名称可以是任意名称。通常情况下，它与文件扩展名相同，只是采用 kebab 大小写（也称为连字符大小写）。
示例：扩展程序名称“跳过广告” => 文件夹名称skip-ad
你可能会问，两个扩展程序可以同名吗？答案是肯定的。
两个扩展程序可以拥有相同的名称和代码，但它们仍然可以被安装，因为它们的唯一ID是不同的。
为了便于学习，我们不妨将该扩展程序称为“不再有广告”。
创建一个文件夹no-more-ad。
4.2 创建manifest.json
从现在开始，我们创建的每个文件都将放在该文件夹内no-more-ad。
每个扩展名都必须包含 manifest.json一个文件。至于其他文件的命名和组织方式，则由您自行决定。
manifest.json使用以下内容创建：
{
"manifest_version": 2,
"name": "No More Ad",
"description": "Skips YouTube Ads.",
"version": "1.0"
}
必需键： manifest_version，name和version。其他任何键都是可选的。更多信息请访问：https://developer.chrome.com/extensions/manifest。
你可能会感到惊讶，但目前我们确实有一个可以本地安装的扩展程序。
不过它不会执行任何操作，只会出现在扩展程序列表中。
4.3 添加图标
从存储库下载图标并将其放入no-more-ad文件夹中。
更新manifest.json以分配图标。
{
"manifest_version": 2,
"name": "No More Ad",
"description": "Skips YouTube Ads.",
"version": "1.0",
"icons": { "128": "icon128.png" }
}
现在，由于扩展程序有了图标，它将出现在扩展程序列表和工具栏中。您可以稍后尝试其他图标。
4.4 本地安装扩展程序
虽然我们只有manifest.json文件，但扩展程序已经可以安装，并且随着代码的更新，可以手动重新加载，这也是测试是否有任何损坏的一种方法。
要安装扩展程序，请先打开扩展程序列表，可以通过菜单或进入chrome://extensions选项卡打开。
现在，点击“加载已解压文件”按钮：
导航到no-more-ad文件夹并单击“打开”。
扩展程序加载完毕后，您应该会看到以下卡片：
橙色图标表示该扩展程序已安装在本地。
如果您已安装Skip Ad，请暂时禁用它，以免与No More Ad 冲突。
4.5 是时候跳过广告了
用于跳过广告的按钮（3跳过广告的工作原理）具有 CSS 类，使它们很容易被找到。
CSS类：
// Video Ad; "Skip Ad" or "Skip Ads" button
"ytp-ad-skip-button-text"
// Banner Ad; "X" button
"ytp-ad-overlay-close-button"
跳过广告的代码相当简单。它应该查找可以关闭广告的按钮，如果找到，则触发相应的代码click()。
youtube.js立即创建：
const click = (clazz) => {
const buttons = document.getElementsByClassName(clazz);
for (const button of buttons) {
button.click();
console.log("No More Ad");
}
}
setInterval(() => {
click("ytp-ad-skip-button-text");
click("ytp-ad-overlay-close-button");
}, 300);
console.log("No More Ad - Init");
你可以打开 YouTube 并将代码粘贴到控制台来测试。然后，观看一些视频。如果广告关闭，你应该会在控制台中看到：
"No More Ad"
最后一步是将这段代码添加到 YouTube 页面，而不是手动粘贴，也就是通过扩展程序添加。
4.6 设置内容脚本
内容脚本可以是 CSS、JS 或两者兼有。换句话说，它是一种可以添加或修改页面内容（因为它能够访问DOM）的脚本，其作用是将脚本插入到页面中。
就我们而言，我们打算将之前创建的内容插入youtube.js到 YouTube 页面中。
这一步骤非常简单，只需要更新manifest.json：
{
"manifest_version": 2,
"name": "No More Ad",
"description": "Skips YouTube Ads.",
"version": "1.0",
"icons": { "128": "icon128.png" },
"content_scripts": [
{
"matches": ["https://*.youtube.com/*"],
"js": ["youtube.js"]
}
]
}
我们已定义，任何与YouTube 页面匹配的youtube.js页面都应包含。
通过 `<script>` 标签定义的内容脚本会以声明式的manifest.json方式自动注入。这是向其他页面插入脚本的最简便方法。
另一种注入内容脚本的方法是使用编程方式。这种方法更复杂，但也更具可定制性。
内容脚本运行在隔离的环境中，因此它们无法影响其他脚本。正如上文所述，它们可以访问DOM。而这正是我们所需要的。
有关内容脚本的更多信息，请访问：https://developer.chrome.com/extensions/content_scripts
4.7 重新加载扩展程序
我们在步骤4.4“本地安装扩展”中安装的扩展需要重新加载才能应用更改。
点击重新加载按钮即可轻松完成此操作。
如果一切顺利，则不应显示任何错误。
4.8 测试扩展程序
现在，是时候测试一下这个扩展程序了。打开一个新的 YouTube 页面，或者重新加载现有的页面。
要查看内容脚本是否已插入，请访问“来源”页面：
在控制台中可以看到：
"No More Ad - Init"
看看一些 YouTube 视频。你会发现广告会自动关闭。
再次检查控制台。对于每个关闭的广告，您应该看到：
"No More Ad"
您已成功创建扩展程序。
5存储库
您可以在这里查看扩展程序：
https://github.com/penge/skip-ad
希望您喜欢这篇文章并从中有所收获。
如果您有任何疑问，我将乐意解答。
如果你想看更多关于这个主题的技巧、窍门或系列文章，请告诉我。
现在，让我们尽情享受这款扩展程序，以更少的广告开启 2020 年吧！
干杯!
文章来源：https://dev.to/penge/chrome-extension-that-skips-youtube-ads-steps-how-to-create-it-3ibp