Webflow Components Plus Extension Chrome

Make various enhancements to Webflow's components workflow

Latest Version

Version

0.1.1

Update

June 26, 2024

Size

13.5KiB

Developer

Webflow Components Plus Extension

This extension replaces Webflow text fields with dropdowns so you or your client can easily switch between preset values.

To make it work you need to label your props like so:
\"Name of your prop {option A,option B,option C}\"

The comma separated values within curly brackets will become the options for the dropdown field.

It's handy if you combine this with a CSS based styling system + custom attributes. You can make dramatic changes to your component styles without setting up a bunch of visibility props.

You can setup custom attribute based CSS styles like so:
.button[hierarchy=\"primary\"]{ background-color: blue }
.button[hierarchy=\"secondary\"]{ background-color: gray }
.button[hierarchy=\"tertiary\"]{ background-color: transparent }

Then, you can setup your custom attribute in your button component:
Attribute name: hierarchy
Attribute value: Assign a prop called \"Hierarchy {primary,secondary,tertiary}\"

That's it. No more misspellings or confused end-users!

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 3, "name": "Webflow Components Plus", "description": "Make various enhancements to Webflow's components workflow", "version": "0.1.1", "icons": { "16": "images/icon-16.png", "32": "images/icon-32.png", "48": "images/icon-48.png", "128": "images/icon-128.png" }, "permissions": [ "storage" ], "options_ui": { "page": "options.html", "open_in_tab": false }, "content_scripts": [ { "js": [ "scripts/main.js" ], "matches": [ "https://*.design.webflow.com/*" ] } ]}