How to pass data from popup to content in chrome extension

Question

I just can't get a simple variable(the value of a slider) from the popup to my content script. I know this question has been asked a lot but i just cannot find an answer that is working. I don't understand how something that seems this simple has to be this hard.

I have checked a lot of posts on stackoverflow and other pages. Checked the documentation by chrome. I even used the exact code that they say should work:

My current code is:

popup.js

slider = document.getElementById("myRange");

function sendPercentage(){
  chrome.runtime.sendMessage({'percentage': this.percentage});
};

updatePercentage = () => {
  percentage = slider.value / 100;
  sendPercentage();
};

slider.addEventListener("change", function () {
  updatePercentage();
});

content.js

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    percentage = request.percentage
    if (window.location.href.endsWith(".pdf")) {
      document.getElementsByTagName("embed")[0].style.filter = "brightness(" + percentage + ")";
    }
  }
);

manifest.json:

{
  "manifest_version": 3,
  "name": "PDF Dimmer",
  "description": "Dim brightness of pdf",
  "version": "1.0.0",
  "icons": {
    "48": "assets/icon48.png",
    "128": "assets/icon128.png"
  },
  "action": {
    "default_popup": "index.html"
  },
  "permissions": ["storage", "nativeMessaging", "activeTab"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "css": ["styles/styles.css"],
      "js": ["scripts/popup.js"],
      "run_at": "document_end"
    }
  ]
}

Answer 1

So i have got something working now: Content.js:

body = document.body;

body.style.filter = "brightness("  + localStorage.getItem("contentpercentage") + ")";

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        percentage = request.percentage;
        localStorage.setItem("contentpercentage", percentage)
        body.style.filter = "brightness(" + percentage + ")";
        return true;
});

and popup.js

slider = document.getElementById("myRange");

  slider.value = localStorage.getItem("popuppercentage")

  function sendPercentage(percentage){
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      chrome.tabs.sendMessage(tabs[0].id, {percentage: percentage}, function(response) {

      });
  });
  };

  updatePercentage = () => {
    percentage = (slider.value / 100);
    localStorage.setItem("popuppercentage" ,slider.value)
    sendPercentage(percentage);
  };

  slider.addEventListener("change", function () {
    updatePercentage();
  });

The problem now is that this filter doesn't apply across all tabs. There are also sometimes errors like Unchecked runtime.lastError: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received and Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.

How would i fix this?