Skip to content

Commit 239345f

Browse files
apartsinapartsin
committed
Add UI assets, docs migration, connectors, and sample comic runs
1 parent 562260a commit 239345f

139 files changed

Lines changed: 6850 additions & 620 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎content/content-script.js‎

Lines changed: 43 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1059,7 +1059,8 @@
10591059
summary: summary,
10601060
summaryMethod: summaryMethod,
10611061
chars: c.metrics && c.metrics.chars ? c.metrics.chars : 0,
1062-
score: Number.isFinite(c.score) ? Number(c.score.toFixed(2)) : 0
1062+
score: Number.isFinite(c.score) ? Number(c.score.toFixed(2)) : 0,
1063+
text: stripped
10631064
});
10641065
}
10651066
return options;
@@ -1134,6 +1135,12 @@
11341135
const candidates = pickContentCandidates();
11351136
const candidateOptions = await buildCandidateOptions(candidates);
11361137
const selectableCandidates = candidates.slice(0, candidateOptions.length);
1138+
const fullSourceText = cleanText(
1139+
selectableCandidates
1140+
.map((candidate) => stripBoilerplateLines(candidate && candidate.text ? candidate.text : ''))
1141+
.filter(Boolean)
1142+
.join('\n\n')
1143+
);
11371144
testLog('extract.candidates.built', {
11381145
candidateCount: candidates.length,
11391146
optionCount: candidateOptions.length
@@ -1210,7 +1217,22 @@
12101217
quality: quality,
12111218
selectedCandidateId: resolvedCandidateId,
12121219
autoSelectedCandidateId: autoSelectedCandidateId,
1213-
candidates: candidateOptions
1220+
fullSourceText: fullSourceText,
1221+
candidates: candidateOptions.map((option) => ({
1222+
id: option.id,
1223+
summary: option.summary,
1224+
summaryMethod: option.summaryMethod,
1225+
chars: option.chars,
1226+
score: option.score
1227+
})),
1228+
candidatePayloads: candidateOptions.map((option) => ({
1229+
id: option.id,
1230+
summary: option.summary,
1231+
chars: option.chars,
1232+
score: option.score,
1233+
text: String(option.text || '').slice(0, 12000)
1234+
})),
1235+
sourceHtml: buildPageHtmlSnapshot()
12141236
};
12151237
} catch (error) {
12161238
testLog('extract.error', { message: error && error.message ? error.message : String(error) });
@@ -1266,6 +1288,25 @@
12661288
.trim();
12671289
}
12681290

