如何制作 google chrome 电子邮件扩展程序？

Question

我需要为电子邮件编写一个 google chrome 扩展程序。当用户在表单中输入收件人地址并单击“提交”按钮，但收件人的域与组织的域 (@vtb.uk) 不匹配时，将显示一个警告窗口，其中包含“取消”和“提交”按钮（按钮选择器已知） ）。请告诉我如何做到这一点以及需要什么。感谢您的帮助。

{
  const org = '@vtb.uk';
  addEventListener('click', (event) => {
    const isSendButton == event.target.closest("tabindex"="570");
    if (!isSendButton) return;
    const addressNodes = document.querySelectorAll("tabindex"="100");
    const isValid = Array.from(addressNodes, (addressNode) => addressNode.textContent || addressNode.value)
      .flatMap((addressList) => addressList.trim().split(/[,;\s]+/))
      .every((address) => !address || address.endsWith(org));
    if (isValid) return;
 
    const isConfirmed = confirm('WARNING!');
    if (isConfirmed) return;
    event.preventDefault()
    event.stopImmediatePropagation()
    event.stopPropagation()
  }, true);
}

我有这个代码，但它不起作用

Answer 1

看起来您走在正确的轨道上，但您提供的代码存在一些问题。我将帮助您纠正这些问题，并指导您完成创建 Google Chrome 电子邮件扩展程序的过程。

以下是创建 Google Chrome 扩展程序的分步指南，该扩展程序会检查收件人的域并在与组织的域不匹配时显示警告：

1. 创建清单文件：

   首先在扩展程序的目录中创建一个

   manifest.json

   文件。此文件提供有关您的扩展及其权限的信息。

   {
     "manifest_version": 3,
     "name": "Email Domain Checker",
     "version": "1.0",
     "description": "Checks recipient's domain",
     "permissions": ["activeTab"],
     "content_scripts": [
       {
         "matches": ["<all_urls>"],
         "js": ["content.js"]
       }
     ]
   }
   

2. 创建内容脚本：

   在与

   content.js

   文件相同的目录中创建一个名为

   manifest.json

   的文件。该脚本将在网页上运行并与其内容交互。

   const org = '@vtb.uk';
   
   function checkAndWarnRecipient() {
     const sendButton = document.querySelector('[tabindex="570"]');
     if (!sendButton) return;
   
     sendButton.addEventListener('click', (event) => {
       const addressNodes = document.querySelectorAll('[tabindex="100"]');
       const addresses = Array.from(addressNodes, (addressNode) =>
         addressNode.textContent || addressNode.value
       );
   
       const isValid = addresses.every(
         (address) => !address || address.endsWith(org)
       );
   
       if (!isValid) {
         const isConfirmed = window.confirm('WARNING!');
         if (!isConfirmed) {
           event.preventDefault();
           event.stopImmediatePropagation();
           event.stopPropagation();
         }
       }
     });
   }
   
   checkAndWarnRecipient();
   

3. 加载扩展程序：

   打开 Google Chrome 并转到

   chrome://extensions/

   。启用“开发者模式”并单击“加载已解压的文件”。选择包含扩展程序文件的目录。

4. 测试扩展：

   打开带有电子邮件撰写表单的网页（例如 Gmail），然后尝试输入与指定域不匹配的电子邮件地址。当您单击“发送”按钮时，如果收件人的域名不匹配，则扩展程序应显示警告。

确保根据需要调整代码和选择器，以匹配您目标网站上的电子邮件撰写表单的结构。

请注意，浏览器扩展程序与网页交互，并且可能会发生网站结构的变化。如果网站的结构发生变化，您的扩展程序可能需要更新才能正常工作。另外，请注意，此代码的有效性可能取决于您所定位的特定网站。