How to access JS objects/functions in webpage

Add-ons for Pale Moon and other applications
General discussion, compatibility, contributed extensions, themes, plugins, and more.

Moderators: FranklinDM, Lootyhoof

User avatar
KevinJones
Newbie
Newbie
Posts: 5
Joined: 2022-04-15, 13:50

How to access JS objects/functions in webpage

Unread post by KevinJones » 2022-05-15, 02:56

I am currently developing an app using Firefox 45 as a framework, which will access and control a surveillance camera. The camera has a built-in webserver and can be accessed on the local network using the IP address. I wanted to provide extended features not currently available in the camera's UI.

I chose FF 45 as it was the oldest version available which supports the code the camera code uses. I was trying to go for the most primitive version of FF as I could.

Herein lies my issue. I am trying to feel my way around using Scratchpad in browser context. I am finding that I cannot directly access JS objects/functions on the camera page, at least not how I have attempted. Here is an example:

In scratchpad within the page context, I can run:

Code: Select all

// Code run in camera webpage context.
// ViewImage is a function within the camera webpage's code.

dump(window.ViewImage + "\n");
And I get output indicating ViewImage is accessible.

However, in Browser context:

Code: Select all

// Code run in browser context:
// Webpage is loaded in gBrowser.browsers[0].

function XXXXRun() {
  let initBrowser = gBrowser.browsers[0];
  let win = initBrowser.docShell.DOMWindow.window;
  dump(win.ViewImage + "\n");
}

XXXXRun();
Output indicates "undefined". However, I can access DOM objects eg,

Code: Select all

// Code run in browser context:
// Webpage is loaded in gBrowser.browsers[0].

function XXXXRun() {
  let initBrowser = gBrowser.browsers[0];
  let win = initBrowser.docShell.DOMWindow.window;
  dump(win.document.getElementById("some_id_unique_to_the_camera_page") + "\n");
}

XXXXRun();
Indicates the presence of an element with that ID.

I ultimately intend to modify the browser code rather than running an addon inside of it. I have successfully made modifications to the code already to add features to the camera UI which involve DOM manipulation. Eventually the UI will be radically altered where it will not appear like a browser at all. However I thought this might be the best place to ask my question, for if I am able to understand how this is normally accomplished using an addon, I might be able to figure out how to modify the browser code directly. Or if someone knows how I can access the page's objects using Scratchpad in browser context, that would be better, as I could use the code directly.
Last edited by KevinJones on 2022-05-15, 14:43, edited 1 time in total.

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 35473
Joined: 2011-08-28, 17:27
Location: Motala, SE
Contact:

Re: How to access JS objects/functions in webpage

Unread post by Moonchild » 2022-05-15, 08:02

Unless ViewImage is explicitly defined on the window object, it would be part of the win.document, no? Check where the function lives; you may be trying to find it in the wrong place?
"Sometimes, the best way to get what you want is to be a good person." -- Louis Rossmann
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb
"Linux makes everything difficult." -- Lyceus Anubite

User avatar
KevinJones
Newbie
Newbie
Posts: 5
Joined: 2022-04-15, 13:50

Re: How to access JS objects/functions in webpage

Unread post by KevinJones » 2022-05-15, 14:40

Moonchild wrote:
2022-05-15, 08:02
Unless ViewImage is explicitly defined on the window object, it would be part of the win.document, no? Check where the function lives; you may be trying to find it in the wrong place?
Thanks for replying.

Am I wrong in assuming `gBrowser.browsers[0].docShell.DOMWindow.window` is equivalent to `window` of the page residing in `gBrowser.browsers[0]`? (Apparently so?)

I tried

Code: Select all

// Code run in browser context:
// Webpage is loaded in gBrowser.browsers[0].

function MMMRun() {
  let initBrowser = gBrowser.browsers[0];
  let win = initBrowser.docShell.DOMWindow.window;
  
  dump("ViewImage: " + win.document.ViewImage + "\n");
  dump("ViewImage: " + win.document.defaultView.ViewImage + "\n");
}

MMMRun();
and both still report `undefined`.

Here is an example of the code in the JS file downloaded from the camera:

Code: Select all

function ViewImage() {
  throw { "msg": "Don't NEW a singleton." };
}

EventListener.apply(ViewImage);

(function() {
  ViewImage.refreshView = function() {
  ...
  }
  ...
})();

Locked