0

I've been using a background script combined with jquery to get the source code of a page with a Chrome Extension but now, I'd like to capture the source code only when I click on the extension pop-up.

Here is what I have been trying to do:

popup.html

<!DOCTYPE html>
<html>
  <head>
    <title>Tab Source Code</title>
    <script src="popup.js"></script>
  </head>
  <body>
    <button id="getCodeButton">Get Source Code</button>
    <pre id="sourceCode"></pre>
  </body>
</html>

popup.js

document.addEventListener("DOMContentLoaded", function () {
  var getCodeButton = document.getElementById("getCodeButton");
  getCodeButton.addEventListener("click", function () {
    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
      chrome.tabs.sendMessage(tabs[0].id, { action: "getSourceCode" }, function (response) {
        console.log(response);
      });
    });
  });
});

content.js

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  if (request.action === "getSourceCode") {
    var sourceCode = document.documentElement.outerHTML;
    sendResponse({ sourceCode: sourceCode });
  }
});

When I run the screen, I get the following error message: Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.

My manifest seems ok:

{
    "manifest_version": 2,

    "name": "xxxx",
    "description": "xxxx",
    "version": "1.01",
    "author": "xxxx",


"permissions": [
        "tabs",
        "http://*/",
        "https://*/",
        "<all_urls>",
        "notifications",
        "webRequest",
        "webNavigation",
        "management",
        "webRequestBlocking",
        "http://*/*",
        "background",
        "alarms",
        "https://*/*"
    
    ],

"externally_connectable": { "matches": ["http:///", "https:///"] },

 "background": {
    "scripts": ["background.js"],
    "persistent": true
  },
    
    "content_scripts": [
        {
            "matches": ["http://*/*", "https://*/*"],
            "js": ["content.js"]

        }],
    
    "browser_action": {
        "default_icon": "logo.png",
        "default_popup": "popup.html"
    }
}

I have tried multiple solutions found on stackexchange to communicate with content.js but I haven't found one that works.

I tried this: Port error: Could not establish connection. Receiving end does not exist. In Chromiume but it doesn't solve my problem.

any idea ?

thanks

Laurent
  • 1,465
  • 2
  • 18
  • 41
  • 1
    What does `console.log(tabs[0].id)` show? – Barmar Jul 12 '23 at 20:39
  • @Barmar it shows the ID of the active tab (ex: 1312273983) – Laurent Jul 12 '23 at 20:41
  • 1
    `onMessage` should be `onMessageExternal` – Barmar Jul 12 '23 at 20:43
  • @Barmar tried it but same error message :( – Laurent Jul 12 '23 at 20:49
  • 1
    Did you try other solutions at the linked question? – Barmar Jul 12 '23 at 21:10
  • 1
    Either use chrome.scripting.executeScript in the popup script or [re-inject content scripts explicitly](/q/10994324) after reloading/installing the extension. – wOxxOm Jul 13 '23 at 06:00
  • 1
    @Barmar, no, onMessageExternal is for an entirely different use case and no, there are no solutions in that topic, which should be deleted as it's full of outdated API that were removed from ManifestV3 and deprecated 5+ years ago in ManifestV2. – wOxxOm Jul 13 '23 at 06:02
  • @wOxxOm can the source code of the page be accessed from popup.js and using executeScript? I thought I could only access the source code of popup.html? – Laurent Jul 14 '23 at 07:52
  • 1
    executeScript runs in the web page, it's the entire purpose of this method. – wOxxOm Jul 14 '23 at 20:07
  • @wOxxOm thanks, I had the wrong understanding of it, thanks for pointing out! – Laurent Jul 22 '23 at 12:02

0 Answers0