0

Note: i do see similar question but none of them worked for my specific situation.

I'm trying to modify the popup/extension script to show a string that i got from dom manipulation on a website. I'm sending the object to popup page but when i modify the text of the popup, it gives me an error and won't modify the text.

If i remove everything from popup.js then i can modify the text again.

Error using jquery: Error in event handler: ReferenceError: $ is not defined at chrome-extension://macmdofaedcjcklijkiomiojinlgejep/popup/popup.js:5:9 Error using vanilla Javascript: Error in event handler: ReferenceError: document is not defined at chrome-extension://macmdofaedcjcklijkiomiojinlgejep/popup/popup.js:5:9

popup.js file:

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  if (request.goldStandardTheme)
    sendResponse({ response: request.goldStandardTheme });
}); 
// There is a p tag that i want the conent of that tag 
// to change to the response from the request.goldStandardTheme** } );

Manifest file:

{
  "manifest_version": 3,
  "permissions": ["activeTab"],
  "content_scripts": [
    {
      "js": ["scripts/content.js"],
      "matches": ["<all_urls>"]
    }
  ],
  "action": {
    "default_popup": "popup/popup.html",
    "js": ["popup/popup.js"]
  },
  "background": {
    "service_worker": "popup/popup.js"
  }
}

popup.html:

<p>Hello World</p>

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

content.js:

async () => {
  const response = await chrome.runtime.sendMessage({
    goldStandardTheme: finalText,
  });
}; // do something with response here, not outside the function
console.log(response);

Any help would be much appreciated. I would except that when i use the follwoing code at popup.js, the text on the extension would update:

chrome.runtime.onMessage.addListener(
    function (request, sender, sendResponse) {
        if (request.goldStandardTheme)
            sendResponse({ response: request.goldStandardTheme });
        document.getElementById('goldStandard').innerHTML = request.goldStandardTheme;
    }
);
Miss Skooter
  • 803
  • 10
  • 22
Mobination
  • 1
  • 4
  • `$ is not defined` normally means that you haven't included jquery correctly in your solution – Carsten Løvbo Andersen Mar 03 '23 at 08:47
  • @CarstenLøvboAndersen I get an error when using vanilla javascript as well. The problem here seems to be with somehow not having access to dom, because vanilla javascript says that the document is not defined. – Mobination Mar 03 '23 at 08:50
  • 1) Remove `background` section from manifest.json. It's for a background script that runs in the hidden background context, which you don't need. 2) Remove `js` from `action`. There's no such key. 3) The popup doesn't run any scripts when it's not shown so it can't receive a message. The solution is to remove `content_scripts` from manifest.json and use executeScript from the popup script, see the [examples](/q/4532236). – wOxxOm Mar 03 '23 at 13:01
  • @wOxxOm unfortunately that didn't work. I'm getting an error that I still don't have access to the dom. – Mobination Mar 03 '23 at 23:50
  • I means you either look at an old error in chrome://extensions (just delete it) or you didn't follow the instruction correctly. Note that the popup is a separate window so it has its own separate devtools: right-click inside the popup and select "inspect" in the menu. – wOxxOm Mar 04 '23 at 12:14
  • @wOxxOm it was a mistake on my side. The provided solution your provided worked. Thank you so much. – Mobination Mar 04 '23 at 23:45

0 Answers0