Encountering syntax issue while trying to tag emails in Gmail using a Chrome extension

Other Questions Gmail
1

I’m in the process of developing a Chrome extension that aims to label selected Gmail emails. The extension is supposed to utilize InboxSDK for creating a button and apply labels using the Gmail API based on user interaction. Unfortunately, I’m encountering an error when I click the button intended for tagging.

The error message I’m getting is:

Uncaught SyntaxError: Unexpected token <

Here is how I’ve structured my code:

manifest.json:

{
  "name": "Email Tagger",
  "description": "Tags selected emails",
  "version": "0.2",
  "manifest_version": 2,
  "background": {
    "page": "/background/script.html"
  },
  "content_scripts": [{
    "matches": ["https://mail.google.com/*", "https://inbox.google.com/*"],
    "js": ["/libs/inboxsdk.js", "/libs/alertify/alertify.min.js", "/scripts/tagger.js"],
    "run_at": "document_end"
  }],
  "permissions": ["identity", "<all_urls>", "tabs"],
  "oauth2": {
    "client_id": "sample-client-id.apps.googleusercontent.com",
    "scopes": ["https://mail.google.com/", "https://www.googleapis.com/auth/gmail.modify"]
  }
}

script.html:

<!DOCTYPE html>
<html>
<head>
  <title>Email Tagger</title>
  <script src="auth.js"></script>
  <script src="/libs/inboxsdk.js"></script>
  <script src="/scripts/tagger.js"></script>
</head>
<body>
  <div id="auth-container" style="display: none">
    <span>Authorize access to Gmail API</span>
    <button id="auth-btn" onclick="handleAuthentication(event)">Authorize</button>
  </div>
</body>
</html>

auth.js:

var CLIENT_ID = 'sample-client-id.apps.googleusercontent.com';
var SCOPES = ['https://mail.google.com/', 'https://www.googleapis.com/auth/gmail.modify'];

function checkAuthentication() {
  gapi.auth.authorize({
    'client_id': CLIENT_ID,
    'scope': SCOPES,
    'immediate': true
  }, handleAuthResult);
}

function handleAuthResult(authResult) {
  var authDiv = document.getElementById('auth-container');
  if (authResult && !authResult.error) {
    authDiv.style.display = 'none';
    initiateGmailApi();
  } else {
    authDiv.style.display = 'block';
  }
}

function handleAuthentication(event) {
  gapi.auth.authorize({
    'client_id': CLIENT_ID,
    'scope': SCOPES,
    'immediate': false
  }, handleAuthResult);
  return false;
}

function initiateGmailApi() {
  gapi.client.load('gmail', 'v1', applyLabel);
}

tagger.js:

function applyLabel() {
  var request = gapi.client.gmail.users.labels.update({
    'userId': 'me'
  });

  request.execute(function(response) {
    function addToolbar(inboxSDK) {
      inboxSDK.Toolbars.registerToolbarButtonForList({
        title: 'General',
        iconUrl: chrome.extension.getURL('/icons/tag.png'),
        onClick: function() {
          var label = GmailApp.getUserLabelByName("General");
          var threads = label.getThreads();
          for (var i = 0; i < threads.length; i++) {
            threads[i].addLabel(label);
          }
          alertify.success('Threads tagged as General');
        }
      });
    }
    InboxSDK.load('1', 'sdk_tagger_xyz').then(addToolbar);
  });
}

I would greatly appreciate any help in resolving this syntax issue.

2

That syntax error happens when your JavaScript expects JSON but gets HTML back - usually an error page. I see a few problems in your code. You’re missing the Google API client library. Your auth.js uses gapi.auth and gapi.client but you never load it. Add <script src="https://apis.google.com/js/api.js"></script> to script.html. Your tagger.js structure is weird too - you’ve got addToolbar defined inside the Gmail API callback, then you’re trying to use it right away. Move the InboxSDK setup outside that API handler. Your labels.update call is also broken - it’s missing required parameters like the actual label data. Add some console.log statements to see what your API calls are actually returning.

3

That “Uncaught SyntaxError: Unexpected token <” error happens when JavaScript tries to parse HTML as JSON. You’re getting an HTML error page back from Gmail API instead of JSON. I see the main issue - you’re using GmailApp.getUserLabelByName() and other GmailApp methods in a Chrome extension. Those are Google Apps Script methods that don’t work in browsers. You need Gmail API client methods instead. Your applyLabel() function is also broken. It’s making a labels.update request without the right parameters, which probably triggers that error page. Make sure you’re passing the correct label ID and required parameters. Add error handling to your API calls and use dev tools to check what response you’re actually getting from Gmail API.

4

yo, you’re mixing up different APIs here. that Unexpected token < error usually means you’re getting an HTML error page instead of JSON, right? the main issue is using GmailApp methods, which only work in Google Apps Script, not Chrome extensions. You gotta make actual Gmail API calls like gapi.client.gmail.users.messages.modify() to add labels. also, your code structure is a bit messy. why call InboxSDK inside a Gmail API callback? doesn’t make sense.