Chrome Extension how to send data from content script to popup.html

Question

I know this this has been asked in numerous posts but honestly I don't get them. I am new to JavaScript, Chrome Extensions and everything and I have this class assignment. So I need to make a plugin that would count DOM objects on any given page using Cross Domain Requests. I've been able to achieve this so far using Chrome Extension API's. Now the problem is I need to show the data on my popup.html page from the contentScript.js file. I don't know how to do that I've tried reading the documentation but messaging in chrome I just can't understand what to do.

following is the code so far.

manifest.json

{
"manifest_version":2,

"name":"Dom Reader",
"description":"Counts Dom Objects",
"version":"1.0",

"page_action": {
    "default_icon":"icon.png",
    "default_title":"Dom Reader",
    "default_popup":"popup.html"
},

"background":{
    "scripts":["eventPage.js"],
    "persistent":false
},

"content_scripts":[
    {
        "matches":["http://pluralsight.com/training/Courses/*", "http://pluralsight.com/training/Authors/Details/*",                                          "https://www.youtube.com/user/*", "https://sites.google.com/site/*", "http://127.0.0.1:3667/popup.html"],
        "js":["domReader_cs.js","jquery-1.10.2.js"]
        //"css":["pluralsight_cs.css"]
    }
],

"permissions":[
    "tabs",
    "http://pluralsight.com/*",
    "http://youtube.com/*",
    "https://sites.google.com/*",
    "http://127.0.0.1:3667/*"
]

popup.html

<!doctype html>
<html>

    <title> Dom Reader </title>    
    <script src="jquery-1.10.2.js" type="text/javascript"></script>
    <script src="popup.js" type="text/javascript"></script>

<body>
    <H1> Dom Reader </H1>
    <input type="submit" id="readDom" value="Read DOM Objects" />

   <div id="domInfo">

    </div>
</body>
</html>

eventPage.js

var value1,value2,value3;

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
if (request.action == "show") {
    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
        chrome.pageAction.show(tabs[0].id);
    });
}

value1 = request.tElements;
});

popup.js

$(function (){
$('#readDom').click(function(){
chrome.tabs.query({active: true, currentWindow: true}, function (tabs){
    chrome.tabs.sendMessage(tabs[0].id, {action: "readDom"});

 });
});
});

contentScript

var totalElements;
var inputFields;
var buttonElement;

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse){
if(request.action == "readDom"){

    totalElements = $("*").length;
    inputFields = $("input").length;
    buttonElement = $("button").length;


}
})

chrome.runtime.sendMessage({ 
action: "show", 
tElements: totalElements, 
Ifields: inputFields, 
bElements: buttonElement 

});

Any help would be appreciated and please avoid any noobness I did :)

gkalpak · Accepted Answer · 2021-12-20 15:01:50Z

217

Although you are definitely in the right direction (and actually pretty close to the end), there are several (imo) bad practises in your code (e.g. injecting a whole library (jquery) for such a trivial task, declaring unnecessary permissions, making superflous calls to API methods etc).
I did not test your code myself, but from a quick overview I believe that correcting the following could result in a working solution (although not very close to optimal):

In manifest.json: Change the order of the content scripts, putting jquery first. According to the relevant docs:

"js" [...] The list of JavaScript files to be injected into matching pages. These are injected in the order they appear in this array.

_{(emphasis mine)}

In contentscript.js: Move the chrome.runtime.sendMessage({...}) block inside the onMessage listener callback.

That said, here is my proposed approach:

Control flow:

A content script is injected into each page matching some criteria.
Once injected, the content scripts send a message to the event page (a.k.a. non-persistent background page) and the event page attaches a page-action to the tab.
As soon as the page-action popup is loaded, it sends a message to the content script, asking for the info it needs.
The content script processes the request, and responds so the page-action popup can display the info.

Directory structure:

          root-directory/
           |__img
               |__icon19.png
               |__icon38.png
           |__manifest.json
           |__background.js
           |__content.js
           |__popup.js
           |__popup.html

manifest.json:

