-1

I am trying to develop a functionality in which the selected mails should get tagged with "general" label. This functionality should get executed on button click so for the button creation I used inboxsdk API and for the tagging functionality to work on button click I used gmail API but I am facing issue in executing the code. I am getting the below error in tag.js file

Uncaught SyntaxError: Unexpected token <

I am posting the code below. Please check it.

manifest.json:-

{
"name": "Gmail Extension",
"description": "Extension for tagging",
"version": "0.1",
"manifest_version": 2,
"minimum_chrome_version": "29",
"background": {
"page": "/background/index.html"
  },
"content_scripts": [
{
"matches": [
"https://mail.google.com/*",
"https://inbox.google.com/*"],
"js": ["/libs/inboxsdk.js", "/libs/alertify/alertify.min.js", "/contentScript/tag.js"],
"css": ["/libs/alertify/alertify.default.css", "/libs/alertify/alertify.core.css"],
"run_at": "document_end"
}],
"web_accessible_resources": ["/icons/tag.png", "*"],
"permissions": ["identity", "<all_urls>", "tabs", "webRequest", "webRequestBlocking", "https://accounts.google.com/*", "https://www.googleapis.com/*", "https://mail.google.com/",
"https://inbox.google.com/"],
"content_security_policy": "script-src 'self' 'sha256-Y+2PBkTuXdKc9Mz9jB6CV7zSLRMuViwjLM28phOgupM=' https://apis.google.com; object-src 'self'",
"oauth2": {
"client_id": "763145023672-pomd352gi79664h9tf0hg1uu160s4hop.apps.googleusercontent.com",
"scopes": ["https://mail.google.com/",
"https://www.googleapis.com/auth/gmail.modify",
"https://www.googleapis.com/auth/gmail.labels",
"https://www.googleapis.com/auth/gmail.send"]
  }
  } 

index.html:-

<!DOCTYPE html>
<html>
<head>
<title>Extension for tagging</title>
<meta charset='utf-8' />
<script src = "auth.js" </script>
<script src = "/libs/inboxsdk.js" </script>
<script src = "/contentScript/tag.js" </script>
</head>
<body>
<div id="authorize-div" style="display: none">
<span>Authorize access to Gmail API</span>
<!--Button for the user to click to initiate auth sequence -->
<button id="authorize-button" onclick="handleAuthClick(event)">
Authorize
</button>
</div>
</body>
</html>

auth.js:-

var CLIENT_ID = '763145023672-pomd352gi79664h9tf0hg1uu160s4hop.apps.googleusercontent.com';
var SCOPES = [
'https://mail.google.com/',
'https://www.googleapis.com/auth/gmail.modify',
'https://www.googleapis.com/auth/gmail.labels',
'https://www.googleapis.com/auth/gmail.send'
 ];
function checkAuth() {
gapi.auth.authorize({
'client_id': CLIENT_ID, 'scope': SCOPES, 'immediate': true
},
handleAuthResult);
}
function handleAuthResult(authResult) {
var authorizeDiv = document.getElementById('authorize-div');
if (authResult && !authResult.error) {
// Hide auth UI, then load client library.
authorizeDiv.style.display = 'none';
loadGmailApi();
} else {
// Show auth UI, allowing the user to initiate authorization by
// clicking authorize button.
authorizeDiv.style.display = 'inline';
}
}
function handleAuthClick(event) {
gapi.auth.authorize({
'client_id': CLIENT_ID, 'scope': SCOPES, 'immediate': false
},
handleAuthResult);
return false;
}
function loadGmailApi() {
gapi.client.load('gmail', 'v1', updateLabel);
updateLabel();
}
 <script type="text/javascript" src="https://apis.google.com/js/client.js?onload=checkAuth"></script>

tag.js:-

function updateLabel() {
var request = gapi.client.gmail.users.labels.update({
'userId': 'me'
});
request.execute(function(resp) {
function whenNoneSelected(route) {
  return false;
}
function register(sdk) {
sdk.Toolbars.registerToolbarButtonForList({
title: 'General',
section: sdk.Toolbars.SectionNames.INBOX_STATE,
iconUrl: chrome.extension.getURL('/icons/tag.png'),
onClick: tagThread(){
var label = GmailApp.getUserLabelByName("General");
var threads = label.getThreads(); // var threads = GmailApp.getThreads();
for (var i=0; i<threads.length; i++) {
//add label "General" for selected threads
threads[i].addLabel(label);
}
alertify.success('Threads tagged as General');
},
hasDropdown: false,
hideFor: whenNoneSelected,
keyboardShortcutHandle: null
});
}
InboxSDK.load('1', 'sdk_mailtag_fd47af3e65').then(register);
});
}

