关于前端:如何在十分钟内创建一个Chrome-插件

首发于公众号大迁世界，欢送关注。📝 每周 7 篇实用的前端文章 🛠️ 分享值得关注的开发工具 😜分享集体守业过程中的趣事

已经想过制作本人的 Chrome 扩大，却因为感觉过程太简单而打消了念头吗？
好消息，事件并没有你设想的那么简单！在接下来的几分钟里，咱们不仅将为你详解 Chrome 扩大的基础知识，还将手把手教你如何用五个简略的步骤创立本人的扩大。

近年来，咱们见证了人工智能能力的飞速发展。只管这些全新的数字助手为咱们带来了前所未有的便捷，但它们也随之带来了一个揭示：不要与它们分享敏感信息。

不晓得你如何对待这一点，但对我来说，我的手指动作通常比我的大脑快。为了预防可能的失误，咱们将为 ChatGPT 构建一个 “molly-guard”。

如果你在纳闷什么是 “molly-guard”，它最后是用来指一个放在按钮或开关上的盾牌，以避免意外激活。在咱们的上下文中，它是一个数字守护者，确保咱们不会适度分享信息。

用户能够指定他们认为敏感的单词或短语列表。如果咱们试图向 ChatGPT 提交蕴含这些词的信息，扩大将立刻启动，禁用提交按钮，并避免咱们可能的忽略。

在咱们开始之前，让咱们先明确一下 Chrome 扩大 到底是什么。Chrome 扩大 是一小块旨在加强或批改 Chrome 浏览体验的软件。扩大是用规范的网络技术——HTML，JavaScript 和 CSS——开发的，它们能够从简略的工具（如色彩选择器）到更简单的工具（如明码管理器）。

注：对于那些渴望更深刻理解 Chrome 扩大的人，Google 的官网文档是一份极其贵重的资源。

值得注意的是，Google Chrome 扩大能够依据其预期的性能采取多种形式。有些有一个浏览器动作，通过地址栏旁边的图标可见，以便快速访问其性能。其余一些可能会在后盾默默运行，在所有网页上或仅在特定网页上，具体取决于它们的设计。

对于咱们的教程，咱们将专一于应用内容脚本的扩大类型。该脚本将容许咱们与特定页面的 DOM 进行交互和操作——在咱们的状况下，即 ChatGPT 界面。

首先，咱们须要为咱们的 Chrome 扩大设置根本构造。咱们的扩大名为chatgpt-mollyguard，将在一个专门的文件夹中进行组织。这个扩大目录将蕴含所有必要的文件，以使咱们的 molly-guard 可能顺畅运行。

上面是一个细分：

文件夹：chatgpt-molly-guard。这是咱们扩大的根目录，所有咱们的文件都将寄存在这个文件夹里。
文件：manifest.json。这是咱们扩大的外围和灵魂，这个文件蕴含无关扩大的元数据，例如其名称、版本和所需的权限。最重要的是，它指定了在哪些网站上运行哪些脚本。
文件：contentScript.js。顾名思义，这个 JavaScript 文件蕴含内容脚本。这个脚本能够间接拜访网页的内容，容许咱们扫描敏感词并依据须要批改页面。
文件：wordsList.js。一个专门用于蕴含用户指定的敏感词或短语列表的 JavaScript 文件。咱们将这个文件独自进去，以便用户能够轻松自定义他们的列表，而无需深刻理解 contentScript.js 中的外围性能。
文件：styles.css。一个样式表，用于为咱们的扩大减少一些外观成果。尽管咱们的次要指标是功能性，但使咱们的正告或提醒看起来更好也不妨！
要开始：

在你的电脑上创立一个名为 chatgpt-molly-guard 的新文件夹。
在这个文件夹内，创立下面列出的四个文件。
有了这些文件，咱们就筹备好开始填写细节了。

在接下来的几节中，咱们将更深刻地探讨每个文件，并概述其在扩大中的特定作用。

Manifest 文件是一个 JSON 文件，它向浏览器提供了无关你的扩大的根本信息。这个文件必须位于扩大的根目录中。

以下是咱们的 manifest 构造。将这段代码复制到 manifest.json：

