Browser extension

[hatemhosny]

This issue discusses the development of a browser extension based on the discussion started in #841

The extension should be able to (this list can continue to grow):

• open code blocks in LiveCodes
• convert code blocks to embedded playgrounds
• context menu: edit in LiveCodes

[hatemhosny]

I'm copying @ahmdWard reply here:

@hatemhosny Thanks for letting me take this on. It’s my first time building a browser extension, so I started with the Chrome docs and a few small practice projects to get the hang of the basics , After that I’ve started working on the Chrome extension integration and pushed my initial progress here: repo

So far, the extension can: Add a context menu entry (“Open in LiveCodes”). Grab the selected text from any page. Open a new LiveCodes playground in a new tab. Do basic (naive) HTML / CSS / JS detection to pick the right panel.

Next, I plan to: Add a content-script button above blocks for quicker access. Explore an inline “embed in page” option for instant preview.

I'd like to hear some suggestion or insights to what features would be most useful to add.

This one i want to consider it to the future: Sometimes when I’m solving problems on LeetCode and get stuck, I want to quickly debug the code without opening an IDE. I usually keep a LiveCodes tab next to my LeetCode tab for this, but there’s a catch LeetCode uses a class based structure for its solutions. To run it in LiveCodes, I first need to convert that class/method into a standalone program with some dummy variables that act as the method’s parameters.

Right now, I use an LLM to do that conversion quickly. But in the future it could be interesting to have a built-in option that automatically converts a LeetCode snippet into a runnable program in LiveCodes, so you can debug interactively right away.

[hatemhosny]

Thank you, @ahmdWard

I think most uses for the extension will depend on these main features:

• Getting the code. This can be further classified to:
  • The whole URL should be imported to LiveCodes (see import sources).
  • The code needs to be extracted from the web page (e.g. code blocks).
• Detecting the language
• Generating a playground URL or directly embedding it in the page

These are my suggestions:

• Whole URL needs to be imported: This is easy, we just send the whole URL to LiveCodes and it will just do the rest!
• Code needs to be extracted: I do not prefer manual selection. Most websites use a syntax highlighter (commonly prismjs or highlightjs). These generate predictable HTML which we can parse and extract code from. We can fallback to detecting <code></code> HTML elements.
• Detecting the language: syntax highlighters add the language used to the element (usually class, e.g. language-js). This can be reliably used. Otherwise, highlightjs has a language detection utility which can be used for guessing (example). However, it is not accurate.
• Generating playground URL/embedding playgrounds: Using the SDK should be the most efficient way.

This is an example of how GitHub code blocks look like:

console.log('hello');

We can extract the code and language using something like this:

document.querySelectorAll('.highlight').forEach((codeBlock) => {
  const code = codeBlock.innerText;
  const lang = [...codeBlock.classList]
    .find((c) => c.startsWith('highlight-source-'))
    .replace('highlight-source-', '');
  console.log({ lang, code });
});

This one i want to consider it to the future: Sometimes when I’m solving problems on LeetCode and get stuck, I want to quickly debug the code without opening an IDE. I usually keep a LiveCodes tab next to my LeetCode tab for this, but there’s a catch LeetCode uses a class based structure for its solutions. To run it in LiveCodes, I first need to convert that class/method into a standalone program with some dummy variables that act as the method’s parameters.

Right now, I use an LLM to do that conversion quickly. But in the future it could be interesting to have a built-in option that automatically converts a LeetCode snippet into a runnable program in LiveCodes, so you can debug interactively right away.

That's a very nice use-case. Can you please send a link I can have a look at?

After implementing the generic features outlined above, we can start handling specific websites (like LeetCode).

[hatemhosny]

Example: https://livecodes.io/?x=id/pgjem2cf7q9

[ahmdWard]

@hatemhosny I hope you are well.

Sorry for the late reply, I was trying and testing different implementations before reaching you, thanks for breaking down the problem, it helped me a lot.

What I did so far

Whole URL import → implemented and working (right click and choose edit in live code), suitable with gitHub

Code extraction + language detection → handled via prismjs/highlight.js classes, with fallback auto-detect.

Embedding with SDK → still working on this, Chrome extension environment has some limits with import.

Problems I found

MDN Docs: extension doesn’t run at all (even simple logs don’t appear) → likely CSP or script injection restrictions. i read some of docs about that but i felt lost, so if you have an idea about this one it will be so helpful

Auto-detect: highlight.js guessing is sometimes inaccurate (as you mentioned).

Embedding via SDK: Chrome extensions don’t allow direct import from npm/CDN, so need another approach.
I tried the documentation installation but i found that it's not working on google extension

here is my Repo with current progress : Live_code_extension

some photos of how it works

code from git hub

I tested on medium website sometimes detects right and sometime NOT but it was accurate above like 70%

That's a very nice use-case. Can you please send a link I can have a look at?

this is how we solve in leetcode

but if we need to test something or debug our solution on an IDE it should be like this
That is the result when i use LLM's to convert my code to a standalone program to debug the problem

[hatemhosny]

That's very nice @ahmdWard

I have not yet tested it locally, but I had a look on the code. Nice work 👍

Embedding via SDK: Chrome extensions don’t allow direct import from npm/CDN, so need another approach.

LiveCodes SDK has a UMD version. You can download it and use it like you do with highlightjs.

this is how we solve in leetcode
but if we need to test something or debug our solution on an IDE it should be like this
That is the result when i use LLM's to convert my code to a standalone program to debug the problem

I faced a similar issue when implementing running code snippets on cheatsheets.zip using LiveCodes.
You can find the implementation here. For example, this is how it handles C++.

When I have some more time, I will test the extension and try it with different websites.

Thank you and keep up the great work!

[ahmdWard]

I’ll consider your follow up points and work on them, then get back to you once I’ve made progress. Really appreciate your help

[ahmdWard]

@hatemhosny
I’ve now implemented all the points we discussed:
Open code blocks in LiveCodes
Convert code blocks to embedded playgrounds (using the LiveCodes SDK UMD build for( JS/HTML/CSS)
Context menu : Edit in LiveCodes (imports the whole page)
Everything on the original list is now covered
Whenever you get a chance, I’d love for you to test it out and share any further suggestions or improvements you think would be valuable.

[hatemhosny]

That's nice progress @ahmdWard
Great work.

Since we have a working prototype now, we can start thinking of improvements!

I prefer we do not add elements in the page that may affect the layout (e.g. adding height to the elements).
I suggest adding a small run button on code blocks that when clicked opens the code in LiveCodes in a new window.
This is a basic demo: https://livecodes.io/?x=id/khzdxyceea2

In this demo, I used anchor positioning to avoid changing the page styles (e.g. avoid adding relative positions, etc).

Also if we do not know the used language beforehand, using params would be simpler than conditionally constructing the config object. e.g. { params: { [language]: content } }.

We have to consider a few things:

• properly positioning the button
• what happens if the code block already has a button (e.g. copy button)
• should we add another button for embedding a playground instead of opening a new window?

Other things I noticed:

• clicking the button multiple times inserts the playground multiple times
• I did notice the CSP issue where the iframe is not allowed to load in some websites (including GitHub). Can the extension bypass CSP? I think it can.
• The button appears in some places where it shouldn't (e.g. GitHub commit info)

• in some websites line breaks are not preserved. I think this can be solved by using innerText instead of textContent

Another question:
Should we consider using one of the frameworks that allows making cross browser extensions?
Chrome is already enough, but if the extra effort is not much, maybe we just as well support other browsers.

Overall, this is heading in a very nice direction.
Great job. Thank you.