Trying to make an etsy chrome extension. I have a console.log() but it is not showing up in the console of the extension

Question

I am trying to make an etsy chrome extension. I have a console.log() but it is not showing up in the console of the extension. I am trying to console.log the urlParameters below. When I open the console for the chrome extension that I made, it shows a blank console. I am not sure if the issue has to do with the host_permissions or permission. I don't have the etsy api. Here are the files I have:

background.js file:

chrome.tabs.onUpdated.addListener((tabId, tab) => {
if (tab.url && tab.url.includes("etsy.com/listing")) {
  const queryParameters = tab.url.split("/")[4];
  const urlParameters = new URLSearchParams(queryParameters);
  console.log(urlParameters);

  chrome.tabs.sendMessage(tabId, {
    type: "NEW",
    videoId: window.location.href.split("/")[4],
  });
}

});

contentScript.js:

(() => {
let current_id = "";

chrome.runtime.onMessage.addListener((obj, sender, response) => {
    const {type, value, videoId} = obj;

    if(type === "NEW") {
        current_id = videoId;
        newIdLoaded();
    }
});

})();

manifest.json

{
"name": "EZ Profit",
"version": "0.1.0",
"description": "Book keeping on ETSY",
"permissions": ["storage", "tabs"],
"host_permissions": ["https://*.etsy.com/*"],
"background": {
  "service_worker": "background.js"
},
"content_scripts": [
  {
    "matches": ["https://*.etsy.com/*"],
    "js": ["contentScript.js"]
  }
],
"action": {
  "default_icon": {
    "16": "assets/ext-icon.png",
    "24": "assets/ext-icon.png",
    "32": "assets/ext-icon.png"
  },
  "default_title": "EZ Profits",
  "default_popup": "popup.html"
},
"manifest_version": 3

}

The code is correct. Make sure you don't have any filters applied in devtools console for the background script. There might be a problem with your devtools settings. You can reset it in devtools preferences. P.S. You will also see console.log from service worker in the popup but only those messages that are printed after the popup was opened. — wOxxOm, Oct 01 '22 at 22:00

score -1 · Answer 1 · answered Oct 01 '22 at 20:40

-1

The question is which console?

If you have logs in your content script, logs go to injected page's dev console.
If you have logs in your background script, they go to the service worker console that you can open from the extension's page in chrome://extensions
If you have a popup page, logs go to the service worker console.

answered Oct 01 '22 at 20:40

superabsorbent polymer

74
7

Hi, I have the console.log in the background script and I was expecting to see it in the popup's console(inspecting the chrome extension's popup), what do you mean by the service worker console? – Pooja Amin Oct 01 '22 at 21:02
If you open dev console successfully by inspecting a popup HTML element, then you should see the console logs from the background script. Are you sure you are opening right dev tool page? – superabsorbent polymer Oct 01 '22 at 21:05
Yes, that is what I did and it is an empty console. – Pooja Amin Oct 01 '22 at 21:08
left click your extension logo and then click manage extension. You should see 'service worker' link in your extension settings page. By clicking link, you should open the console. – superabsorbent polymer Oct 01 '22 at 21:12
I tried following your steps and unfortunately it is showing a blank console. Do you think it might be something in my code? – Pooja Amin Oct 01 '22 at 21:17
Actually, didn't check it. Can you write a dummy log message in your script? – superabsorbent polymer Oct 01 '22 at 21:19
what do you mean by dummy log message? – Pooja Amin Oct 01 '22 at 21:22
just delete everything and write console.log("asdasdasd"); – superabsorbent polymer Oct 01 '22 at 21:28
where do you think I should put the dummy log exactly – Pooja Amin Oct 01 '22 at 21:31
I tried to add a dummy and it is still blank – Pooja Amin Oct 01 '22 at 21:43

Trying to make an etsy chrome extension. I have a console.log() but it is not showing up in the console of the extension

1 Answers1