0

I'm building an extension. When I click on the extension's icon, a UI is being loaded, from which I click a button, and a screenshot is performed.

For now, what's happening is that i'm using html2canvas, and in order to screenshot the current active tab, I need to pass that tab's HTML Source ( for now i'm capturing my own extension's window -_- ).

I was attempting on following the answer [here][1], but without success. That means, I was attempting to retrieve in the content_script.js the current page's HTML, and send it via sendMessage:

function DOMtoString(document_root) {
  var html = "",
    node = document_root.firstChild;
  while (node) {
    switch (node.nodeType) {
      case Node.ELEMENT_NODE:
        html += node.outerHTML;
        break;
      case Node.TEXT_NODE:
        html += node.nodeValue;
        break;
      case Node.CDATA_SECTION_NODE:
        html += "<![CDATA[" + node.nodeValue + "]]>";
        break;
      case Node.COMMENT_NODE:
        html += "<!--" + node.nodeValue + "-->";
        break;
      case Node.DOCUMENT_TYPE_NODE:
        // (X)HTML documents are identified by public identifiers
        html +=
          "<!DOCTYPE " +
          node.name +
          (node.publicId ? ' PUBLIC "' + node.publicId + '"' : "") +
          (!node.publicId && node.systemId ? " SYSTEM" : "") +
          (node.systemId ? ' "' + node.systemId + '"' : "") +
          ">\n";
        break;
    }
    node = node.nextSibling;
  }
  return html;
}

chrome.runtime.sendMessage({
  action: "getSource",
  source: DOMtoString(document),
});

then, in a file which popup is mounting, I have done the following, in order to attempt and grab that message (important to state - i was also trying the following code in background.js, same result):

chrome.runtime.onMessage.addListener(function (request, sender) {
  console.log("IN THE LISTENER backfgroundE - " + message);
  if (request.action == "getSource") {
    message.innerText = request.source;
  }
});

but for some odd reason the message is not even arriving to neither my mounted-by-popup.html file, nor in my background.js file.

Any ideas?

Manifest file:

{
  "name": "Chrome plugin for Juno issues report",
  "description": "A issues report tool as a Chrome plugin",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_title": "Juno issue report"
  },
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "index.html"
  },
  "icons": {
    "16": "juno-icon.png",
    "48": "juno-icon.png",
    "128": "juno-icon.png"
  },
  "permissions": ["desktopCapture", "tabs", "downloads", "<all_urls>"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content_script.js"]
    }
  ]
}

I'll just add that the names of the files are aligned with the names mentioned in the manifest file.

Image of my files tree can be seen here: [![enter image description here][2]][2]

Regards! [1]: Getting the source HTML of the current page from chrome extension [2]: https://i.stack.imgur.com/jh3Gf.png

dani_l_n
  • 376
  • 1
  • 11
  • 1
    The better solution is chrome.tabs.captureVisibleTab – wOxxOm Dec 06 '22 at 10:48
  • I would do that by inserting a script on the page that do the job. – ojonasplima Dec 06 '22 at 14:01
  • For programmatic open popup window, use this api: `chrome.action.openPopup({})` [openPopup](https://developer.chrome.com/docs/extensions/reference/action/#method-openPopup) – Anil kumar Dec 06 '22 at 15:43
  • Don't wrap message listener under any function in background.js. Check your code maybe some typo error. Message passing is default mechanism of web extension. Look at chrome extension sample on github. – Anil kumar Dec 06 '22 at 15:48

0 Answers0