{
  "manifest_version": 3,
  "name": "ChatGPT Molly-guard",
  "version": "1.0",
  "description": "Prevents submission if specific words are typed into chat window",
  "content_scripts": [
    {"matches": ["https://chat.openai.com/*"],
      "css": ["styles.css"],
      "js": ["wordsList.js", "contentScript.js"]
    }
  ]
}

Manifest 文件有三个必填字段，别离是：manifest_version、name 和 version。其余都是可选的。

manifest_version：一个整数，指定 manifest 文件格式的版本。咱们应用的是 Manifest V3，这是目前可用的最新版本。请留神，Google 正在踊跃淘汰 2023 年的 Manifest V2 扩大。
name：一个简短的纯文本字符串（最多 45 个字符），用于标识扩大。
version：一个到四个用点分隔的整数，用于标识扩大的版本。
description：一个纯文本字符串（不蕴含 HTML，最多 132 个字符），用于形容扩大。
content_scripts：此键动态地指定每次关上与 URL 模式（由 matches 键指定）匹配的页面时要应用的 JavaScript 或 CSS 文件。这里，咱们说咱们的脚本应该运行在以 https://chat.openai.com/ 结尾的任何 URL 上。

在上述字段中，Google 将在 Chrome 的扩大治理页面和 Chrome 网上商店中显示你的扩大的名称、版本和形容。

只管咱们的 manifest 是针对咱们的需要进行了精简，但还有许多其余字段能够为你的扩大增加深度和性能。例如 action、default_locale、icons 等字段提供了自定义选项、UI 管制和国际化反对。

要全面理解 manifest.json 文件中的可用内容，请参阅 Google 的官网文档。

Chrome 扩大中的 Content Script 是运行在网页上下文中的 JavaScript 文件。它们能够查看和操作正在运行的页面的 DOM，从而扭转网页的内容和行为。

这是咱们的内容脚本。将以下代码复制到 contentScript.js 文件中：

const debounce = (callback, wait) => {
  let timeoutId = null;
  return (...args) => {window.clearTimeout(timeoutId);
    timeoutId = window.setTimeout(() => {callback.apply(null, args);
    }, wait);
  };
};

function containsForbiddenWords(value) {return forbiddenWords.some(word => value.toLowerCase().includes(word.toLowerCase()));
}

function updateUI(target) {const containsForbiddenWord = containsForbiddenWords(target.value);
  const sendButton = target.nextElementSibling;
  const parentDiv = target.parentElement;

  if (containsForbiddenWord) {
    sendButton.disabled = true;
    parentDiv.classList.add('forbidden-div');
  } else {
    sendButton.disabled = false;
    parentDiv.classList.remove('forbidden-div');
  }
}

document.body.addEventListener('keyup', debounce((event) => {if (event.target.id === 'prompt-textarea') updateUI(event.target);
}, 300));

document.addEventListener('keydown', (e) => {if (e.target.id === 'prompt-textarea' && e.key === 'Enter') {if (containsForbiddenWords(e.target.value)) {e.stopPropagation();
      e.preventDefault();}
  }
}, true);

让咱们一步一步来解析这个脚本。

文件的顶部申明了一个 debounce 函数。咱们将应用这个函数确保不会在用户每次按键时都查看禁止词汇。那将是大量的查看！相同，咱们会等到用户进行输出后再执行操作。

接下来是一个 containsForbiddenWords 函数。顾名思义，该函数在传递给它的文本中蕴含任何禁用词时返回 true。咱们将两个值都转为小写，以确保比拟不辨别大小写。

updateUI 函数确定聊天框中是否存在任何禁用词。如果存在，它会禁用发送按钮并向聊天框的父 div 增加一个 CSS 类（forbidden-div）。

脚本最初注册了两个事件监听器：

第一个触发在 keyup 事件上。它查看批改的元素是否是咱们的指标（聊天窗口），而后调用 updateUI 函数。
第二个事件监听器监听咱们的指标上的 keydown 事件。具体来说，它在文本区域中有一个禁用词时，会阻止浏览器的默认操作（在这种状况下为表单提交）。

这无效地阻止了蕴含禁用词的音讯被发送。

值得注意的是，咱们应用了事件委托，因为 ChatGPT 界面是一个单页面利用（SPA）。在 SPA 中，用户界面的局部会依据用户交互动静替换，这可能会意外地解除绑定到这些元素的任何事件监听器。

