Highlight a parent element and randomize the order of its children.

Latest Version

Version

1.1

Update

June 25, 2024

Size

155KiB

Developer

Element Shuffle Extension

Element Shuffler: Element Shuffler was created out of a need to efficiently shuffle Jira quick filters, but its versatility extends to rearranging most webpage elements unless it uses a different DOM.
Overview:
Unlock a new level of webpage customization with Element Shuffler, a versatile Chrome extension that empowers you to dynamically rearrange elements on any webpage with a simple click. Whether you're a developer testing layouts, a designer exploring different arrangements, or just someone who loves to experiment with web content, Element Shuffler is the perfect tool for you!

Key Features:

Intuitive Element Selection: Easily select any element on a webpage with a simple click.
Dynamic Shuffling: Shuffle the children of any selected element to explore new layouts and designs.
Persistent Buttons: Keep your shuffle buttons visible and ready to use above any background color.
Quick Removal: Conveniently remove shuffle buttons with a built-in remove button, or clear all shuffle buttons at once.
User-Friendly Interface: Enjoy a sleek, easy-to-use interface that makes shuffling and rearranging elements a breeze.
How It Works:

Select Element Mode: Activate the \"Select Element\" mode from the popup and click on any element you wish to rearrange.
Shuffle and Remove Buttons: Use the permanent shuffle button to rearrange the element’s children or the remove button to delete the shuffle button.
Clear All Elements: Quickly clear all shuffle buttons from the webpage using the \"Clear All Elements\" button.
Who Can Benefit:

Web Developers: Test different element arrangements without altering the actual code.
Web Designers: Experiment with layouts and designs on live webpages.
Content Creators: Customize the look and feel of your web content on-the-fly.
Enthusiasts: Have fun rearranging webpage elements to see different possibilities.
Get Started:

Install Element Shuffler from the Chrome Web Store.
Click the extension icon to open the popup.
Start selecting elements and shuffling them as you like!
Why Choose Element Shuffler:

Effortless Customization: Make real-time changes to any webpage with zero coding required.
Versatility: Suitable for a wide range of users, from professionals to hobbyists.
Efficiency: Save time by quickly testing and visualizing different layouts and designs.

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx",\t"manifest_version": 3,\t"name": "Element Shuffle",\t"version": "1.1",\t"description": "Highlight a parent element and randomize the order of its children.",\t"permissions": [\t\t"activeTab",\t\t"storage"\t],\t"background": {\t\t"service_worker": "background.js"\t},\t"action": {\t\t"default_popup": "popup.html",\t\t"default_icon": {\t\t\t"16": "icons/icon16.png",\t\t\t"19": "icons/icon19.png",\t\t\t"32": "icons/icon32.png",\t\t\t"38": "icons/icon38.png",\t\t\t"48": "icons/icon48.png",\t\t\t"128": "icons/icon128.png"\t\t}\t},\t"icons": {\t\t"16": "icons/icon16.png",\t\t"19": "icons/icon19.png",\t\t"32": "icons/icon32.png",\t\t"38": "icons/icon38.png",\t\t"48": "icons/icon48.png",\t\t"128": "icons/icon128.png"\t},\t"content_scripts": [\t\t{\t\t\t"matches": [\t\t\t\t""\t\t\t],\t\t\t"js": [\t\t\t\t"node_modules/@webcomponents/custom-elements/custom-elements.min.js",\t\t\t\t"highlighter.js",\t\t\t\t"content.js"\t\t\t],\t\t\t"css": [\t\t\t\t"styles.css"\t\t\t]\t\t}\t]}

Download CRX(155KiB)