Compare commits
2 Commits
531021ff6d
...
c934abbfc5
| Author | SHA1 | Date | |
|---|---|---|---|
| c934abbfc5 | |||
|
e0fe7b8c09 |
415
contextwizard_install.html
Normal file
415
contextwizard_install.html
Normal file
@@ -0,0 +1,415 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-US" class="light-style">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<title>Install ContextWizard - amiPro, LLC</title>
|
||||
|
||||
<meta
|
||||
name="description"
|
||||
content="Step-by-step instructions to install the ContextWizard browser extension in Chrome, Edge, and other Chromium-based browsers."
|
||||
/>
|
||||
|
||||
<link rel="icon" type="image/x-icon" href="files/favicon.ico" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<link rel="stylesheet" href="files/boxicons.css?v=20230405" />
|
||||
<link rel="stylesheet" href="files/core.css" class="template-customizer-core-css" />
|
||||
<link rel="stylesheet" href="files/theme-default.css" class="template-customizer-theme-css" />
|
||||
<link rel="stylesheet" href="files/demo.css" />
|
||||
<link rel="stylesheet" href="files/modern.css" />
|
||||
<link rel="stylesheet" href="files/perfect-scrollbar.css" />
|
||||
|
||||
<script src="files/helpers.js"></script>
|
||||
<script src="files/config.js"></script>
|
||||
<script src="files/jquery.js"></script>
|
||||
<script src="files/popper.js"></script>
|
||||
<script src="files/bootstrap.js"></script>
|
||||
<script src="files/perfect-scrollbar.js"></script>
|
||||
<script src="files/menu.js"></script>
|
||||
<script src="files/main.js"></script>
|
||||
<script src="files/ua-parser.js"></script>
|
||||
<script src="files/amipro_utils.js?v=20230401402"></script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
color: #0f172a;
|
||||
background: linear-gradient(180deg, #f8fbff 0%, #ffffff 40%, #f5f7fb 100%);
|
||||
}
|
||||
|
||||
.hero__title {
|
||||
font-size: clamp(2rem, 3.25vw, 3rem);
|
||||
}
|
||||
|
||||
.hero__lead {
|
||||
max-width: 620px;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.nav-brand-logo {
|
||||
height: 48px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.step-card {
|
||||
border: none;
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
.step-number {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 999px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #eff6ff;
|
||||
color: #1d4ed8;
|
||||
font-weight: 600;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.browser-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 999px;
|
||||
background: #eff6ff;
|
||||
color: #1e293b;
|
||||
font-size: 0.875rem;
|
||||
margin-right: 0.5rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.browser-pill i {
|
||||
font-size: 1rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.hero-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.35rem 0.9rem;
|
||||
border-radius: 999px;
|
||||
background: #eff6ff;
|
||||
color: #1e293b;
|
||||
font-size: 0.9rem;
|
||||
margin-right: 0.5rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.hero__actions {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.onload = function () {
|
||||
if (typeof initRevealAnimations === 'function') {
|
||||
initRevealAnimations();
|
||||
} else {
|
||||
// Fallback: ensure content is visible even if animations aren't loaded
|
||||
document.querySelectorAll('.reveal [data-animate]').forEach(function (el) {
|
||||
el.style.opacity = '1';
|
||||
el.style.transform = 'none';
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="layout-wrapper layout-content-navbar">
|
||||
<div class="layout-container">
|
||||
<div class="layout-page">
|
||||
<nav
|
||||
class="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
|
||||
id="layout-navbar"
|
||||
>
|
||||
<div class="navbar-nav-right d-flex align-items-center w-100" id="navbar-collapse">
|
||||
<div class="navbar-nav align-items-center">
|
||||
<div class="nav-item d-flex align-items-center">
|
||||
<img
|
||||
src="files/favicon.ico"
|
||||
alt="amiPro"
|
||||
width="64"
|
||||
height="64"
|
||||
class="nav-brand-logo"
|
||||
style="margin-right: 16px;"
|
||||
/>
|
||||
<div>
|
||||
<div style="font-weight: 700; font-size: 1.25rem; color: #0f172a;">amiPro, LLC</div>
|
||||
<small style="color: #64748b;">Privacy-first identity & AI products</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="contextwizard_top.html" class="btn btn-link ms-auto me-3">Back to ContextWizard</a>
|
||||
<a
|
||||
href="mailto:sales@amipro.me?subject=ContextWizard%20support"
|
||||
class="btn btn-outline-primary"
|
||||
>Contact support</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="content-wrapper">
|
||||
<div class="container-xxl" style="padding: 32px 24px 72px;">
|
||||
<section class="hero reveal">
|
||||
<div class="hero__text" data-animate>
|
||||
<span class="hero__eyebrow">ContextWizard</span>
|
||||
<h1 class="hero__title">Install ContextWizard in your browser</h1>
|
||||
<p class="hero__lead">
|
||||
Follow this guide to install the unpackaged ContextWizard extension in Chrome, Microsoft Edge,
|
||||
Brave, or any Chromium-based browser that supports developer mode extensions.
|
||||
</p>
|
||||
<div style="margin-top: 1.5rem;" class="hero__chips">
|
||||
<span class="hero-chip">Works offline on your machine</span>
|
||||
<span class="hero-chip">No account required</span>
|
||||
</div>
|
||||
<div
|
||||
class="hero__actions"
|
||||
style="margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem;"
|
||||
>
|
||||
<a
|
||||
href="https://amipro.me/contextwizard-files/ContextWizard-crx-latest.zip"
|
||||
class="btn btn-primary"
|
||||
style="flex: 1 0 220px;"
|
||||
>Download ContextWizard ZIP</a>
|
||||
<a
|
||||
href="contextwizard_privacy_policy.html"
|
||||
class="btn btn-outline-secondary"
|
||||
style="flex: 1 0 220px;"
|
||||
>Read privacy policy</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="reveal" data-animate style="margin-top: 48px;">
|
||||
<div class="row g-4 align-items-start">
|
||||
<div class="col-lg-7">
|
||||
<article class="card step-card">
|
||||
<div class="card-body">
|
||||
<h2 style="font-weight: 600; color: #0f172a; margin-bottom: 1rem;">
|
||||
Step-by-step installation
|
||||
</h2>
|
||||
|
||||
<ol class="list-unstyled" style="margin: 0; padding: 0;">
|
||||
<li style="margin-bottom: 1.5rem;">
|
||||
<div style="display: flex; align-items: flex-start;">
|
||||
<div class="step-number">1</div>
|
||||
<div>
|
||||
<h3 style="font-size: 1.05rem; margin-bottom: 0.35rem;">Download the ZIP file</h3>
|
||||
<p style="margin-bottom: 0.5rem; color: #475569;">
|
||||
Click <strong>Download ContextWizard ZIP</strong> above and save the file to a
|
||||
location you can find, such as your <em>Downloads</em> folder.
|
||||
</p>
|
||||
<p style="margin-bottom: 0; color: #64748b; font-size: 0.9rem;">
|
||||
The ZIP contains the full extension source so your browser can run it in
|
||||
developer mode.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li style="margin-bottom: 1.5rem;">
|
||||
<div style="display: flex; align-items: flex-start;">
|
||||
<div class="step-number">2</div>
|
||||
<div>
|
||||
<h3 style="font-size: 1.05rem; margin-bottom: 0.35rem;">Unzip the archive</h3>
|
||||
<p style="margin-bottom: 0.5rem; color: #475569;">
|
||||
Locate the downloaded ZIP file, then unzip it:
|
||||
</p>
|
||||
<ul style="padding-left: 1.1rem; margin-bottom: 0.5rem; color: #475569;">
|
||||
<li>On macOS: double-click the ZIP file in Finder.</li>
|
||||
<li>On Windows: right-click the ZIP and choose <em>Extract All…</em>.</li>
|
||||
</ul>
|
||||
<p style="margin-bottom: 0; color: #64748b; font-size: 0.9rem;">
|
||||
You should end up with a folder named something like
|
||||
<code>contextwizard-extension</code>. Keep this folder in a permanent location
|
||||
(not inside your browser cache or trash).
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li style="margin-bottom: 1.5rem;">
|
||||
<div style="display: flex; align-items: flex-start;">
|
||||
<div class="step-number">3</div>
|
||||
<div style="width: 100%;">
|
||||
<h3 style="font-size: 1.05rem; margin-bottom: 0.35rem;">Open the extensions page</h3>
|
||||
<p style="margin-bottom: 0.5rem; color: #475569;">
|
||||
In Chrome, open <code>chrome://extensions</code> in the address bar. In Edge, use
|
||||
<code>edge://extensions</code>. You will see the extensions management screen.
|
||||
</p>
|
||||
<div style="margin: 0.5rem 0 0.75rem;">
|
||||
<img
|
||||
src="files/01-ChromeExtension-nonDev.png"
|
||||
alt="Chrome extensions page highlighting chrome://extensions in the address bar"
|
||||
style="max-width: 100%; border-radius: 0.75rem; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);"
|
||||
/>
|
||||
</div>
|
||||
<p style="margin-bottom: 0; color: #64748b; font-size: 0.9rem;">
|
||||
This is where you manage, enable, and remove extensions in your browser.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li style="margin-bottom: 1.5rem;">
|
||||
<div style="display: flex; align-items: flex-start;">
|
||||
<div class="step-number">4</div>
|
||||
<div style="width: 100%;">
|
||||
<h3 style="font-size: 1.05rem; margin-bottom: 0.35rem;">Enable developer mode</h3>
|
||||
<p style="margin-bottom: 0.5rem; color: #475569;">
|
||||
Turn on <strong>Developer mode</strong> using the toggle in the top-right corner of
|
||||
the extensions page.
|
||||
</p>
|
||||
<div style="margin: 0.5rem 0 0.75rem;">
|
||||
<img
|
||||
src="files/02-ChromeExtension-enabledDev.png"
|
||||
alt="Chrome extensions page with Developer mode toggle turned on and Load unpacked button visible"
|
||||
style="max-width: 100%; border-radius: 0.75rem; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);"
|
||||
/>
|
||||
</div>
|
||||
<p style="margin-bottom: 0; color: #64748b; font-size: 0.9rem;">
|
||||
When Developer mode is on, you should see a <strong>Load unpacked</strong> button
|
||||
near the top of the page.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li style="margin-bottom: 1.5rem;">
|
||||
<div style="display: flex; align-items: flex-start;">
|
||||
<div class="step-number">5</div>
|
||||
<div style="width: 100%;">
|
||||
<h3 style="font-size: 1.05rem; margin-bottom: 0.35rem;">Load the unpacked extension</h3>
|
||||
<p style="margin-bottom: 0.5rem; color: #475569;">
|
||||
Click <strong>Load unpacked</strong> and choose the folder you unzipped in Step 2.
|
||||
</p>
|
||||
<div style="margin: 0.5rem 0 0.75rem;">
|
||||
<img
|
||||
src="files/03-ChromeExtension-select-unpackaged-folder.png"
|
||||
alt="Chrome extensions page with Load unpacked button highlighted and ContextWizard folder selected in Finder"
|
||||
style="max-width: 100%; border-radius: 0.75rem; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);"
|
||||
/>
|
||||
</div>
|
||||
<p style="margin-bottom: 0.25rem; color: #475569; font-size: 0.9rem;">
|
||||
In the file picker, select the <strong>folder</strong> (for example,
|
||||
<code>ContextWizard-crx-latest</code>), not the ZIP file.
|
||||
</p>
|
||||
<p style="margin-bottom: 0; color: #64748b; font-size: 0.9rem;">
|
||||
After loading, your browser will add ContextWizard to the list of installed
|
||||
extensions.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div style="display: flex; align-items: flex-start;">
|
||||
<div class="step-number">6</div>
|
||||
<div>
|
||||
<h3 style="font-size: 1.05rem; margin-bottom: 0.35rem;">Pin and open ContextWizard</h3>
|
||||
<p style="margin-bottom: 0.5rem; color: #475569;">
|
||||
Pin the extension so it is easy to reach, then open it in a new tab.
|
||||
</p>
|
||||
<div style="margin: 0.5rem 0 0.75rem;">
|
||||
<img
|
||||
src="files/04-ChromeExtension-installed.png"
|
||||
alt="Chrome extensions page showing ContextWizard installed in the All Extensions list"
|
||||
style="max-width: 100%; border-radius: 0.75rem; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);"
|
||||
/>
|
||||
</div>
|
||||
<ul style="padding-left: 1.1rem; margin-bottom: 0.5rem; color: #475569;">
|
||||
<li>Click the puzzle icon (Chrome/Edge), then pin <strong>ContextWizard</strong>.</li>
|
||||
<li>Click the ContextWizard icon or open the extension's page to start using it.</li>
|
||||
</ul>
|
||||
<p style="margin-bottom: 0; color: #64748b; font-size: 0.9rem;">
|
||||
Your conversations stay local on your machine. You can remove the unpacked
|
||||
extension at any time from the extensions page.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-5">
|
||||
<article
|
||||
class="card h-100"
|
||||
style="border-radius: 1.25rem; box-shadow: 0 16px 50px rgba(15, 23, 42, 0.08);"
|
||||
>
|
||||
<div class="card-body">
|
||||
<h3 style="font-size: 1.15rem; margin-bottom: 0.75rem;">Supported browsers</h3>
|
||||
<p style="color: #475569;">
|
||||
ContextWizard works in most Chromium-based desktop browsers that support loading
|
||||
unpacked extensions:
|
||||
</p>
|
||||
<div style="margin-bottom: 0.75rem;">
|
||||
<span class="browser-pill"><i class="bx bxl-chrome"></i>Chrome (latest)</span>
|
||||
<span class="browser-pill"><i class="bx bxl-microsoft"></i>Microsoft Edge</span>
|
||||
<span class="browser-pill"><i class="bx bxs-ship"></i>Brave / Vivaldi / Opera</span>
|
||||
</div>
|
||||
<p style="color: #64748b; font-size: 0.9rem;">
|
||||
Mobile browsers and Safari do not support this unpacked extension flow.
|
||||
</p>
|
||||
|
||||
<hr />
|
||||
|
||||
<h3 style="font-size: 1.05rem; margin-bottom: 0.5rem;">If something doesnt work</h3>
|
||||
<ul style="padding-left: 1.1rem; color: #475569;">
|
||||
<li>Make sure <strong>Developer mode</strong> is enabled on the extensions page.</li>
|
||||
<li>Confirm you selected the <strong>uncompressed folder</strong>, not the ZIP file.</li>
|
||||
<li>Try restarting the browser after loading the extension.</li>
|
||||
</ul>
|
||||
<p style="color: #64748b; font-size: 0.9rem; margin-bottom: 0.75rem;">
|
||||
If you are still stuck, reach out and well help you get set up.
|
||||
</p>
|
||||
<a href="mailto:support@amipro.me?subject=ContextWizard%20installation%20help" class="btn btn-sm btn-outline-primary">
|
||||
Email support
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<footer class="content-footer footer bg-footer-theme">
|
||||
<div class="container-xxl d-flex flex-wrap justify-content-between py-2 flex-md-row flex-column">
|
||||
<div class="mb-2 mb-md-0">
|
||||
©
|
||||
<script>
|
||||
document.write(new Date().getFullYear());
|
||||
</script>
|
||||
<a href="https://www.amipro.me" target="_blank" class="footer-link fw-bolder">amiPro, LLC</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="contextwizard_top.html" class="footer-link me-4">ContextWizard overview</a>
|
||||
<a href="contextwizard_privacy_policy.html" class="footer-link">Privacy policy</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<div class="content-backdrop fade"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-overlay layout-menu-toggle"></div>
|
||||
</div>
|
||||
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -236,7 +236,7 @@
|
||||
<section class="hero reveal">
|
||||
<div class="hero__text" data-animate>
|
||||
<span class="hero__badge"><i class="bx bx-bot"></i> ContextWizard</span>
|
||||
<h1 class="hero__title">Never lose an AI conversation again.</h1>
|
||||
<h1 class="hero__title">Unleash the power of every AI platform — all in one place.</h1>
|
||||
<p class="hero__lead">
|
||||
Harness each assistant's strengths, one-click backup or migrate every thread, and start immediately with zero configuration.
|
||||
</p>
|
||||
@@ -245,6 +245,14 @@
|
||||
<li><i class="bx bx-check-circle"></i>Automatic capture across your favorite AI chat platforms</li>
|
||||
<li><i class="bx bx-check-circle"></i>Search, filter, and relaunch chats instantly</li>
|
||||
</ul>
|
||||
<div style="margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem;">
|
||||
<a href="contextwizard_install.html" class="btn btn-primary" style="min-width: 200px;">
|
||||
<i class="bx bx-download me-1"></i>Install Manually
|
||||
</a>
|
||||
<a href="https://www.youtube.com/watch?v=RKBZ2g4WjbU" class="btn btn-outline-primary" style="min-width: 200px;" target="_blank">
|
||||
<i class="bx bx-play-circle me-1"></i>Watch Video
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero__media" data-animate>
|
||||
<div class="hero__orb"></div>
|
||||
@@ -340,19 +348,7 @@
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<section class="card mb-4 mt-5 reveal" data-animate>
|
||||
<div class="card-body">
|
||||
<h3 class="card-title" style="margin-bottom: 1rem;">How capturing works</h3>
|
||||
<p>
|
||||
ContextWizard watches the DOM of supported AI chat pages with lightweight MutationObservers, extracts each assistant/user message via platform-optimized selectors, and stores condensed transcripts in Chrome storage. Debouncing keeps your archive tidy, while the overlay indicator shows when a session is recording.
|
||||
</p>
|
||||
<ul class="checklist" style="margin-top: 1rem;">
|
||||
<li><i class="bx bx-check-circle"></i>Works with tabs you actively view—no background scraping.</li>
|
||||
<li><i class="bx bx-check-circle"></i>Landing pages (e.g., Gemini /app) are skipped until a unique conversation URL appears.</li>
|
||||
<li><i class="bx bx-check-circle"></i>All saved data lives in <code>chrome.storage.local</code> unless you export it.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<hr class="my-1" />
|
||||
|
||||
<section class="card mb-4 reveal" data-animate>
|
||||
<div class="row g-0 align-items-center">
|
||||
|
||||
BIN
files/01-ChromeExtension-nonDev.png
Normal file
BIN
files/01-ChromeExtension-nonDev.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 187 KiB |
BIN
files/02-ChromeExtension-enabledDev.png
Normal file
BIN
files/02-ChromeExtension-enabledDev.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 262 KiB |
BIN
files/03-ChromeExtension-select-unpackaged-folder.png
Normal file
BIN
files/03-ChromeExtension-select-unpackaged-folder.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
BIN
files/04-ChromeExtension-installed.png
Normal file
BIN
files/04-ChromeExtension-installed.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 303 KiB |
Reference in New Issue
Block a user