创建一个Chrome扩展名 - 剩下YouTube的动手教程
#javascript #网络开发人员 #教程 #extensions

我们都喜欢AI生成的封面图像，对吗？

嘿，Internet Explorer！不，不是浏览器，您是冒险进入Chrome扩展世界的冒险精神。您很有可能会在浏览器中挂出一堆精美的小工具，使您的生活一次更轻松。有没有想过是如何制作的？

我们将创建一个非常有用的镀铬扩展名，您会想知道没有它的YouTube-D。这就是所谓的“ YouTube剩余”，它确实可以在Tin上说出的内容，向您显示YouTube视频中剩余的时间。在下次会议之前，不再斜视小时的时间戳或进行心理数学来弄清楚您是否可以再添加一个猫视频。

和最好的部分？制作Chrome Extension与您最喜欢的食谱一样简单。在周日的早晨想想煎饼，而不是五道菜的晚餐。因此，如果您可以翻转煎饼，则全部设置为创建此扩展名。

准备开始？您可以下载完成的扩展名here。但是，如果您在这里旅行，让我们卷起我们的袖子，然后潜入！

入门：扩展食谱的成分

在开始烹饪镀铬扩展之前，请确保我们手头上有所有成分。不用担心，我们不是在谈论异国香料或难以找到的物品。 Chrome Extension的配方需要一些基本的内容：

  1. 少量的HTML和CSS知识：您不需要成为编码世界中的米其林星级厨师，而是知道自己围绕HTML和CSS的方式（不是真的对于此扩展）是必须的。

  2. javaScript的一点点：这是将我们扩展到生活的秘密酱。 JavaScript就像在米其林星级菜肴中的那种奇怪的成分 - 您不确定它是什么，如果您知道，您可能会有些糟糕。但是某种程度上，它在整体食谱中起作用。这是古怪的，不可预测的，让我们面对现实，是垃圾箱的火。但是，就像这种特殊成分一样，JavaScript在Chrome扩展中至关重要。

  3. Google Chrome ：这似乎很明显，但是您需要在计算机上安装镀铬浏览器。毕竟，我们正在制作Chrome Extension！

  4. 文本编辑器：这是您正在编写代码的地方。那里有很多选择，VI，VIM，Neovim等。

现在我们已经收集了成分，让我们看一下食谱。我们将首先设置我们的项目并创建manifest.json文件，就像我们扩展程序的指令卡一样。然后，我们将转到contentScript.js文件，在那里我们编写为扩展程序提供动力的JavaScript代码。最后，我们将测试我们在Chrome的扩展，并庆祝我们的烹饪错误，编码成就。

食谱卡：清单。

首先在我们的Chrome扩展名cook-off中是manifest.json文件。将其视为扩展的食谱卡。在这里，您列出了有关扩展的所有关键细节，例如其名称，版本和所需的权限。这也是您告诉Chrome要运行哪些脚本以及何时运行它们的地方。

在我们的YouTube剩余扩展方面，manifest.json文件非常简单。它指定了contentScript.js文件（我们的主课程，我们将要稍微进行）应在YouTube网页上运行。

{
  "manifest_version": 3,
  "name": "YouTube Remaining",
  "version": "1.0",
  "permissions": ["activeTab", "scripting"],
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "content_scripts": [
    {
      "matches": ["https://*.youtube.com/*"],
      "js": ["contentScript.js"]
    }
  ]
}

让我们分解此食谱：

  • “ subtest_version” ：我们正在使用清单文件格式的版本3。这是最新版本，并引入了版本2的一些更改，包括请求权限的不同方法。

  • “名称”和“版本” ：我们的扩展名为“ YouTube剩余”，我们处于1.0版。每次更新扩展程序时，都会增加此版本号。

  • “权限” ：我们要求“ Activetab”和“脚本”权限。 “ Activetab”权限允许我们的扩展程序与用户调用扩展名时与活动选项卡进行交互，而“脚本”权限允许我们在选项卡中注入和删除脚本。

  • “图标” ：这为我们在不同尺寸的扩展名指定了图标。这些图标将显示在扩展管理页面和工具栏等各个地方。

  • “ content_scripts” ：这是我们告诉Chrome将contentScript.js文件注入与模式匹配的任何页面“ https：/// .youtube.com/”。这意味着我们的脚本将在任何YouTube页面上运行。

