Uncaught (in promise) https://extensionpay.com/home ExtPay.js:1468 #187

GrahamAvers · 2024-01-23T22:15:54Z

GrahamAvers
Jan 23, 2024

Hello all!

I am currently working on implementing extpay into my chrome extension. As said in the title, when I call for the login or payment page I get this error: Uncaught (in promise) https://extensionpay.com/home

Any help or recommendations to improve my code would be greatly appreciated.

Below are the files I have extpay interacting with in my code:

background.js: (most of extpay is the first couple lines, additional extpay stuff at very bottom.)

 importScripts('ExtPay.js') 
  const extpay = ExtPay('homewoork-helper'); 
  extpay.startBackground(); 
  extpay.getUser().then(user => {
    console.log(user)
  })

  chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.action === "addQuestion") {
      const { questionText, correctAnswers } = request;
      // Send a message back to content.js to call the firebaseAddQuestion function
      chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        chrome.tabs.sendMessage(tabs[0].id, {action: "addQuestionToFirebase", questionText: questionText, correctAnswers: correctAnswers});
      });
    }
  });


  chrome.runtime.onInstalled.addListener(function() {
    chrome.storage.sync.set({apiKey: "secret key"}, function() {
      console.log("ChatGPT API key set.");
    });
  });

  chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
    if (message.type === "getApiKey") {
      chrome.storage.sync.get("apiKey", function(data) {
        sendResponse({apiKey: data.apiKey});
      });
      return true;
    }
  });

  chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
    if (changeInfo.status === "complete" && (tab.url ?? "").includes("learning.mheducation.com")) {
      chrome.tabs.executeScript(tabId, { file: "content.js" }, function (result) {
        if (chrome.runtime.lastError) {
          console.error(chrome.runtime.lastError.message);
          chrome.tabs.executeScript(tabId, {
            code: "alert('ChatGPT Error: " + chrome.runtime.lastError.message + "');",
          });
        }
      });
    }
  });


  chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
    if (request.type === "startAnswering") {
      keepAnswering = true;
      answerAllQuestions();
    } else if (request.type === "stopAnswering") {
      keepAnswering = false;
    }
  });

  ///////////////// EXT PAY STUFF ///////////////////


  chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.action === "openPaymentPage") {
      // Redeclare extpay within this callback
      var extpay = ExtPay('homework-helper');
      extpay.openLoginPage();
      sendResponse({ success: true }); // Send a response after opening
    }
  });

  chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.action === "openLoginPage") {
      // Redeclare extpay within this callback
      var extpay = ExtPay('homework-helper');
      extpay.openLoginPage();
      sendResponse({ success: true }); // Send a response after opening
    }
  });

Content.js: (i've not included the bulk of the code as it isn't relevent to this problem)

console.log("Content script loaded");
var extpay = ExtPay('homewoork-helper'); 
extpay.getUser().then(user => {
  if (user.paid) {
  //this is where the rest of the code is that does all of the work!
 } else {
      console.log("User hasn't paid")
      
  }
})

popup.html: (I don't imagine there is much use for this as the buttons work properly, two buttons that are used for extpay are loginBtn and payBtn)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>mcgrawhill autocomplete</title>
    <style>
      body {
        width: 300px;
        height: 150px;
        font-family: Arial, sans-serif;
        font-size: 14px;
        padding: 10px;
      }
      button {
        background-color: #4CAF50;
        color: white;
        padding: 5px 10px;
        border: none;
        border-radius: 3px;
        cursor: pointer;
        margin-bottom: 10px;
      }
      button:hover {
        background-color: #3e8e41;
      }
      #errorLog {
        height: 60px;
        overflow: auto;
        padding: 5px;
        border: 1px solid #ddd;
      }
    </style>
    <script src="popup.js"></script>
  </head>
  <body>
    <h2>mcgrawhill autocomplete</h2>
    <button id="startBtn">Start</button>
    <button id="stopBtn">Stop</button>
    <button id="resetBtn">Reset</button>
    <button id="payBtn">Pay For Service</button>
    <button id="loginBtn">Exisiting User Signin</button>
    <h5>if bot has stopped working, click reset and click start again. It does not work well for multiple select questions or drag and drop</h5>
    <div id="errorLog"></div>
    <div id="statusMessage"></div>
  </body>