1291+
function buildPageHtmlSnapshot(maxLength = 180000) {
1292+
try {
1293+
const root = document.documentElement;
1294+
if (!root) return '';
1295+
const clone = root.cloneNode(true);
1296+
if (clone && clone.querySelectorAll) {
1297+
clone.querySelectorAll('script, style, noscript, iframe, svg, canvas').forEach((node) => {
1298+
try { node.remove(); } catch (_) {}
1299+
});
1300+
}
1301+
let html = '<!doctype html>\n' + String(clone && clone.outerHTML ? clone.outerHTML : '');
1302+
html = html.replace(/\s{2,}/g, ' ').trim();
1303+
if (html.length > maxLength) return html.slice(0, maxLength);
1304+
return html;
1305+
} catch (_) {
1306+
return '';
1307+
}
1308+
}
1309+
12691310
// Truncate text if too long
12701311
function truncateText(text, maxLength = 15000) {
12711312
if (text.length <= maxLength) {

INSTALL.md renamed to docs/INSTALL.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,7 @@ Web2Comics-v1.0.2/
184184
├── icons/ # Extension icons
185185
├── docs/
186186
│ └── user-manual.html # User manual / help file
187-
└── INSTALL.md # This file
187+
└── docs/INSTALL.md # This file
188188
```
189189

190190
---

RELEASE_NOTES.md renamed to docs/RELEASE_NOTES.md

File renamed without changes.

UserExperienceReview.md renamed to docs/UserExperienceReview.md

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,3 +61,32 @@ Scope: popup, sidepanel, options (connections), first-run path
6161
- UI is less likely to override explicit user behavior.
6262
- Connections tab has cleaner, state-driven controls.
6363
- Regression coverage reflects the new UX model.
64+
65+
## Pass 3: Follow-up UX Hardening (Applied)
66+
67+
### 1) Sidepanel action clarity
68+
- Renamed compact panel controls from short cryptic labels to clear labels:
69+
- `Img` -> `Image`
70+
- `Cap` -> `Caption`
71+
- `Fact` -> `Factual`
72+
73+
### 2) Grounding signal de-noised
74+
- Kept grounding evidence available but reduced visual dominance:
75+
- subtle shell styling
76+
- compact traffic-light indicator (green/yellow/red)
77+
- small count badge
78+
- Improved fact relevance by filtering entity chips against panel caption/snippet context before display.
79+
80+
### 3) Per-panel action menu reliability
81+
- Improved "More" action popover affordance and z-index layering.
82+
- Added auto-close behavior when selecting a menu action to prevent stuck/hidden popovers.
83+
84+
### 4) Readability and control polish
85+
- Increased caption readability contrast and spacing.
86+
- Improved pill/button contrast, hit-area, and hover state clarity.
87+
- Refined viewer stat chip legibility.
88+
89+
### 5) Test alignment and stability
90+
- Updated integration tests for renamed panel actions and grounding behavior.
91+
- Hardened objective flow test timing for popup generation readiness.
92+
- Updated Playwright extension UI checks to match current layout-preset based sidepanel flow and composer section behavior.

brainstorm.md renamed to docs/brainstorm.md

File renamed without changes.

‎docs/google-drive-oauth-setup.md‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
# Google Drive OAuth Setup (Web2Comics Extension)
2+
3+
This guide configures Google OAuth so `Connect Google Drive` works in the extension and auto-sync uploads comics to the `MyComics` folder.
4+
5+
## 1. Create/Configure Google Cloud Project
6+
7+
1. Open Google Cloud Console.
8+
2. Create a project (or select an existing one).
9+
3. Enable API:
10+
- `Google Drive API`
11+
12+
## 2. Configure OAuth Consent Screen
13+
14+
1. Go to `APIs & Services` -> `OAuth consent screen`.
15+
2. Choose user type (`External` for most extension use).
16+
3. Fill required app fields (name, support email, developer contact).
17+
4. Add scope:
18+
- `https://www.googleapis.com/auth/drive.file`
19+
5. If app is in Testing mode, add your tester Google accounts.
20+
21+
## 3. Create OAuth Client Credentials
22+
23+
Use an OAuth client that supports redirect URIs (typically `Web application` for this flow).
24+
25+
1. Go to `APIs & Services` -> `Credentials`.
26+
2. Create `OAuth client ID`.
27+
3. Add authorized redirect URI(s):
28+
- `https://<YOUR_EXTENSION_ID>.chromiumapp.org/google-oauth2`
29+
- Optional fallback also supported by code:
30+
- `https://<YOUR_EXTENSION_ID>.chromiumapp.org/`
31+
32+
Notes:
33+
- Replace `<YOUR_EXTENSION_ID>` with your real Chrome extension ID.
34+
- The code uses `chrome.identity.getRedirectURL('google-oauth2')` first, then `chrome.identity.getRedirectURL()`.
35+
36+
## 4. Put Client ID Into Extension Config
37+
38+
The extension resolves Google Drive OAuth client ID in this order:
39+
40+
1. `chrome.storage.local.oauthClientConfig.googleDriveClientId`
41+
2. `shared/oauth-client-config.local.json` (`googleDriveClientId`)
42+
3. `manifest.oauth2.client_id`
43+
44+
Recommended for local/dev:
45+
46+
Create `shared/oauth-client-config.local.json`:
47+
48+
```json
49+
{
50+
"googleDriveClientId": "YOUR_CLIENT_ID.apps.googleusercontent.com"
51+
}
52+
```
53+
54+
## 5. Required Extension Permissions
55+
56+
Manifest must include:
57+
58+
- `permissions`: `identity`, `storage`
59+
- `host_permissions`: `https://www.googleapis.com/*`
60+
61+
These are already present in the current extension.
62+
63+
## 6. Runtime Flow (What You Should See)
64+
65+
1. Open extension Options -> `Connections`.
66+
2. Click `Connect` in Google Drive card.
67+
3. Google sign-in/consent popup appears.
68+
4. After approval, status becomes `Connected`.
69+
5. `Enable authorization` checkbox becomes available.
70+
6. Generate a comic; autosave uploads HTML to Drive folder `MyComics`.
71+
72+
## 7. Token Behavior
73+
74+
The extension uses OAuth 2.0 Authorization Code + PKCE:
75+
76+
- Receives authorization code from Google.
77+
- Exchanges code for access token (and refresh token when provided).
78+
- Refreshes expired access tokens in background before Drive upload.
79+
80+
## 8. Validation Checklist
81+
82+
1. `Connect` opens Google consent UI.
83+
2. No `OAuth app not configured` status after client ID is set.
84+
3. `googleDriveAuth` is stored in `chrome.storage.local` with:
85+
- `accessToken`
86+
- `expiresAt`
87+
- `clientId`
88+
- optionally `refreshToken`
89+
4. Upload creates/uses Drive folder `MyComics`.
90+
5. Uploaded file type is HTML and opens in Drive preview.
91+
92+
## 9. Common Failure Causes
93+
94+
1. Redirect URI mismatch:
95+
- Authorized URI in Google Cloud does not exactly match `chromiumapp.org` URL used by extension.
96+
2. Wrong OAuth client type or wrong client ID.
97+
3. Consent screen still unapproved and test user not whitelisted.
98+
4. Drive API not enabled in project.
99+
5. Browser/profile uses different extension ID than the one configured in redirect URI.
100+
101+
## 10. Debug Tips
102+
103+
1. Export debug logs from popup/sidepanel/options.
104+
2. Look for service-worker events:
105+
- `drive.connect.success`
106+
- `drive.connect.attempt_failed`
107+
- `drive.token.refresh.success`
108+
- `drive.upload.success`
109+
- `drive.upload.error`
110+

‎docs/instuctions.md‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
# General Development Instructions
2+
3+
## Product Goals
4+
- Prioritize fast first value: default flow should be two clicks (`Create Comic` -> `Generate`).
5+
- Keep UX streamlined and clear by default, with advanced controls available but non-intrusive.
6+
- Make generated comics tightly grounded in the selected story/content block.
7+
- Optimize for adoption: reliability, clarity, and share-ready output.
8+
9+
## UX / UI Standards
10+
- Keep one primary CTA per step; avoid competing actions.
11+
- Use short, action-oriented microcopy (avoid technical/system wording in primary flow).
12+
- Ensure all panel controls are visible without horizontal scrolling.
13+
- Use compact graphical controls where possible instead of large text buttons.
14+
- Keep quality indicators subtle (traffic-light style for confidence/grounding).
15+
- Use collapsible sections for advanced options and metadata.
16+
- After generation, minimize creation UI noise and focus on viewer + sidebar flow.
17+
- Keep history, favorites, filters, and sorting accessible without cluttering the default path.
18+
19+
## Content Extraction & Story Selection
20+
- Support robust generic extraction for all sites; not only news/wiki templates.
21+
- Add/maintain site adapters for high-traffic domains and social sources.
22+
- Always attempt auto-pick of best story block with confidence score.
23+
- If confidence is low, suggest narrower alternatives and allow manual selection.
24+
- Use clear extracted-content preview and selected-story summary before generation.
25+
- Ensure Wikipedia/news extraction reliability remains high with fallback strategies.
26+
27+
## Prompting & Content Quality
28+
- Maintain strong prompt grounding to source facts, entities, dates, and numbers.
29+
- Support objective-based prompting (summarize, learn, fun, etc.) with tuned defaults.
30+
- Keep panel/caption regeneration faithful to the current story beat intent.
31+
- Improve factuality controls (`more factual`, `simpler`) and verify behavior with tests.
32+
33+
## Sharing, Export, and Attribution
34+
- Keep share UX simple (single button -> target menu).
35+
- Support practical share targets and presets (X, LinkedIn, Story, Email, etc.).
36+
- Ensure downloaded/exported comics preserve selected layout templates.
37+
- Include attribution line in shared/downloaded assets (e.g., made with Web2Comics).
38+
39+
## Connections & OAuth
40+
- Keep connectors in dedicated Options tab.
41+
- Use standard OAuth UX only (no manual token/id entry in normal user flow).
42+
- Show connection status clearly; enable dependent toggles only when connected.
43+
- Ensure popup windows/auth flows are resilient and detectable.
44+
45+
## Reliability & Testing
46+
- Add tests for every bugfix and every key UX flow regression.
47+
- Cover end-to-end user paths:
48+
- open page
49+
- invoke extension
50+
- select objective/story
51+
- generate
52+
- view/edit/share
53+
- Include provider-path assertions (Gemini/OpenAI/OpenRouter/HF/Cloudflare where applicable).
54+
- Keep top-site coverage tests for multiple languages/regions.
55+
- Add verbose debug logs in test mode only.
56+
- Run full test suite before release and fix failing paths.
57+
58+
## Documentation Discipline
59+
- Keep docs synchronized with actual behavior (README, manual HTML, release notes).
60+
- Update backlog and strategy docs when new feature directions are added.
61+
- Record UX reviews and findings in dedicated markdown files.
62+
63+
## Engineering Workflow
64+
- Prefer minimal-risk, incremental changes with clear regression checks.
65+
- Keep defaults fast (3 panels, fast model/image settings) unless explicitly changed.
66+
- Preserve existing IDs/hooks to avoid breaking tests and extension wiring.
67+
- When adding new features, include:
68+
- UI update
69+
- logic update
70+
- tests
71+
- docs update

‎icons/icon-master-gemini.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
22
"model": "gemini-2.0-flash-exp-image-generation",
3-
"prompt": "Design a premium Chrome extension app icon for \"Web to Comic\". Concept: transform a web page into a comic strip. Show a stylized browser page rectangle morphing into 3 comic panels with bold outlines and dynamic motion lines. Modern comic aesthetic, crisp vector-like edges, bright cyan/orange/yellow palette, dark navy accents. Centered composition, highly legible at small sizes, minimal clutter, no tiny text, no watermark. Square icon artwork, strong contrast, polished app-icon look.",
4-
"responseText": "I will generate a premium Chrome extension app icon for \"Web to Comic\". The icon will depict a stylized browser window transforming into three distinct comic panels. These panels will feature bold outlines and dynamic motion lines to convey a sense of transformation. The overall aesthetic will be modern comic style with crisp, vector-like edges. The color palette will consist of bright cyan, orange, and yellow, accented by dark navy. The composition will be centered and designed for high legibility even at small sizes, with minimal clutter and no text or watermarks. The final artwork will be a square icon with strong contrast and a polished app-icon appearance.\n"
3+
"prompt": "Create a premium Chrome extension app icon for \"Web2Comics\". Primary symbol: a bold electric thunderbolt merged with a subtle AI circuit motif. Style: modern, minimal, vector-like, crisp geometric edges. Composition: centered, one dominant symbol, high contrast, no tiny details, no text. Palette: deep navy background, neon cyan + electric yellow highlights, small white accents. Mood: energetic, intelligent, creative. Output must be clean and legible at 16x16 toolbar size. Square app icon, no watermark, no border, no mockup.",
4+
"responseText": "I will generate a square app icon for a Chrome extension called \"Web2Comics\". The icon will feature a central, prominent symbol: a sharp, neon cyan and electric yellow thunderbolt seamlessly integrated with a subtle white AI circuit pattern on a deep navy background. The style will be modern, minimal, and vector-like with crisp geometric edges. The composition will be high contrast with no small details or text, ensuring legibility even at a small size. The overall mood will be energetic, intelligent, and creative."
55
}

‎icons/icon-master-gemini.png‎

63 KB
Loading

‎icons/icon128.png‎

-8.58 KB
Loading

0 commit comments

Comments
 (0)