Question

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

例如，如果用户在flipkart.com上说并访问某些产品，那么只要我点击特定产品（当然将会加载产品的页面），我必须点击我的然后扩展图标，然后它才能获得我需要的数据。

如果页面已满载，然后我点击我的扩展图标我没有看到我需要的输出，而是在控制台上没有打印任何内容。

换句话说，我应该怎么做，我不必担心点击扩展图标和我需要的数据，自动在popup.html。

manifest.json

＆＃13;

{
	"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'  "
}

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13; 主要的是它在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 
})

最后，这会从弹出窗口中加载产品名称

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

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

1 个答案: