Chromium WebGadget v4

Developed or developing a new product in PureBasic? Tell the world about it.
JHPJHP
Addict
Addict
Posts: 2129
Joined: Sat Oct 09, 2010 3:47 am
Contact:

Re: Chromium Edge WebGadget

Post by JHPJHP »

Hi ricardo,
ricardo wrote:Its me or its taking some time to show url and description.
Returning the Address takes between 500 to 800 milliseconds (on my system).
Returning the Description takes between 3 to 5 milliseconds (on my system).

The discrepancy is due to the index position of each object and the subsequent number of child objects that need to be searched.

After a couple tweaks, the time it takes to return the address is between 100 to 200 milliseconds (on my system).

In addition, the Procedure to check browser version has been updated.

The following example should provide more accurate results; disable the debugger, enable DPI Aware.

Code: Select all

Enumeration
  #MainWindow
  #CE_WebGadget
  #ButtonGadget1
  #ButtonGadget2
  #ButtonGadget3
  #ButtonGadget4
  #ButtonGadget5
  #ButtonGadget6
EndEnumeration

#CE_WebGadget_Override_User_Directory = #True

IncludeFile "sources\cewg_sources.pbi"

WindowWidth = 800 : WindowHeight = 600
nFlags = #PB_Window_SystemMenu | #PB_Window_MinimizeGadget | #PB_Window_ScreenCentered | #PB_Window_Invisible

If OpenWindow(#MainWindow, 0, 0, WindowWidth, WindowHeight, "Chromium Edge WebGadget", nFlags)
  ButtonGadget(#ButtonGadget1, 10, 10, 120, 30, "Get Address")
  ButtonGadget(#ButtonGadget2, 142, 10, 120, 30, "Get Description")
  ButtonGadget(#ButtonGadget3, 274, 10, 120, 30, "Back")
  ButtonGadget(#ButtonGadget4, 406, 10, 120, 30, "Forward")
  ButtonGadget(#ButtonGadget5, 538, 10, 120, 30, "Refresh")
  ButtonGadget(#ButtonGadget6, 670, 10, 120, 30, "Home")
  CE_WebGadget(#CE_WebGadget, 10, 50, 780, 540, #CE_WebGadget_Flat)
  cewg_data.CEWG_DATA
  cewg_data\GadgetNumber = #CE_WebGadget
  cewg_data\SourceURL = "https://youtube.com"
  CE_WebGadget_Init(cewg_data)
  HideWindow(#MainWindow, #False)

  Repeat
    Event = WaitWindowEvent()

    Select Event
      Case #PB_Event_Gadget
        Select EventGadget()
          Case #ButtonGadget1
            nStart = ElapsedMilliseconds()
            Address$ = CE_WebGadget_Update(cewg_data, "GetAddress")
            nFinish = ElapsedMilliseconds() - nStart
            MessageRequester("Chromium Edge WebGadget", Address$ + ": " + Str(nFinish) + " ms", #PB_MessageRequester_Info)
          Case #ButtonGadget2
            nStart = ElapsedMilliseconds()
            Description$ = CE_WebGadget_Update(cewg_data, "GetDescription")
            nFinish = ElapsedMilliseconds() - nStart
            MessageRequester("Chromium Edge WebGadget", Description$ + ": " + Str(nFinish) + " ms", #PB_MessageRequester_Info)
          Case #ButtonGadget3
            nStart = ElapsedMilliseconds()
            CE_WebGadget_Update(cewg_data, "Back")
            nFinish = ElapsedMilliseconds() - nStart
            MessageRequester("Chromium Edge WebGadget", "Back: " + Str(nFinish) + " ms", #PB_MessageRequester_Info)
          Case #ButtonGadget4
            nStart = ElapsedMilliseconds()
            CE_WebGadget_Update(cewg_data, "Forward")
            nFinish = ElapsedMilliseconds() - nStart
            MessageRequester("Chromium Edge WebGadget", "Forward: " + Str(nFinish) + " ms", #PB_MessageRequester_Info)
          Case #ButtonGadget5
            nStart = ElapsedMilliseconds()
            CE_WebGadget_Update(cewg_data, "Refresh")
            nFinish = ElapsedMilliseconds() - nStart
            MessageRequester("Chromium Edge WebGadget", "Refresh: " + Str(nFinish) + " ms", #PB_MessageRequester_Info)
          Case #ButtonGadget6
            nStart = ElapsedMilliseconds()
            CE_WebGadget_Update(cewg_data, "Home")
            nFinish = ElapsedMilliseconds() - nStart
            MessageRequester("Chromium Edge WebGadget", "Home: " + Str(nFinish) + " ms", #PB_MessageRequester_Info)
        EndSelect
      Case #PB_Event_CloseWindow : Break
    EndSelect
  ForEver
EndIf
Last edited by JHPJHP on Fri May 13, 2022 5:55 am, edited 11 times in total.
Balmung
User
User
Posts: 24
Joined: Sat Dec 22, 2018 9:15 pm

Re: Chromium Edge WebGadget

Post by Balmung »

If you use a chromium webgadget like yours in Purebasic, did this make it possible to get on all the data in the Edge DevTools window in any way? Or is that only possible inside Edge itself?

Image

This is data from a websocket from a website.
JHPJHP
Addict
Addict
Posts: 2129
Joined: Sat Oct 09, 2010 3:47 am
Contact:

Re: Chromium Edge WebGadget

Post by JHPJHP »

Hi Balmung,

Thank you for your interest.
Balmung wrote:If you use a chromium webgadget like yours in Purebasic, did this make it possible to get on all the data in the Edge DevTools window in any way?
Funny you should ask. This is something I've been looking into lately. while I haven't gotten very far, I am familiar with the image you posted.

I've started an example that at least enables the remote debugging option, giving access to the Edge DevTools.
This example wasn't going to be included in the download, but if it generates interest...

--------------------------------------------------------------

Updated:
- added example CE_WebGadget_Debug.pb

CE_WebGadget_Debug.pb
After starting the example, browse around to see the debug window updated with information about the current tab page.

For those of you (like Balmung) with a little more interest... leave the debug example running.
Open your edge browser and type the following into the address bar: edge://inspect.

DevTools should open. Wait a few seconds, the Remote Target list should show.
If the only option you see in the list is: 127.0.0.1:9222/json/list, press the close link option associated to the item.
Wait a few seconds, a new list should generate with the following item: PureBasic Forums - English - Index page.
Press the inspect link option associated to the item and start playing.

https://peter.sh/experiments/chromium-c ... -switches/
--remote-debugging-address
Use the given address instead of the default loopback for accepting remote debugging connections.

--remote-debugging-pipe
Enables remote debug over stdio pipes [in=3, out=4].

--remote-debugging-port
Enables remote debug over HTTP on the specified port.

--remote-debugging-socket-name
Enables remote debug over HTTP on the specified socket name.
NB*: Chromium Edge WebGadget free executables were also updated.
Last edited by JHPJHP on Thu May 05, 2022 5:36 pm, edited 2 times in total.
Balmung
User
User
Posts: 24
Joined: Sat Dec 22, 2018 9:15 pm

Re: Chromium Edge WebGadget

Post by Balmung »

Thanks, will look into it, sounds promising. I must say, I had already expected a "No, not possible". :o
JHPJHP
Addict
Addict
Posts: 2129
Joined: Sat Oct 09, 2010 3:47 am
Contact:

Re: Chromium Edge WebGadget

Post by JHPJHP »

Hi Balmung,

The following update should better demonstrate remote debugging from the Chromium Edge WebGadget.
Currently, there are three stages to help with testing; see below.

--------------------------------

Updated:
- improved remote debugging
- check browser version is no longer the default, it must be requested
- SetAddress has been replaced with SetURL
- SetAddress is now a function currently limited to the remote debugging examples
- numerous improvements and bug fixes including additional error checking

In addition, the examples have been split between three folder.

Standard Examples
- CE_WebGadget_Browser.pb
- CE_WebGadget_ChartJS.pb
- CE_WebGadget_Display.pb

JSE SSE Examples
- CE_WebGadget_JSE.pb
- CE_WebGadget_JSE_SSE.pb
- CE_WebGadget_SSE.pb

Remote Debugging
- CE_WebGadget_1_Remote_Debug.pb
- CE_WebGadget_2_Inspect_Devices.pb
- CE_WebGadget_3_Embed_DevTools.pb

1. First, run the Remote Debugging example.
2. Next, run the Inspect Devices example.
-- wait a few seconds for the Remote Target list to show
-- press the close link option associated to the item 127.0.0.1:9222/json/list
-- wait a few seconds for a new list to generate
-- this can be expedited by making the Remote Connect example the active window and clicking the Refresh button
-- press the inspect link option associated to the item matching the webpage displayed in the Remote Connect example
-- this should create one of those previously mentioned errant browser windows, but in this case it's a good thing
3. Last, run the Embed DevTools example.
-- this should embed the errant browser window into the Chromium Edge WebGadget

NB*: The free executables have also been updated, but now only include the Standard Examples.
Last edited by JHPJHP on Tue May 10, 2022 5:29 am, edited 14 times in total.
Balmung
User
User
Posts: 24
Joined: Sat Dec 22, 2018 9:15 pm

Re: Chromium Edge WebGadget

Post by Balmung »

Ok, thank, hope I can test it at this weekend, didn't have the time yet to take a closer look.
JHPJHP
Addict
Addict
Posts: 2129
Joined: Sat Oct 09, 2010 3:47 am
Contact:

Re: Chromium Edge WebGadget

Post by JHPJHP »

Updated:
- added a WebSocket connection
- various minor improvements

WebSocket Connection

Run the Remote Debugging example (CE_WebGadget_1_Remote_Debug.pb)
-- this will open a Port connection to DevTools that returns information about the CE_WebGadget

Using information from the Port connection, a Client WebSocket connection to DevTools can be created.
Last edited by JHPJHP on Tue Jun 21, 2022 6:40 pm, edited 2 times in total.
JHPJHP
Addict
Addict
Posts: 2129
Joined: Sat Oct 09, 2010 3:47 am
Contact:

Re: Chromium Edge WebGadget

Post by JHPJHP »

Using only the Port Connection I was able to do the following:
- retrieve the browser version
- retrieve the entire protocol API as JSON
- retrieve a candidate list of page targets
- open a new tab page
- open a new tab page to a specified URL
- activate a tab page
- close a tab page

With WebSockets my hope was to at least have the same functionality the Port Connection provided.
Suffice to say it exceeded all expectations; I wasn't expecting this much access this easily.

https://chromedevtools.github.io/devtools-protocol/

Here are just some of the tests I performed:
- navigate an opened tab page to a specified URL
- input mouse and keyboard events directly to a tab page
- capture a screen-shot of a tab page
- access to the DOM
ricardo
Addict
Addict
Posts: 2402
Joined: Fri Apr 25, 2003 7:06 pm
Location: Argentina

Re: Chromium Edge WebGadget

Post by ricardo »

Here are just some of the tests I performed:
- navigate an opened tab page to a specified URL
- input mouse and keyboard events directly to a tab page
- capture a screen-shot of a tab page
- access to the DOM
Can you share your tests please?

Can i add some image or text (GoogleFonts) on the fly? Also interested on the screenshot

-----------------------------------

This one is getting the url and description fast :)
ARGENTINA WORLD CHAMPION
JHPJHP
Addict
Addict
Posts: 2129
Joined: Sat Oct 09, 2010 3:47 am
Contact:

Re: Chromium Edge WebGadget

Post by JHPJHP »

HI ricardo,
ricardo wrote:Can you share your tests please?
WebSocket (DevTools) is definitely my next step for the Chromium Edge WebGadget, but not in its current form. The remote debugging parts of the code are going to be pulled from the current version, and a new version (v2) started. Unfortunately, I don't yet have a timeline to begin testing.

NB*: Both versions will be maintained.

---------------------------------------

Updated:
- removed Remote Debugging (DevTools)
- removed Check Browser Version
- SetURL has been changed back to SetAddress
- minor improvements
ricardo
Addict
Addict
Posts: 2402
Joined: Fri Apr 25, 2003 7:06 pm
Location: Argentina

Re: Chromium Edge WebGadget

Post by ricardo »

JHPJHP wrote: Mon May 09, 2022 4:55 pm HI ricardo,
ricardo wrote:Can you share your tests please?
WebSocket (DevTools) is definitely my next step for the Chromium Edge WebGadget, but not in its current form. The remote debugging parts of the code are going to be pulled from the current version, and a new version (v2) started. Unfortunately, I don't yet have a timeline to begin testing.

NB*: Both versions will be maintained.

---------------------------------------

Updated:
- removed Remote Debugging (DevTools)
- removed Check Browser Version
- SetURL has been changed back to SetAddress
- minor improvements
Testing. So far so god :)
ARGENTINA WORLD CHAMPION
JHPJHP
Addict
Addict
Posts: 2129
Joined: Sat Oct 09, 2010 3:47 am
Contact:

Re: Chromium Edge WebGadget

Post by JHPJHP »

Hi ricardo,

Thank you for testing Chromium Edge WebGadget (v1).
JHPJHP wrote:This framework was never intended to pass JavaScript to and from a public webpage
Chromium Edge WebGadget (v2) now supports JavaScript.

Updated:
- version 2 now available; see below
- better support for multiple instances
- numerous improvements and bug fixes

NOTE: The Input.dispatchKeyEvent and Input.dispatchMouseEvent may not work as expected.

I was able to activate most links by using Input.dispatchMouseEvent followed by Input.dispatchKeyEvent, but this doesn't much matter when a JavaScript click() command can be sent using Runtime.evaluate; see below.

-----------------------------------------------------------------

CE_WebGadget_Remote_Connect.pb

Port Connection: Retrieves a candidate list of page targets.
Socket Connection: Opens a WebSocket connection to DevTools.
PageID: Unique ID needed to attach a page target.
Method: DevTools Protocol command; see URL below.
Params: Parameters for the selected Method.

The example includes only a small part of the DevTools Protocol: https://chromedevtools.github.io/devtools-protocol/1-3/.

DOM.getDocument
- set depth:-1 for complete list (may take awhile)

DOM.getOuterHTML
- backendNodeId can be retrieved from DOM.getDocument list

Input.dispatchKeyEvent
- if type:'keyDown' an auto type:'keyUp' will also be sent

Input.dispatchMouseEvent
- move the mouse pointer over an object and press the Insert key for auto X/Y values
- if type:'mousePressed' an auto type:'mouseReleased' will also be sent

Network.setUserAgentOverride
- tab page is refreshed after sending command
- change is noticable on YouTube page with current Params

Page.captureScreenshot
- returns a Base64 image
- image is auto converted to PB image
- save requester opens for location, format

Page.navigate
- navigate to an new URL

Runtime.evaluate
- run JavaScript commands; see above URL for other methods
- current Params are set for the YouTube page

Target.activateTarget
- change the focus to another opened tab page

Target.closeTarget
- close a tab page

NB*: Free executables have also been updated and include the v2 example seen below.
Last edited by JHPJHP on Wed May 18, 2022 2:11 am, edited 4 times in total.
ricardo
Addict
Addict
Posts: 2402
Joined: Fri Apr 25, 2003 7:06 pm
Location: Argentina

Re: Chromium Edge WebGadget

Post by ricardo »

Great!!

Im trying to learn and understand.
The webgadget thing that i want to do, navigate, get url, etc. is perfectly now.

As i said, im not familiar with this code and i am trying to understand. You may can create easier and straight codes as an examples showing a step by step or at least a very obvious for people not familiar with the code.

1.- Then i am jumping to new options... per example, i want to understand your marquee example.
How can i change the text or the image on the marquee? or even create a new text or a new image?


2.- The javascript example, i just don't understand it atm (i only check it a few minutes). I was not able to run the javascript yet.

Keep the great job!!

Thanks for your job!!
ARGENTINA WORLD CHAMPION
JHPJHP
Addict
Addict
Posts: 2129
Joined: Sat Oct 09, 2010 3:47 am
Contact:

Re: Chromium Edge WebGadget

Post by JHPJHP »

Hi ricardo,
ricardo wrote:You may can create easier and straight codes as an examples
I thought the example I provided did that :?: :) Anyways, a new (more basic) example has been added to v2.
ricardo wrote:How can i change the text or the image on the marquee? or even create a new text or a new image?
If you have at least a basic understanding of HTML, CSS and maybe JavaScript, then it couldn't be easier. The text and image can be changed directly from the defined HTML files; see \v1\Standard Examples\CE_WebGadget_Display.pb.

Most of the other examples use one or more HTML files, but converted to a DataSections for portability.
All HTML files are included in \CEWG Sources\html\ with their DataSection equivalent in \CEWG Sources\data\.
Using either a DataSection or HTML file is supported; CE_WebGadget_Display.pb is the only example using HTML files directly.

---------------------------------

Updated:
- added example CE_WebGadget_Remote_Basic.pb
- CLS files are now set from the CEWG_DATA Structure (cewg_data\FilenameCLS) before calling CE_WebGadget_Init
- various updates and improvements to both v1 and v2

Change the StringGadget text to the following and click the button:
- document.getElementsByClassName("style-scope ytd-button-renderer")[6].click();
Last edited by JHPJHP on Sun Jul 10, 2022 2:50 pm, edited 4 times in total.
ricardo
Addict
Addict
Posts: 2402
Joined: Fri Apr 25, 2003 7:06 pm
Location: Argentina

Re: Chromium Edge WebGadget

Post by ricardo »

If you have at least a basic understanding of HTML, CSS and maybe JavaScript, then it couldn't be easier. The text and image can be changed directly from the defined HTML files; see \v1\Standard Examples\CE_WebGadget_Display.pb.


I think now I know why I didn't understand some parts... it's that in my PB 5.73 LTS (64) the basic javascript example doesn't run and the previous example didn't run either.

Should I download version 6?

I did and still not running the javascript and yes, javascript in enabled on Edge.

I tried to run a simple "alert(0);" and nothing

BUT if i open a normal EDGE browser, navigate to youtube.com and then enter into the url (address bar)

javascript:document.getElementById("guide-icon").click();

or


javascript:document.getElementsByClassName("style-scope ytd-button-renderer")[6].click();

Both works, not in the embbeded browser, just in a normal edge browser.
Last edited by ricardo on Fri May 13, 2022 10:54 pm, edited 1 time in total.
ARGENTINA WORLD CHAMPION
Locked