{
  "manifest_version": 2,
  "name": "Test Extension",
  "version": "0.0",
  "offline_enabled": true,

  "background": {
    "persistent": false,
    "scripts": ["background.js"]
  },

  "content_scripts": [{
    "matches": ["*://*.stackoverflow.com/*"],
    "js": ["content.js"],
    "run_at": "document_idle",
    "all_frames": false
  }],

  "page_action": {
    "default_title": "Test Extension",
    //"default_icon": {
    //  "19": "img/icon19.png",
    //  "38": "img/icon38.png"
    //},
    "default_popup": "popup.html"
  }

  // No special permissions required...
  //"permissions": []
}

background.js:

chrome.runtime.onMessage.addListener((msg, sender) => {
  // First, validate the message's structure.
  if ((msg.from === 'content') && (msg.subject === 'showPageAction')) {
    // Enable the page-action for the requesting tab.
    chrome.pageAction.show(sender.tab.id);
  }
});

content.js:

// Inform the background page that 
// this tab should have a page-action.
chrome.runtime.sendMessage({
  from: 'content',
  subject: 'showPageAction',
});

// Listen for messages from the popup.
chrome.runtime.onMessage.addListener((msg, sender, response) => {
  // First, validate the message's structure.
  if ((msg.from === 'popup') && (msg.subject === 'DOMInfo')) {
    // Collect the necessary data. 
    // (For your specific requirements `document.querySelectorAll(...)`
    //  should be equivalent to jquery's `$(...)`.)
    var domInfo = {
      total: document.querySelectorAll('*').length,
      inputs: document.querySelectorAll('input').length,
      buttons: document.querySelectorAll('button').length,
    };

    // Directly respond to the sender (popup), 
    // through the specified callback.
    response(domInfo);
  }
});

popup.js:

// Update the relevant fields with the new data.
const setDOMInfo = info => {
  document.getElementById('total').textContent = info.total;
  document.getElementById('inputs').textContent = info.inputs;
  document.getElementById('buttons').textContent = info.buttons;
};

// Once the DOM is ready...
window.addEventListener('DOMContentLoaded', () => {
  // ...query for the active tab...
  chrome.tabs.query({
    active: true,
    currentWindow: true
  }, tabs => {
    // ...and send a request for the DOM info...
    chrome.tabs.sendMessage(
        tabs[0].id,
        {from: 'popup', subject: 'DOMInfo'},
        // ...also specifying a callback to be called 
        //    from the receiving end (content script).
        setDOMInfo);
  });
});

popup.html:

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="popup.js"></script>
  </head>
  <body>
    <h3 style="font-weight:bold; text-align:center;">DOM Info</h3>
    <table border="1" cellpadding="3" style="border-collapse:collapse;">
      <tr>
        <td nowrap>Total number of elements:</td>
        <td align="right"><span id="total">N/A</span></td>
      </tr>
      <tr>
        <td nowrap>Number of input elements:</td>
        <td align="right"><span id="inputs">N/A</span></td>
      </tr>
      <tr>
        <td nowrap>Number of button elements:</td>
        <td align="right"><span id="buttons">N/A</span></td>
      </tr>
    </table>
  </body>
</html>

edited Dec 20, 2021 at 15:01

answered Nov 16, 2013 at 20:51

gkalpak

48.2k8 gold badges108 silver badges120 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Sumair Baloch Over a year ago

hello, Sorry I haven't been on for some time, just checked on your comment. I can't accept any answer. it says you need 15 reputation points to do so.

wuno Over a year ago

Would you mind helping me solve a very similar problem? <a href="stackoverflow.com/questions/34467627/…> My current shot at this is pretty much your code from this answer. But I still cant get it to work and cant seem to find any good help on the matter .

Habib Kazemi Over a year ago

why you used chrome.tabs.sendMessage in popupjs and chrome.runtime.onMessage.addListener in content.js why .tabs for popupjs and .runtime in content.js

gkalpak Over a year ago

@hkm: Because that is how you send and receive messages. It's all in the docs.

DanGordon Over a year ago

So one thing - does the background.js/content.js parse the DOM before you click the extension? It seems to me that it does. I want to do the same thing here - but only parse the DOM if the user clicks the extension - but I still want the extension to be grayed out when not at the correct site. Would that require some extra message passing - or does your code already do this? It seems that the popup.js will send a message any time the DOM is loaded - but really I only want popup.js to send a message when the user clicks.