</html>

popup.js: (extpay stuff is the bottom two event listeners)

document.addEventListener('DOMContentLoaded', () => {
  let startBtn = document.getElementById('startBtn');
  let stopBtn = document.getElementById('stopBtn');
  let resetBtn = document.getElementById('resetBtn');
  let payBtn = document.getElementById('payBtn');
  let loginBtn = document.getElementById('loginBtn');
  let errorLog = document.getElementById('errorLog');

  let statusMessage = document.getElementById('statusMessage');

  startBtn.addEventListener('click', function () {
    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
      let activeTab = tabs[0];
      chrome.scripting.executeScript(
        {
          target: { tabId: activeTab.id },
          files: ['content.js'],
        },
        function () {
          if (chrome.runtime.lastError) {
            errorLog.innerHTML = 'Error: ' + chrome.runtime.lastError.message;
          } else {
            statusMessage.innerHTML = 'Started answering questions!';
          }
        }
      );
    });
  });

  // Add the event listener for the stop button
  stopBtn.addEventListener("click", function () {
    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
      let activeTab = tabs[0];
      chrome.tabs.sendMessage(activeTab.id, { type: "stopAnswering" });
      statusMessage.innerHTML = "Stopped answering questions.";
    });
  });

resetBtn.addEventListener('click', function () {
  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    let activeTab = tabs[0];
    chrome.tabs.sendMessage(activeTab.id, { type: 'reset' });
    statusMessage.innerHTML = 'Resetting...';
  });
});

payBtn.addEventListener('click', function (){
  console.log("opening payment page");
  chrome.runtime.sendMessage({ action: "openPaymentPage" }, function (response) {
    if (response.success) {
      console.log("Payment page opened successfully!");
    } else {
      console.error("Error opening payment page:", response.error);
    }
  });
});

loginBtn.addEventListener('click',function(){
  console.log("opening login page");
  chrome.runtime.sendMessage({ action: "openLoginPage" }, function (response) {
    if (response.success) {
      console.log("Login page opened successfully!");
    } else {
      console.error("Error opening login page:", response.error);
    }
  });
});
});

Answered by burkybang

Jan 23, 2024

Those methods might return promises. Try waiting for the promise to resolve before sending a response back.

Also, you don't need to add so many chrome.runtime.onMessage.addListener()s. Just add one and use ifs or a switch statement in the callback.

View full answer

burkybang · 2024-01-23T22:52:31Z

burkybang
Jan 23, 2024

Those methods might return promises. Try waiting for the promise to resolve before sending a response back.

Also, you don't need to add so many chrome.runtime.onMessage.addListener()s. Just add one and use ifs or a switch statement in the callback.

1 reply

GrahamAvers Feb 1, 2024
Author

Thank you so much, this worked. Appreciate the tips on the listeners as well!

Glench · 2024-01-25T19:47:26Z

Glench
Jan 25, 2024
Maintainer

Hey Graham, one thing that seems important is this: var extpay = ExtPay('homewoork-helper'); in background.js and content.js. It looks like you made a typo and your extension id is not consistent — sometimes it's "homewoork" and sometimes it's "homework". I bet this is the issue.

Also as @burkybang said, you can just call extpay.openPaymentPage() directly from content.js. You don't need to make a call to the background page, which might help you simplify your code. Cheers!

2 replies

Glench Jan 31, 2024
Maintainer

Hey @GrahamAvers, did you get this working?

GrahamAvers Feb 1, 2024
Author

I did, thank you for all of your help!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uncaught (in promise) https://extensionpay.com/home ExtPay.js:1468 #187

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 3 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Uncaught (in promise) https://extensionpay.com/home ExtPay.js:1468 #187

GrahamAvers Jan 23, 2024

Replies: 2 comments · 3 replies

burkybang Jan 23, 2024

GrahamAvers Feb 1, 2024 Author

Glench Jan 25, 2024 Maintainer

Glench Jan 31, 2024 Maintainer

GrahamAvers Feb 1, 2024 Author

GrahamAvers
Jan 23, 2024

Replies: 2 comments 3 replies

burkybang
Jan 23, 2024

GrahamAvers Feb 1, 2024
Author

Glench
Jan 25, 2024
Maintainer

Glench Jan 31, 2024
Maintainer

GrahamAvers Feb 1, 2024
Author