在设置了manifest.json文件后，我们为我们的Chrome扩展奠定了基础。接下来，我们将继续进行主要事件：contentScript.js文件。

转换功能：翻译时间

在我们进入主菜之前，让我们搅拌一些稍后需要的配菜。在我们的contentScript.js文件中，我们有两个辅助时间转换的助手功能：durationToSeconds和secondsToDuration。这些功能就像我们扩展的厨师一样，在幕后工作以确保一切顺利运行。

持续时间三秒

将此功能视为我们值得信赖的厨房计时器。格式为“ HH：MM：SS”或“ MM：SS”的格式需要持续时间字符串，并将其转换为秒。这就像将食谱分解为更简单的步骤，使我们更容易遵循。

function durationToSeconds(duration) {
    const parts = duration.split(':').map(part => parseInt(part, 10));
    let seconds = 0;

    if (parts.length === 3) {
        // Format: hh:mm:ss
        seconds += parts[0] * 3600; // hours
        seconds += parts[1] * 60; // minutes
        seconds += parts[2]; // seconds
    } else if (parts.length === 2) {
        // Format: mm:ss
        seconds += parts[0] * 60; // minutes
        seconds += parts[1]; // seconds
    }

    return seconds;
}

二stonulation

现在，让我们翻转计时器。此功能是durationToSeconds的相反。它需要几秒钟，然后将其转换为格式“ HH：MM：SS”或“ MM：SS”的持续时间字符串。这就像在食谱上阅读烹饪时间，向我们展示了我们可以轻松理解的格式的时间。

function secondsToDuration(seconds) {
    const hrs = Math.floor(seconds / 3600);
    const mins = Math.floor((seconds % 3600) / 60);
    const secs = seconds % 60;

    let duration = "";

    if (hrs > 0) {
        // Pad to 2 digits
        duration += String(hrs).padStart(2, '0') + ":";
    }

    // Pad to 2 digits
    duration += String(mins).padStart(2, '0') + ":";
    duration += String(secs).padStart(2, '0');

    return duration;
}

使用这两个功能，我们已经设置了计时器，我们准备在扩展中处理时间转换。

SOUS厨师：Waitforelement功能

我们菜单上的下一个是waitForElement功能。此功能就像是sous厨师，他确保在厨师开始烹饪之前准备好所有食材。在我们的扩展的上下文中，它确保我们需要在开始操纵它们之前将我们需要的元素加载到页面上。

function waitForElement(selector, callback) {
    if (document.querySelector(selector)) {
        callback();
    } else {
        setTimeout(() => {
            waitForElement(selector, callback);
        }, 500);
    }
}

在繁华的厨房里，时机就是一切。您不想在切碎大蒜之前开始炒洋葱，对吗？同样，在网页中，我们无法在满载之前开始操纵元素。

waitForElement函数将CSS选择器和回调函数作为参数采用。它检查页面上是否存在匹配选择器的元素。如果确实如此，它立即调用回调函数。如果没有，它将等待半秒（500毫秒），然后再次检查，重复此过程直至找到元素。

此功能对于我们的扩展名至关重要，因为YouTube是一个动态的网站，这意味着页面上的元素可以在不同时间加载。我们使用waitForElement来确保在尝试添加剩余时间显示之前，在页面上存在视频时间元素。

有了我们的Sous厨师，我们准备开始烹饪扩展的主要过程：创建和更新剩余的时间显示。

主课程：服务剩余时间显示

既然我们已经关注成分的厨师了，现在该开始烹饪我们的主要过程了。这是我们创建剩余时间显示并在YouTube视频播放器上使用它的地方。

