listen in content-script and change some elements in Dom

[husin-sajjadi]

Thank you for your sample!
I have a problem with development chrome extension,
Let me explain that:
I have a popup.js and popup.html
also I have a content.js as a content-script
also I have a background.js as a background script

Now, I want to click on a button in popup.js and then listen it in content-script and change some elements in dom.

But I don't receive any data in content script

popup.js
chrome.tabs.query({active: true, currentWindow: true}, async (tabs) => { chrome.tabs.sendMessage(tabs[0].id, {message: 'changeDOM'}); });

content.js
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { console.log("request"); });

How can I solve it?
Should I use a background service?

Thank you for your response!

[L4CTOSE]

🤓🤓🤓🤓🤓🤓🤓🤓🤓

[cdrani]

This is due to content script and popup not running in the same context, thus the background script will have to be used a bridge/mediator between them. A good solution would be to make use of a PORT. This is a sample approach to communicate from a popup -> background -> content script. It's similar approach to communicate the opposite way as well.

popup.js

// connect to post
const PORT = chrome.runtime.connect({ name: "popup" })

// use that port to send message on button click (inside click handler)
PORT.postMessage({ action: 'button.click' })

background.js

chrome.runtime.onConnect.addListener(port => {
    if (port.name !== 'popup') return

    port.onMessage.addListener(message => {
        // take action based on the message, such as sending to content script
        chrome.tabs.query({ active: true, currentWindow: true }, tabs => { 
            chrome.tabs.sendMessage(tabs[0].id, message) 
        })
    }
}

content.js

chrome.runtime.onMessage.addListener(message => console.log(message))