How to export yellow labels for web elements to JSON or another format?

[blevlabs]

Hello, I am utilizing the Vimium platform for web navigation, and the "f" key for finding and labeling elements is great. However, I wanted to know if there was a way to export these to a clipboard or another format to access and view them. If so, or if there is a spot where I can add the feature, that would be great.

[UncleSnail]

What exactly are you looking to do? Are you looking to just get a list of the letters that are used? You can find that in your preferences. Or are you looking for something like:

{
    'a': 'https://example1.com',
    'b': 'https://example2.com',
}

[blevlabs]

@UncleSnail I am just looking to see what is possible! When I see those labels, whether for the input fields, buttons, etc. I just want to be able to export what each current label is tied to in some way beyond the visuals. My main concern is being able to say:

{{ "SE": "either the web code or label, like a button that says "Search" or the code on the website the button is referring to" }}

So being able to export what each label is actually referring to (so it can be available for programmatic use), Instead of just seeing the labels on the screen

[UncleSnail]

I believe that is outside the scope of putting that feature into the base version of Vimium based on the contribution guidelines (because this is pretty niche functionality and not used by most of the Vimium users), but it would still be possible to do what you want, potentially, because all of the link hints are just html/css that get added to the page when you push the button. So when you push "f", a new vimiumHintMarkerContainer div gets added to the page with all the link hints.

I can see two potential options:

1. You can make a fork that implements what you want, and modify the code that generates these link hints to either include the actual link as a data attribute, or you can tell it to also export them, or make your own command to export them by copying and modifying the code from the f command.
2. You could create something that queries the html elements to find the letters, then queries the visible links on the page to find what the letter points to.

I would recommend just making a fork with the command you want. What are you actually trying to achieve? What do you need the links for? It might be possible to do it some other way.

[blevlabs]

@UncleSnail I had certainly assumed it was outside of the scope for this project. My usage is utilizing it for web testing, to be able to feed the results into an app for automated element identification and usage testing.

Definitely, if there is any guidance you can provide, I am certainly going to make a fork that achieves this. Let me know if you have any insights on how to get started! I am currently unfamiliar with the backend structure of how Vimium works so even a few hints on where to look to modify the relevant sections would be greatly appreciated!

[UncleSnail]

Okay, I'm not sure about your use case but you could look into some testing frameworks based on Puppeteer, which lets you query elements, follow links, etc. It is designed to run a controlled version of Chromium and programmatically check values, follow links, etc. It would probably work better. There are also other system testing frameworks you could try to research, but I've used Puppeteer before and it works pretty well. I think I was using Cucumber to actually run the tests (but you should look into the simplest thing that solves your needs, and that's probably not it).

If you still want to use your own Vimium fork, I would suggest looking at the link_hints.js file, although you would need to find for yourself the best way to implement what you want. You could probably add some code to the renderHints method that also saves them to a json file.

I hope that helps you get to what you want.