javascript - 获取用户正在访问的页面的 DOM 元素的 Chrome 扩展

Question

我是扩展开发的新手，所以我正在做一个扩展，它从用户正在访问的页面的 DOM 中获取产品名称或价格。我做到了，但我遇到了一个问题，每次我都必须重新加载页面。

例如，如果用户在 flipkart.com 上访问某些产品，那么只要我点击特定产品(当然会加载产品页面)，我就必须点击我的扩展程序图标，然后只有这样它才能获得我需要的数据。

如果页面已完全加载，然后我单击我的扩展程序图标，我看不到我需要的输出，而是在控制台上不打印任何内容。

换句话说，我应该怎么做才能不必担心单击扩展图标和我需要的数据会自动出现在我的 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'  "
}	

我的contentscript.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 
    });
    });

最主要的是当 DOM 完全加载时它不会给我警报。换句话说，我必须在加载产品页面的同时单击扩展程序图标，否则它将无法工作!

你能帮我解决这个问题吗？？？

Answer 1

您可以运行一些代码以在后台脚本中保存产品页面。然后从你的弹出脚本加载它(我假设 myscript.js 被加载)
所以这段代码转到一直运行的后台脚本

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

当用户打开 manifest.json 中指定的页面时加载的内容脚本如下

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

最后这会从弹出的 js 中加载产品名称

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