首先，我们等待当前时间元素在页面上加载。准备就绪后，我们从页面中选择当前时间，时间分离器和持续时间元素。

waitForElement('.ytp-time-current', () => {
    const currentTimeElement = document.querySelector('.ytp-time-current');
    const timeSeparatorElement = document.querySelector('.ytp-time-separator');
    const durationElement = document.querySelector('.ytp-time-duration');

将这些元素视为我们菜肴的主要成分。我们还获得了这些元素的父元素，就像我们的盘子一样，我们将安排我们的食材。

    const parentElement = currentTimeElement.parentElement;

接下来，我们为剩余时间创建一个新的分离器和一个新的跨度。我们将适当的类添加到这些元素中并设置其文本内容。对于剩余的时间元素，我们以视频的完整持续时间对其进行初始化，并带有“ - ”符号以表明剩余时间。

    const newSeparator = document.createElement('span');
    newSeparator.classList.add('ytp-time-separator');
    newSeparator.textContent = ' / ';

    const remainingTimeElement = document.createElement('span');
    remainingTimeElement.classList.add('ytp-time-remaining');
    remainingTimeElement.textContent = '-' + durationElement.textContent;

最后，我们将新元素添加到父元素中，有效地为YouTube视频播放器上的剩余时间显示。

    parentElement.appendChild(newSeparator);
    parentElement.appendChild(remainingTimeElement);
})

，但我们还没有完成！我们的主课程需要更多的调味料。

调味：保持显示器的更新使用Mutation Observer

就像一位优秀的厨师在烹饪时密切关注他们的菜，调整调味料和根据需要进行搅拌一样，我们的扩展需要密切关注YouTube视频播放器，并随着视频的进行更新剩余的时间显示。这是MutationObserver进来的地方。

    const observer = new MutationObserver(() => {
        const totalDuration = durationToSeconds(durationElement.textContent);
        const currentTime = durationToSeconds(currentTimeElement.textContent);
        const remainingTime = totalDuration - currentTime;

        remainingTimeElement.textContent = '-' + secondsToDuration(remainingTime);
    });

    observer.observe(currentTimeElement, { childList: true, characterData: true, subtree: true });

将MutationObserver视为我们菜肴中的调味料。这就是使我们扩展的动态风味，使剩余的时间在视频播放时保持新鲜和准确的原因。

MutationObserver观看textContent的textContent的更改。每当当前时间变化时，它都会重新计算剩余时间并更新remainingTimeElement。

顶部的樱桃：readme.md

就像没有甜点一样，一顿美餐就不完整，如果没有读书文件，一个好的开源项目就不完整了。最上面的樱桃为人们提供了您项目的概述，如何使用它以及如何贡献。

这是您应包含的内容：

  1. 项目标题：给您的项目一个名字清楚地描述了它的作用。

  2. 描述：提供您项目的简要概述。它有什么作用？为什么有用？

  3. 安装说明：说明如何使项目启动和运行。如果您的项目可以通过多种方式安装（例如来自Chrome Web Store或手动），请确保涵盖所有选项。

  4. 使用说明：描述如何使用项目。在镀铬扩展方面，这可能包括如何启用扩展名以及运行时的期望。

  5. 它的工作原理：对您的项目的运作方式进行高级概述。您不需要进入详尽的细节（这就是代码的目的），而是让读者了解整体架构和关键组件。

  6. 贡献指南：如果您愿意做出贡献，请提供一些有关他人如何提供帮助的准则。这可能包括如何提交错误报告，提出新功能或设置开发环境。

  7. 许可证信息：如果您的项目是开源的，请包括有关其在。

    8. 下发布的许可的信息。

借助精心设计的读数，您的项目不仅是一件软件，而且是其他人可以从中学习，使用和贡献的完整开源项目。很高兴与您一起烹饪这一扩展，我希望您现在准备好创建自己的铬扩展。