this is my first time posting.

I like to use “Notion”, the web note-taking application.

A feature on the Notion web app allows us to view the full screen on embedded HTML (iframe).

You can try for yourself using this published sample page to see the full-screen function: https://marbled-tarragon-577.notion.site/wiki-00390ad03f0848659bb2927fa4b3a146

On the native Notion app, it’s more of a three-step process to get the iframe in full-screen view. Here are some images to give you an idea: step 1 step 2 step 3.

I was wondering if it would be possible to create a Chrome extension to achieve the full-screen view on the native app version on command via hotkey input. I mean without having to navigate through those intermediate steps ( skipping steps 1 and 2).

I tried asking for gpt 4 and it suggested creating an extension that can track/save the necessary event listeners and retrigger them via a hotkey. It also suggested using a CSS selector or finding a unique identifier for the fullscreen button (like an ID, class, or other attributes).

It then gave the following guide:

1. Capture the XPaths

Once you already have the XPaths of the elements involved in your desired interaction. These XPaths will guide the scripting within your content script to find and interact with these elements programmatically.

2. Setup Hotkeys

The Chrome extension can listen for specific key combinations (hotkeys) defined in the manifest.json file. You would set up a listener for these hotkeys in the background script, and upon detecting the right combination, trigger a command that prompts the content script to act.

3. Navigation and Interaction Script

The content script, which can directly interact with the content of the web page, would:

Use the XPaths to find the iframe or the button that triggers the dropdown.

Programmatically mimic the user actions like hover, click, or right-click. You can use the document.evaluate() function in JavaScript to handle XPath expressions and find DOM elements directly. This function returns an XPathResult, which can be used to fetch the actual DOM node.

Depending on the complexity and the exact behaviour of the web elements (like delays in loading or rendering, animations, etc.), you might need to implement a sequence of actions with possible waits or checks to ensure each step completes before the next begins (e.g., checking if a dropdown has appeared before trying to click an option in it).

Is this the right approach or is there a better way to do this? Any suggestions or prompts to get me on the right track would be appreciated.

By the way, I have a basic understanding of HTML, CSS, and JavaScript. I have been able to transcribe code from GPT into Visual Studio Code successfully. I was even able to load an extension and it worked (although it’s unrelated to this topic).

Any help will be appreciated.

Cheers, mates!