Anyone with relevant solution will be greatly appreciated.

shivani
  • 21
  • 4
  • I removed my answer because it was not helpful. Can you tell me what you are trying to do?? Having UI elements in background page is of no use. – Siddharth Nov 10 '15 at 08:07
  • Hi actually I am trying to build a chrome extension for bulk tagging functionality by using gmail api. As there is no chance to build a button UI with gmail api I am using inboxsdk for button creation in gmail inbox and for bulk tagging functionality to work on button click I am using gmail api. In the sense when the button is clicked the selected mails should be tagged with the "general" label in gmail inbox. The button which I am using will be displayed next to delete button in existing gmail scenario. – shivani Nov 10 '15 at 08:53
  • Then use a content script to define click events. To use gmail API , you would have to inject it into the page. Once injected it will run in the context of page so callback function needs to be injected too. – Siddharth Nov 10 '15 at 08:54
  • means to inject gmail API from google developers site only I wrote the authorization code in the above index.html page. – shivani Nov 10 '15 at 08:57
  • Actually client js needs to be loaded from apis.google.com. Downloading it locally wouldn't work coz it depends on other scripts. So how do you make it work in gmail - you need this library to be loaded in gmail page ie injecting it into gmail page using content script. Also make sure callback function is injected too. – Siddharth Nov 10 '15 at 09:01
  • Hi I tried to separate the functionality and authorization code as mentioned above in the question but again the same error is repeated. – shivani Nov 10 '15 at 10:46
  • Try doing what i said . – Siddharth Nov 10 '15 at 10:50
  • Hi I tried to callback function updateLabel() from tag.js by creating a updateLabel(); in index.html but still I am getting the error "Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'sha256-Y+2PBkTuXdKc9Mz9jB6CV7zSLRMuViwjLM28phOgupM=' https://apis.google.com". Either the 'unsafe-inline' keyword, a hash ('sha256-3Q1MaJvQgJ6teNTlDmo181dGqOU1hK5uGmE5FYbL7is='), or a nonce ('nonce-...') is required to enable inline execution." – shivani Nov 16 '15 at 06:07
  • Because you still have inline script(3rd script tag). Move it into external file. I am pretty sure that would work too – Siddharth Nov 16 '15 at 12:16
  • Hi I tried to remove the 3rd script tag from the index.html file and created a new file auth.html and implemented this script tag code in to this file and tried to import auth.html file code in to index.html file by creating this tag "" but also the same error is repeated again in auth.html file – shivani Nov 17 '15 at 07:24
  • Because you are writing javascript code in html file(auth.html). Just rename it as auth.js and then include it in index.html using – Siddharth Nov 17 '15 at 07:46
  • hi actually that script tag contains authorization code which should be present in html file only in background so only I tried to separate that script tag by creating another html file and them imported to this as mentioned above in the code. Anyhow now I will try to create auth.js instead of auth.html. – shivani Nov 17 '15 at 08:39
  • Hi from index.html file I separated only 3rd script tag to a external file known as auth.js as you told and when I tried to execute this extension the previous error was solved but again I faced new error known as "Uncaught SyntaxError: Unexpected token {". This error occurred in tag.js file. So, I checked tag.js file thoroughly but did not find any syntax error. Not understanding why this error is coming in tag.js file in line 14. – shivani Nov 17 '15 at 11:42
  • At line 14, add function keyword before tagThread ie onClick: function tagThread(). – Siddharth Nov 17 '15 at 12:11
  • Hi when I kept function before tagThread() it got resolved thanks for that but I got another error that is "Uncaught SyntaxError: Unexpected token <". This error occurred in auth.js file in last 37th line. – shivani Nov 18 '15 at 06:05
  • Yar , you added script tag inside js file. script tag is supposed to be inside html file – Siddharth Nov 18 '15 at 06:14
  • OK thanks I kept that script tag in index.html file and this issue is resolved. – shivani Nov 18 '15 at 06:17

1 Answers1

0

Doesn't seem like you grasp the extension architecture at all.

You declared the index.html to be a background page - an invisible page that a user can't interact with. So why does it even have a button in it?

Also, you cannot have any kind of inline code in Chrome extensions, and it's impossible to override. You must put your extension code in script files (and therefore should consider declaring the background page in the "new" style by specifying scripts array instead of a page.

I doubt that fixing those will make your extension work as intended (you probably don't want this code in the background), but that answers your initial question with the specific error.

Xan
  • 74,770
  • 16
  • 179
  • 206
  • Hi actually I followed the extension architecture from one of the example mentioned under Google developers link only which is extracted from github. Anyhow I changed the structure and posted once again with the current existing error above in question. – shivani Nov 10 '15 at 10:51