0

I am building my first ever chrome extension (using MV3) and am trying to use a button in popup.html to send a tab ID from popup.js to content.js. I need for either the content.js or the background.js service worker to run a JS function that collects DOM object data from the tab and then run additional processes on it. This seems like such a simple thing to accomplish despite having spent many hours of frustration with no successful communication between scripts.

I am unsure of proper design, but many sources suggest calling chrome.tabs.query within popup.js from the button ID in order to send over the tab ID to content.js so that has been my approach. I still cannot find guidance on which (content.js or background.js) is better design practice to place processes like DOM data grabbing?.

In my approach, I keep getting this connection error in the console:

Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.

Here is my closest attempt:

manifest

{
    "manifest_version": 3,
    "name": "Data Analyzer",
    "description": "Analyzes some page data",
    "version": "1.0",
    "background": {
        "service_worker": "background.js"
    },
    "content_scripts": [
        {
            "matches": ["*://google.com/*"],
            "js": ["content.js"]
        }
    ],
    "action": {
        "default_icon": "chrome_ext.png",
        "default_popup": "popup.html"
    },
    "host_permissions": ["*://google.com/*"],
    "permissions": ["tabs", "activeTab"]
}

popup.js

document.addEventListener('DOMContentLoaded', documentEvents, false);

function myAction(input) {
  chrome.tabs.query({currentWindow: true, active: true}, function(tabs) {
    chrome.tabs.sendMessage(tabs[0].id, {"message": "start"}, function(response) {
      console.log(response.status);
    });
  });
}

function documentEvents() {    
  document.getElementById('submit_btn').addEventListener('click', 
    function() { myAction(document.getElementById('value_textbox'));
  });
}

content.js

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        console.log("content.js runtime function has fired");
        if(request.message === "start") {
            start();
        } 
    }
);

function start() {
    alert("Started content.js");
    
    // DOM data grab and additional processing goes here
}

The slightest bit of help would mean so much. Thanks for your time.

Zander
  • 1
  • Your code is correct, but `matches` is not, or rather you were fooled by your browser that hides `www.` – wOxxOm Nov 09 '21 at 18:30
  • @wOxxOm thank you very much for catching this (I had not yet). This saves me from problems later down the road but still unfortunately does not resolve the issue in my post. – Zander Nov 09 '21 at 20:12
  • You probably didn't reload the tab after reloading your extension. The content scripts run only when the page loads. You may want to switch to [programmatic injection](https://stackoverflow.com/a/67227376) instead. – wOxxOm Nov 09 '21 at 20:15
  • Yes this was essentially the issue. Only that hitting the reload button on my app within chrome://extensions/ did not fully fix things. I had to click on errors and then clear errors from that page, then go back and click on the reload scripts icon. After attempting many fixes, most of which were in my code and completely wrong, finding this solution took me over two hours to figure out as a beginner. So, having an answer to this question or some sort of awareness (not deleting the question) may prevent others from experiencing the same silly troubles I encountered. – Zander Nov 11 '21 at 15:48
  • You would find out it quickly if you would debug it. When I started learning programming I remember that the built-in devtools debugger helped like nobody else could because I've been seeing with my own eyes where and what happens. This is when I realized that content scripts have their own devtools, the popup and the background script as well, and that it's all asynchronous. These are the basics so we can't keep questions around just for that. – wOxxOm Nov 11 '21 at 16:38

0 Answers0