How to get information from page and display it on PopUp button

Add-ons Development
#1

Hi guys.
I’m newbie on addons development, and i need a little help.
I need to get a a text from a div in a page and show it on popup menu.
I tried many ways with scripts but i can’t succeed.
So if someone can help me with a tip or a thread that i can learn.
Thanks for supporting

#2

Where are you now in the project? My questions would be:

(1) How does the add-on know which <div> to get the text from? For example, is it always identified with a unique id, or is some other selector involved? Or is the user right-clicking on it?

Since this requires a content script, consider testing your ideas in a user script (e.g., in Greasemonkey/Tampermonkey/Violentmonkey/FireMonkey).

(2) Where is the popup menu supposed to appear? For example, it’s a drop-down from the add-on’s toolbar button, or it’s a new element positioned somewhere in the page.

#3

Hello.
This is as far as i have been get.

manifest.json:

{
  "manifest_version": 2,
  "name": "Mlcalc",
  "version": "0.1.0",
  "author": "Wesley Junio",

  "description": "Calculator",

  "permissions": ["activeTab"],

  "icons": {
    "48": "icons/mlcalc48.png",
    "96": "icons/mlcalc96.png"
  },

   "content_scripts": [
    {
      "js": ["/script/script.js"],
      "matches": ["<all_urls>"],
      "match_about_blank": true,
      "all_frames": true   
    }
  ],

  "browser_action": {
  "default_icon": "icons/mlcalc32.png",
  "default_title": "Calc",
  "default_popup": "html/index.html"
  }
}

script.js:

var valor1 = document.getElementById('price-tag-amount').innerText;
var valor2 = document.getElementById('price-tag-symbol').innerText;
var valor3 = document.getElementById('price-tag-fraction').innerText;
var valor4 = document.getElementById('price-tag-decimal-separator').innerText;
var valor5 = document.getElementById('price-tag-cents').innerText;

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Mlcalc</title>
	<link rel="stylesheet" type="text/css" href="/html/style.css">
</head>
<body>
	<h3>Calculator</h3>
	<br>
	Nome:
	<div id="nameProduct">Product Name</div><br>
	<div id="priceProduct">Product price</div><br>
	<input type="button" value="TEST" id="test">

	<script type="text/javascript" src="./script/popup.js"></script>
</body>
</html>

popup.js:

var namep = document.getElementById('nameProduct')
var pricep = document.getElementById('priceProduct')
var botao = document.getElementById('test');
botao.addEventListener('click', calculate);

function cauculate() {
  namep.innerText = test; 
  pricep.innerText =  valor1; (the variable "valor1" was seted on script.js and i need use it here)
}

What i want the script do is get information from a web site (value of product on a div), then show this value on a popup

The popup menu appears when i click on addon icon in a
toolbar

Print:

Thank you for your supporting.

#4

Okay, you need the data in the page to be made accessible to your popup script. You could have your content script write to local storage (MDN), but keeping track of which data belongs to which page could get complicated.

I think the most suitable method is to use messaging. For example, when your popup opens, your poup.js script would send a request to the current page to return the relevant data (MDN). I don’t think I have any examples of that from a popup window, so I haven’t tested it myself.

#5

I will try the messaging method and post here the result.