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

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

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 
    });
    });

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

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

Answer 1

您可以运行一些代码在后台脚本中保存产品页面。然后从你的弹出脚本加载它（我假设 myscript.js 在哪里）
所以这段代码进入后台脚本，它一直是运行ning

//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)
})

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

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

javascript

jquery

google-chrome

google-chrome-extension

content-script