尽管咱们扩大的外围性能是避免特定的提交行为，但让用户能立刻辨认出为什么他们的操作被阻止也十分重要。让咱们增加一些款式，以提供视觉提醒并加强用户体验。

上面是咱们要应用的款式规定。请将其增加到 styles.css 文件中：

.forbidden-div {
  border: 2px solid red !important;
  background-color: #ffe6e6 !important;
}

这样，每当检测到禁用词时，输出区域会立刻显示出醒目的红色边框和奥妙的红色背景。这立刻引起了留神，并表明呈现了问题。通过在父级 div 上切换一个类，咱们能够轻松地关上或敞开这一性能。

值得注意的是 !important 标记。当你解决不属于你的网页时——比方在这种状况下与 ChatGPT——现有的款式可能十分具体。为确保咱们的款式具备优先级并被正确利用，!important 标记会笼罩因为现有款式特异性而可能产生的任何潜在抵触。

最初一步：填充咱们的扩大应该监控的禁用词列表。咱们能够在 forbiddenWords.js 中增加这些词：

const forbiddenWords = [
  "my-company.com",
  "SitePoint",
  "Jim",
];

当初咱们的自定义 Google Chrome 扩大曾经全副设置好了，是时候测试其性能，确保所有都按预期运行了。

关上 Chrome 浏览器，而后在地址栏中导航到 chrome://extensions/。
在页面右上角关上“开发者模式”开关。
点击当初可见的“加载未打包的扩大”按钮。
导航到并抉择您的扩大目录（在咱们的例子中是 chatgpt-molly-guard），而后点击“抉择”。咱们的扩大当初应该呈现在已装置扩大的列表中。

当初，为了测试性能，请导航到 ChatGPT，刷新页面，而后尝试输入您的限制词，看看扩大是否按预期行为。

如果所有都按计划进行，您应该会看到如下图所示的状况。

如果您对扩大代码进行了任何更改——例如更新单词列表——请确保点击扩大页面上扩大卡片右下角的环形箭头。这将从新加载扩大。而后，须要从新加载扩大正在针对的页面。

咱们以后的根底 Chrome 扩大曾经满足了其目标，但总有改良的空间。如果您渴望进一步欠缺扩大并扩大其性能，以下有一些倡议。

目前，咱们的扩大依赖于预约义的受限单词列表。实现一个用户敌对的界面将容许用户动静地增加、删除或批改单词。这能够通过一个弹出 UI（浏览器操作）来实现，该 UI 在点击扩大图标时关上，用户能够在其中治理他们的列表。您还须要将单词长久化到存储中。

尽管咱们的扩大检测到按键操作，但用户能够通过应用鼠标的右键菜单粘贴敏感信息来绕过这一点。为了堵住这个破绽，咱们能够增加一个用于粘贴事件的事件监听器（或者两者都监听输出事件）。这将确保无论信息是键入还是粘贴的，过滤器都能放弃健壮。

阻止某些词可能有点过于抽象。例如，我可能想阻止提到“Jim”（我的名字），但没有问题提到“Jim Carey”。为解决这个问题，思考引入一个性能，该性能将在下一个提交事件产生之前禁用 molly-guard。

如咱们所见，构建本人的 Google Chrome 扩大并不是不可逾越的挑战。咱们从一个明确的指标开始：为 ChatGPT 创立一个保护层，确保敏感信息窃密。在本教程中，咱们看到了如何通过大量的文件和一些代码来实现一个功能强大且有用的浏览器扩大。

首发于公众号大迁世界，欢送关注。📝 每周一篇实用的前端文章 🛠️ 分享值得关注的开发工具 ❓ 有疑难？我来答复

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

关于前端:如何在十分钟内创建一个Chrome-插件

咱们将构建什么？

什么是 Google Chrome 扩大？

步骤 1：创立扩大文件

步骤 2：创立 Manifest 文件

次要 Manifest 元素

步骤 3：创立 Content Script

步骤 4：增加款式

步骤 5：测试扩大

进一步拓展

单词列表编辑的用户界面

解决鼠标粘贴事件

情境性笼罩

总结

交换