How to Install PZ Demo Tool
About the Tool
PZ Demo Tool is a powerful Chrome extension that allows you to make real-time modifications to web pages. Perfect for creating demos, prototypes, and quick content updates without touching the code.
1 Click Chrome Menu
Click the three dots (âŽ) in the top-right corner of Chrome to open the menu
2 Select Extensions
From the dropdown menu, hover over "More Tools" and click "Extensions"
3 Manage Extensions
You'll be taken to the Extensions management page (chrome://extensions/)
4 Enable Developer Mode
Toggle on "Developer mode" using the switch in the top-right corner of the page
5 Load Unpacked Extension
Click the "Load unpacked" button that appears after enabling Developer mode. Select the unzipped PZ Demo Tool folder from your computer.
6 Verify Installation
You should now see the PZ Demo Tool listed in your extensions
7 Using the Tool
Visit any website and you'll see the PZ Demo Tool interface in the top-right corner. Click "Start Selection Mode" to begin editing the page.
How to Use PZ Demo Tool
Getting Started
PZ Demo Tool allows you to modify any webpage on-the-fly for demonstration purposes. Create dynamic presentations, mockups, and custom demos without coding knowledge.
1 Activate the Tool
After installation, navigate to any website and click the PZ Demo Tool icon in your Chrome toolbar. The tool interface will appear in the top-right corner of the page.
2 Select Elements
Click "Start Selection Mode" and hover over any element on the page. The element will be highlighted. Click on it to select for editing.
3 Edit Image
Enter the image URL in the input field and click "Update Image" to apply the changes.
4 Text Colors
Click on the Text Color field, select a color, and click anywhere in the PZ Demo Tool to update the text color.
5 Background Colors
Click on the Background Color field, select a color, and click anywhere in the PZ Demo Tool to apply the background color.
6 Edit Text
Click on the text content in Edit Text, modify it, and click anywhere in the PZ Demo Tool to apply the changes.
7 Copy HTML/CSS
Click "Copy" to copy the HTML/CSS code.
8 Custom HTML
Change the Action Type to "Replace HTML", paste the copied code into the Custom HTML field, click "Apply HTML", and see the output for UI modules like scroll banners, inline banners, and more.
9 Copy JavaScript
Click "Copy" to copy the JavaScript code.
10 Console
Right-click, select "Inspect Element", go to the Console, paste the code, and press Enter to see the output for interactive modules like quizzes, spin-the-wheel, and more.
To apply this CSS rule directly in the browser console, follow these steps:
Using document.styleSheets in Console
Open Developer Tools (F12 or Ctrl + Shift + I in Chrome).
Go to the Console tab.
Paste the following code and press Enter:
const style = document.createElement('style'); style.innerHTML = 'a::after { top: initial !important; }'; document.head.appendChild(style);
This will dynamically insert the CSS into the page.