Firefox Addon 如何无法从 Popup JS 访问浏览器页面 DOM？

Question

HiI am trying to develop small simple popup extension in Firefox, I am new to the Firefox extension development Framework.

I used this boilerplate to speed up this process

I Added a small button to the popup with an id = testid1 by overriding the popup.html file and adding this line

<a id="testid1" href="#" class="js-options">Test</a>

I added it the corresponding EventListener by overriding the popup.addEventListener in the popup.js file

popup.addEventListener("click", function (e) {
  if (e.target && e.target.matches("#testid1 ")) {

  var element_from_popup_html = document.getElementById("elementid1").value;
  var element_from_web_page = document.getElementById("elementid2").value;
  alert('it work');
}}

I made sure that this event lister triggers correctly and is working by using an Alert. I am trying to get 2 elements from the DOM Element1(inside popup page), and Element2(Fromthe webbrowser)

I can't get the: element_from_web_page!!

and I have document.getElementById("elementid2") is NULL.

So After digging some more the: document here is the popup.html, How am I supposed to access this webbrowser browsed page. I used to use document keyword for this!!

Also found out that I can use the Javascript API from mozilla by using _ext2.default.and_put_the_chosen_api_here but I only need simple dom find by id?

Answer 1

I managed to solve my problem after reading some more about the Firefox Extensions. So basically what I was doing is managing the popup document not the webpage. In order to interact with the webbrowser current page I needed to change another type of js called a content script , which is different from the popup.js javascript file(similar to the background script) that I was editing.

So basically I had to use the communication between the background and content-script with regards to the documentation.

On the content_script.js, I interacted with the web-page using some eval function.