416 lines
16 KiB
HTML
416 lines
16 KiB
HTML
<!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-crx-latest</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>
|
||
|