בניתי תוסף למייל שהקבצים שלו הם

background.js

chrome.action.onClicked.addListener(function() {
    chrome.windows.create({
        url: chrome.runtime.getURL("popup.html"),
        type: "popup",
        width: 800,
        height: 600
    });
});

manifest.json

{
  "manifest_version": 3,
  "name": "Mail Sender",
  "version": "1.0",
  "description": "שלח מיילים בקלות.",
  "permissions": [
    "activeTab",
    "scripting",
    "identity"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_icon": "icon.png"
  },
  "icons": {
    "16": "icon.png",
    "48": "icon.png",
    "128": "icon.png"
  },
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'"
  }
}

popup.js

const CLIENT_ID = '589923634588-7chk7ad4s5669p8tepksul54sgr9r92s.apps.googleusercontent.com';
const SCOPES = 'https://www.googleapis.com/auth/gmail.send';

function handleClientLoad() {
    const script = document.createElement('script');
    script.src = 'https://apis.google.com/js/api.js';
    script.onload = () => {
        gapi.load('client:auth2', initClient);
    };
    document.head.appendChild(script);
}

function initClient() {
    gapi.client.init({
        clientId: CLIENT_ID,
        scope: SCOPES,
        discoveryDocs: ["https://www.googleapis.com/discovery/v1/apis/gmail/v1/rest"]
    }).then(function() {
        console.log("ה-GAPI הוטען בהצלחה");
        document.getElementById('sendButton').disabled = false; // הפעל את כפתור השליחה
    }, function(error) {
        console.error("שגיאה בהגדרת ה-GAPI: ", error);
    });
}

function authenticate() {
    return gapi.auth2.getAuthInstance()
        .signIn({scope: SCOPES})
        .then(function() { console.log("המשתמש התחבר בהצלחה"); },
              function(err) { console.error("שגיאה באימות: ", err); });
}

function sendEmail(emails, subject, messageBody) {
    const emailMessage = [
        `To: ${emails}`,
        `Subject: ${subject}`,
        '',
        messageBody
    ].join('\n');

    const base64EncodedEmail = btoa(emailMessage).replace(/\+/g, '-').replace(/\//g, '_');

    return gapi.client.gmail.users.messages.send({
        'userId': 'me',
        'resource': {
            'raw': base64EncodedEmail
        }
    }).then(function(response) {
        console.log("מייל נשלח: ", response);
        alert("המיילים נשלחו בהצלחה!");
    }, function(error) {
        console.error("שגיאה בשליחת המייל: ", error);
        alert("שגיאה בשליחת המיילים, אנא נסה שוב.");
    });
}

// טען את gapi והתחל את האימות
document.addEventListener('DOMContentLoaded', handleClientLoad);

// מאזין על הלחיצה עבור כפתור האישור
document.getElementById('authButton').addEventListener('click', function() {
    authenticate();
});

// מאזין על הלחיצה עבור כפתור שליחה
document.getElementById('sendButton').addEventListener('click', function() {
    const emails = document.getElementById('emails').value;
    const subject = document.getElementById('subject').value;
    const message = document.getElementById('message').value;

    sendEmail(emails, subject, message);
});

popup.html

<!DOCTYPE html>
<html lang="he">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>שליחת מייל</title>
    <script src="https://apis.google.com/js/api.js"></script>
    <style>
        /* כאן הכנס את הסגנונות שלך */
    </style>
</head>
<body>
    <div class="container">
        <h2>שלח מייל</h2>
        <textarea id="emails" placeholder="הכנס כתובות מייל (מופרדות בפסיקים)"></textarea>
        <input type="text" id="subject" placeholder="נושא המייל">
        <textarea id="message" placeholder="תוכן המייל"></textarea>
        <button id="authButton">אשר הרשאות</button> <!-- כפתור לאישור הרשאות -->
        <button id="sendButton" disabled>שלח מיילים</button> <!-- כפתור שליחה -->
    </div>

    <script src="popup.js"></script>
</body>

script.google

function doGet(e) {
  return ContentService.createTextOutput(JSON.stringify({ message: "Welcome to the Mail Sender API" }))
    .setMimeType(ContentService.MimeType.JSON);
}

function doPost(e) {
  // הגדרת CORS
  var output = ContentService.createTextOutput();
  
  // ניתוח נתוני הבקשה
  try {
    var data = JSON.parse(e.postData.contents);
    var emails = data.emails;
    var subject = data.subject;
    var message = data.message;
    
    var emailArray = emails.split(',').map(function(email) {
      return email.trim();
    });

    // שליחה של המיילים
    for (var i = 0; i < emailArray.length; i++) {
      var emailAddress = emailArray[i];
      if (emailAddress) {
        MailApp.sendEmail({
          to: emailAddress,
          subject: subject,
          body: message
        });
      }
    }
    
    output.setContent(JSON.stringify({ message: "המיילים נשלחו!" }));
  } catch (error) {
    output.setContent(JSON.stringify({ message: "שגיאה: " + error.message }));
  }
  
  // הגדרת כותרות CORS
  output.setHeaders({
    "Access-Control-Allow-Origin": "*", // מאפשר גישה מכל המקורות
    "Access-Control-Allow-Methods": "POST, GET", // מאפשר בקשות POST ו-GET
    "Access-Control-Allow-Headers": "Content-Type" // מאפשר כותרת מתאימה
  });
  
  return output.setMimeType(ContentService.MimeType.JSON);
}

ויש גם פרוייקט צד שרת ולקוח ב console.cloud.google

הבעייה היא שניסיתי להוסיף כפתור לחלון הקופץ לאישור הרשאות והשתבשה לי כל התצוגה
הקוד הקודם היה

<!DOCTYPE html>
<html lang="he">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>שליחת מייל</title>
    <script src="https://apis.google.com/js/api.js"></script> <!-- הוסף את ספריית Google API -->
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            display: flex;
            justify-content: center; 
            align-items: flex-start;  
            height: 100vh; 
            margin: 0; 
            padding: 20px;
        }
        .container {
            background-color: white; 
            border-radius: 12px; 
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); 
            padding: 20px; 
            width: 600px;  
            max-width: 90%; 
        }
        h2 {
            text-align: center; 
            color: #333; 
            margin-bottom: 15px; 
        }
        textarea, input {
            width: 100%; 
            margin: 10px 0; 
            padding: 10px; 
            border: 1px solid #ccc; 
            border-radius: 8px; 
            font-size: 16px; 
            box-sizing: border-box; 
        }
        button {
            background-color: #00BFFF; 
            color: white; 
            border: none; 
            border-radius: 8px; 
            padding: 10px; 
            font-size: 16px; 
            cursor: pointer; 
            width: 100%; 
            transition: background-color 0.3s; 
        }
        button:hover {
            background-color: #008CBA; 
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>שלח מייל</h2>
        <textarea id="emails" placeholder="הכנס כתובות מייל (מופרדות בפסיקים)"></textarea>
        <input type="text" id="subject" placeholder="נושא המייל">
        <textarea id="message" placeholder="תוכן המייל"></textarea>
        <button id="sendButton">שלח מיילים</button>
    </div>

    <script src="popup.js"></script>
</body>