ExtPay is not defined

[GrahamAvers]

Hi Everyone!

I am currently working on integrating extpay into one of my projects, and am struggling with a very silly issue that I know will be easily resolved.

I am getting this error: VM854 content.js:2 Uncaught ReferenceError: ExtPay is not defined
at VM854 content.js:2:14

for reference here is my background.js (some extpay stuff in the first couple lines, rest is at the bottom):

importScripts('ExtPay.js') // or `import` / `require` if using a bundler
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") {
   extpay.openPaymentPage()
     .then(() => {
       sendResponse({ success: true });
     })
     .catch((error) => {
       console.error("Error opening payment page:", error);
       sendResponse({ success: false, error: error.message });
     });
 } else if (request.action === "openLoginPage") {
   extpay.openLoginPage()
   .then(() => {
     sendResponse({ success: true });
   })
   .catch((error) => {
     console.error("Error opening login page:", error);
     sendResponse({ success: false, error: error.message });
   });
 } else {
   // Handle other actions as needed
 }
});

And my content.js (this is just the top of it, but is where I am getting the error from:

console.log("Content script loaded");
var extpay = ExtPay("homewoork-helper");
extpay.getUser().then(user => {
  if (user.paid) {

Here is my manifest.json as well:

{
  "name": "Mcgrawhill Concept Autocomplete",
  "description": "Automatically answer questions on learning.mheducation.com using the ChatGPT API.",
  "version": "4.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": [
    "storage",
    "scripting",
    "activeTab"
  ],
  "host_permissions": [
    "https://api.chatgpt.com/"
  ],
  "content_scripts": [
    {
      "matches": ["*://learning.mheducation.com/*","https://extensionpay.com/*"],
      "js": [
        "ExtPay.js",
        "firebase-app.js",
        "firebase-firestore.js",
        "content.js" 
      ],
      "run_at": "document_start"
    }
  ],
  "web_accessible_resources": [
    {
      "resources": [
        "ExtPay.js",
        "firebase-app.js",
        "firebase-firestore.js"
      ],
      "matches": ["*://learning.mheducation.com/*"]
    }
  ],
    "action": {
    "default_popup": "popup.html"
  }
}

Any help I can get would be greatly appreciated!

[Glench]

Hey Graham, it's a little hard to say from the information you've given. I'd suggest you copy from a known-working example like our sample-extension.

And this may be unrelated, but note that in the manifest.json for the sample extension there are two separate entries for content scripts. We'd recommend you keep these two entries instead of combining them as you did.