|

testing_22 · Accepted Answer · 2024-05-18 17:16:22Z

13

You can use chrome.storage.local for that. Add storage permission in manifest.json, and you can store any data in a hash table format in browser memory and access it anytime.

First, pass data from the content script to the background page, save it, and then retrieve it in the popup script. Here's how to do it through your background page:

In contentScript.js:

// contentScript.js
chrome.runtime.sendMessage({
  total_elements: totalElements // or whatever you want to send
});

In your background page:

// background.js
chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse){
       chrome.storage.local.set({ data: request.total_elements });
    }
);

Then you can access that variable in popup.js (remember to await):

// popup.js
const totalElements = await chrome.storage.local.get('data');

Maybe you can access localStorage directly from the content script in modern browsers. Then you don't need to pass the data through your background page. Nice reading about localStorage: http://diveintohtml5.info/storage.html.

edited May 18, 2024 at 17:16

testing_22

2,6451 gold badge17 silver badges33 bronze badges

answered Nov 16, 2013 at 17:59

gthacoder

2,3833 gold badges16 silver badges17 bronze badges

5 Comments

gkalpak Over a year ago

Please, do not promote the use of the deprecated chrome.extension.onRequest/sendRequest (which btw do not load a non-persistent background page before executing). Use chrome.runtime.* instead.

Xan Over a year ago

@ExpertSystem Please, if you see such outdated information, suggest/make an edit.

gkalpak Over a year ago

@Xan: So, you are the successor in [Google-Chrome-Extension] :) I don't like editing people's posts (I find it too intrusive). Besides, with so many outdated tutorials and examples (at least back then), I found it better to have an explicit comment on why it is bad to use .extension.xxx, instead of just showing the right way (which some people might think of as an "equally OK alternative"). It's more a matter of style I guess. Keep up the good work !

Gangula Over a year ago

Using localStorage or storage.sync is a good option to store persistent data, but if you want to update the DOM for your popup.html for every tab, then I suggest using gkalpak's answer, which uses the setDOMInfo callback to update the DOM in pupup

testing_22 Over a year ago

This is by far the easiest answer. But note for the proper getter and setter: chrome.storage.local.set({data: yourData}) and chrome.storage.local.get('data').

pguardiario · Accepted Answer · 2022-12-12 00:09:37Z

6

I will give you a simple solution

The question is how to send message from content script to popup and not popup to content script

In popup you have to send message from popup

document.addEventListener('DOMContentLoaded', function() {
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
            chrome.tabs.sendMessage(tabs[0].id, {type:"msg_from_popup"}, function(response){
            alert(response)
            });
        });
    })

In content script you have to add event listener but the catch is you have to return true this means you can use sendResponse asynchronously if you dont mention return true it will work synchronously you have to immediately return sendResponse message

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
     
        if(request["type"] == 'msg_from_popup'){
            console.log("msg receive from popup");
            
        sendResponse("msg received and sending back reply");// this is how you send message to popup
           
        }
        return true; // this make sure sendResponse will work asynchronously
        
    }
);

edited Dec 12, 2022 at 0:09

pguardiario

55.2k21 gold badges130 silver badges169 bronze badges

answered Nov 19, 2022 at 14:07

Shersha Fn

1,5714 gold badges26 silver badges34 bronze badges

3 Comments

pguardiario Over a year ago

good catch, return true was what I was missing :)

Sayan Dey Over a year ago

I am running your script but getting Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist. in popup.html, any ideas?

Sayan Dey Over a year ago

Opps, NVM a small error in manifest json, thanks a lot man, hitting my head for a whole day and here it is

Collectives™ on Stack Overflow

Chrome Extension how to send data from content script to popup.html

3 Answers 3

Control flow:

Directory structure:

manifest.json:

background.js:

content.js:

popup.js:

popup.html:

8 Comments

5 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Control flow:

Directory structure:

manifest.json:

background.js:

content.js:

popup.js:

popup.html:

8 Comments

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related