Chrome extension that gets the DOM elements of the page user is visiting

Question

I am new to extension development so I am making an extension which gets the product's name or price from the DOM of the page user is visiting. I made it but i am facing a problem that every single time i have to reload the page.

For example, If user is at flipkart.com say and visiting some product, then as soon as i click on specific product (of course the product's page is going to be loaded) i have to click on my extension icon then and only then it gets the data i need.

if the page is fully loaded and then i click on my extension icon i dont see the output i need, instead it prints nothing on console.

In other words, what should i do so that, i dont have to worry about clicking on the extension icon and the data i need, is automatically in my popup.html.

manifest.json

{
	"manifest_version" : 2 ,
	"name" : "myextension",
	"version" : "1.0",
	"browser_action":
	{
		"default_popup" : "popup.html"
	},
	"content_scripts": [
    	{
      		"matches": ["https://www.amazon.in/*","https://www.flipkart.com/*"],
     	 	"js": ["jquery-3.2.1.js","mycontentscript.js"]
   		}
   	],
	"background" :{
		"scripts" : ["background.js"]
	}, 
	"permissions": [
    "*://flipkart.com/*","*://amazon.in/*", "tabs", "http://localhost/*", "webNavigation" //local host added
  ],
	"content_security_policy": "script-src 'self' https://*/* default-src 'self'  "
}	

mycontentscript.js

var prdname=document.getElementsByClassName('_3eAQiD')[0].innerText; //just getting the name of prduct

myob ={     
     "prd" : prdname

  };
var port = chrome.runtime.connect(); 
    port.postMessage(myob); //sending product name to myscript.js

myscript.js

chrome.runtime.onConnect.addListener(function(port){
  port.onMessage.addListener(function(res){
    alert(res.prd); ///just alerting here 
    });
    });

the main thing is it wont give me alert when the DOM is fully loaded . In other words, i have to click on the extension icon, at the same time when my product page loads otherwise it wont work!

Can you please help me fix this???

Answer 1

You can run some code to save product page in background script. And later load it from you popup script (which i assume where myscript.js is laoded)
So this code goes to background script which is running all the time

//background.js
var productName
chrome.runtime.onMessage.addListener((request) => {
  switch (request.command) {
    case "saveProduct":
      productName = request.productName
      break
    case "loadProcut":
      return productName
      break
  }
})

The following to content script that is loaded when user opens the page specified in manifest.json

// mycontentscript.js
var prdname=document.getElementsByClassName('_3eAQiD')[0].innerText
chrome.runtime.sendMessage({
    command: "saveProduct"
    productName: prdname 
})

And finally this loads the product name from the popup js

//  myscript.js
chrome.runtime.sendMessage({
    command: "loadProcut"
},function(productName){
  console.log(productName)
  alert(productName)
})