[F/OS] Blockly Highlighter: Instantly Find & Highlight Any Kodular Block in Seconds!

Guides Resources
,
1

Blockly Highlighter

:television: Watch the demo video: https://youtu.be/9JejveXwCaY

Overview

Blockly Highlighter is a lightweight browser extension for Chrome, Firefox, and Opera that helps you quickly locate, highlight, and clear visual blocks by keyword in Blockly-based environments such as MIT App Inventor and Kodular Creator.
You can use the graphical popup or keyboard shortcuts to search instantly.

Features

  • :magnifying_glass_tilted_left: Keyword Search: Find blocks whose text labels include your search term using a popup or keyboard shortcut (Ctrl + Shift + F / ⌘ + Shift + F on macOS).
  • :sparkles: Yellow Highlight: Matching blocks are outlined with a yellow neon glow.
  • :counterclockwise_arrows_button: Clear Highlights: Remove all highlights with one click or via Ctrl + Shift + L.
  • :1234: Match Counter: Instantly see how many blocks matched your search.
  • :globe_with_meridians: Language Support: Switch between English, Português, and Español in the popup.
  • :high_voltage: Fast & Lightweight: Runs only when you use it—no background scripts, no lag.

Installation

Chrome

  1. Clone this repository or download from the Chrome Web Store:

    git clone https://github.com/iagolirapasssos/Blockly-Highlighter.git

  2. Open Chrome and go to chrome://extensions/.

  3. Enable Developer mode.

  4. Click Load unpacked and select the extension’s folder.

  5. Pin the Blockly Highlighter icon for quick access.

Firefox

  1. Open about:debugging#/runtime/this-firefox in Firefox.
  2. Click Load Temporary Add-on….
  3. Select the manifest.json file from the extension folder.
  4. Pin the Blockly Highlighter icon to your toolbar.

Opera

Method 1: Manual

  1. Go to opera://extensions/.
  2. Enable Developer mode.
  3. Click Load unpacked and select your extension folder.

Method 2: Chrome Web Store

  • Install the Install Chrome Extensions add-on (only once).
  • Visit the Chrome Web Store and install Blockly Highlighter directly.

Usage

Popup:

  1. Click the Blockly Highlighter icon in your toolbar.
  2. (Optional) Select your preferred language from the dropdown (EN/PT/ES).
  3. Enter a keyword and press Highlight or hit Enter.
  4. All blocks containing that keyword will glow yellow and the match counter will appear.
  5. Click Clear to remove highlights and restore original colors.

Keyboard Shortcuts:

  • Ctrl + Shift + F (or ⌘ + Shift + F on macOS): Open the search prompt anywhere on a supported Blockly workspace.
  • Ctrl + Shift + L: Instantly clear all highlights.

Permissions

  • activeTab: Temporary access to inject scripts into the page.

  • scripting: Required to run highlight/clear logic.

  • Host permissions (in manifest.json):

    • https://ai2.appinventor.mit.edu/*
    • https://creator.kodular.io/*
    • (Add more if you use other Blockly-based platforms.)

These permissions ensure the extension only runs on Blockly workspaces and only when you use it.

Development

  1. Edit manifest.json, content_script.js, popup.html, popup.js, or styles.css as needed.
  2. Bump the version in manifest.json.
  3. Reload the extension on chrome://extensions, about:debugging, or opera://extensions.
  4. Test in a Blockly workspace.

Contributing

Contributions are welcome!

  • Open an issue or submit a pull request.
  • Follow existing code style.
  • Increment the version and update the changelog if applicable.
  • Clearly describe any new features or fixes.

License

MIT License. See the LICENSE file for details.

A screenshot of a visual programming interface with multiple colourful code blocks and a search popup window asking to highlight blocks containing the term 'checkBox'. (Captioned by AI)
A screenshot of a visual programming interface with multiple colourful code blocks and a search popup window asking to highlight blocks containing the term 'checkBox'. (Captioned by AI)1366×618 269 KB

A screenshot of a block-based coding environment showing colourful, interconnected code blocks with a modal window titled 'Blockify' offering options to 'Highlight' or 'Clear'. (Captioned by AI)
A screenshot of a block-based coding environment showing colourful, interconnected code blocks with a modal window titled 'Blockify' offering options to 'Highlight' or 'Clear'. (Captioned by AI)1366×751 148 KB

Note: the extension is compatible with App Inventor, Kodular, Niotron and Android builder.

8 Likes
2

I don’t know if I added it to the correct category. I tried to migrate it but I couldn’t.

3

I found this error

Error: Could not establish connection. Receiving end does not exist.
4

You will need to refresh the Kodular page containing the blocks right after installing the extension.

1 Like
5

Yes, it works.

1 Like
6

Useful. Nice work

1 Like
7

Thanks! The extension works with anyone who uses Blockly.

8

Good job.
What’s the difference between yours and the other one that already exists?

1 Like
9

Which one? I don’t know any other.

10

A imagem mostra uma interface de desenvolvimento de blocos, onde o usuário pode selecionar diferentes tipos de blocos como Component Blocks, Control Blocks, Logic Blocks, Procedure Blocks, Variable Blocks e Other Blocks, dentro de um projeto chamado 'GetJob'. (Legendado por IA)
A imagem mostra uma interface de desenvolvimento de blocos, onde o usuário pode selecionar diferentes tipos de blocos como Component Blocks, Control Blocks, Logic Blocks, Procedure Blocks, Variable Blocks e Other Blocks, dentro de um projeto chamado 'GetJob'. (Legendado por IA)293×663 24.7 KB

https://community.kodular.io/t/find-blocks-blocks-finder/142100?u=rogerio_rios

11

I didn’t know, but in any case the project no longer receives support since 2022.

1 Like
12

The image shows a Chrome Web Store page for the extension 'Blockly Highlighter' with options to use it on Chrome and links to its developer tools and repository. (Captioned by AI)
The image shows a Chrome Web Store page for the extension 'Blockly Highlighter' with options to use it on Chrome and links to its developer tools and repository. (Captioned by AI)1255×520 75.9 KB

Download the extension directly from the Chrome Web Store.

13

Is it on Firefox?

1 Like
14

The image shows a GitHub repository named 'Blockly-Highlighter' with its file structure including folders for Chrome, Firefox, images, and opera, along with README.md and icon128.png files, with recent commits indicating new aliases and others. (Captioned by AI)
The image shows a GitHub repository named 'Blockly-Highlighter' with its file structure including folders for Chrome, Firefox, images, and opera, along with README.md and icon128.png files, with recent commits indicating new aliases and others. (Captioned by AI)742×357 33.9 KB

Yes, it now supports Chrome, Firefox and Opera: GitHub - iagolirapasssos/Blockly-Highlighter.

Note: the extension is compatible with App Inventor, Kodular, Niotron and Android builder.

3 Likes