Chrome Extention

100%

Chrome Extention

✓ Published0🌍 Public

Last edited Aug 7, 2023

Created on Aug 7, 2023

This example shows a simple Chrome extension for saving user-entered text leads into a list. The interface uses an input field and a “SAVE INPUT” button, with saved entries rendered as clickable links in an unordered list. The code uses plain JavaScript event listeners and DOM manipulation, including `getElementById` and `innerHTML`, to update the display dynamically. It relies on HTML, CSS, and JavaScript only, without external libraries, and does not persist data beyond the current session.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Local Storage Example

This example demonstrates how a browser persists user input across page reloads using the Web Storage API. It shows a text field and button; entering a name and submitting it saves the value, which is then restored into the input field upon refreshing the page. The JavaScript code uses `window.localStorage`, `storage.getItem`, and `storage.setItem` to manage the stored data, and it appends a new paragraph element to the document body after each submission.

Rralfz123

58% match

Loading thumbnail…

Local Storage Example

This example demonstrates how to persist and retrieve user input across page reloads using the Web Storage API. It shows a text input and button that save a name to `window.localStorage`, then restore that value when the page is reloaded. The code also illustrates storing and retrieving structured JSON data, including updating nested objects and converting them back to strings for storage. The interface is plain HTML and JavaScript, with no external visualization libraries.

LLaurens

57% match

Loading thumbnail…

use chrome to crawl

This example demonstrates automated web crawling and interaction using Chrome's remote interface. The code navigates through URLs from a seed list, captures page HTML and window environment variables, and programmatically clicks all elements with click event listeners. It manages JavaScript dialogs and navigation timeouts, while logging errors. It relies on Chrome's Remote Interface (CDP), along with Bluebird for promise handling, and custom detectors for JS library identification.

NN0taN3rd

56% match

Loading thumbnail…

Javascript

This example demonstrates a collection of JavaScript utilities for enhancing web page interactivity, focusing on user-input controls and navigation. It shows how keyboard and click events can be managed to prevent accidental data loss and to streamline table or list interactions. The code uses plain JavaScript with jQuery for DOM manipulation, including the `bind` method for event handling, `history.pushState` for URL updates without page reloads, and jQuery’s `prop` and `is` methods to toggle checkbox states. The snippets cover F5 key disabling, dynamic URL changes, and bulk selection of checkboxes, reflecting a typical admin-panel or form-heavy workflow.

IIliaIdakiev

56% match

Loading thumbnail…

Custom web extension

This example demonstrates a custom web extension that extracts numeric values from specific table cells and injects them into a new visualization table with highlighted yellow data areas. The code uses native DOM APIs such as `document.getElementsByClassName`, `createElement`, and `appendChild` to manipulate the HTML structure. It also parses an XML manifest describing the extension’s parameters using `DOMParser` or the ActiveX `XMLDOM` object, outputting the parameter caption and description via `document.write`. The visualization logic itself remains mostly unimplemented, with initialization and callback functions defined but not executed.

SSebastian Barrett

54% match

Loading thumbnail…

D3 Workshop: Part 1 - Basic HTML, d3, and Data Binding

This example demonstrates how to bind data to HTML elements using D3 v4. It features a sandbox with four paragraphs that, upon clicking a button, change their text and font size. The code then uses D3’s `selectAll`, `data`, and `enter` methods to append two new paragraphs from a simple array, with commented examples showing how to attach click handlers to modify text dynamically. The exercise section lists interactive checkboxes that can be toggled via D3’s property method.

CChrisChrisLoLo

52% match

Loading thumbnail…

Gist 239004

This visualization demonstrates a multi-select input interface where users can add and remove tags or text values using commas or spaces as separators. The code shows how the component dynamically renders resizable text boxes and styled "bit" elements within a list, with keyboard navigation and delete/backspace handling for managing selections. Built on the Prototype.js and Script.aculo.us libraries, it uses classes like `TextboxList` and `ResizableTextbox` to manage input focus, resize behavior, and form value updates based on the current set of selected items.

CCaged

52% match

Loading thumbnail…

Leveraging Web Data Class 5 Lab

This example shows an introductory HTML document that explains core web development concepts, including the roles of HTML, CSS, and JavaScript, and describes several HTML tags. It presents a static page with styled text in blue, a list of external learning resources, and a styled button labeled “Happy Friday!”. The page uses plain HTML tags, a CSS element selector in a `<style>` block to color all paragraph text, and an empty `<script>` tag, with no external visualization libraries or data sources.

AAnaMal08

51% match