Skip to content

Commit 866b326

Browse files
committed
Update extension panel texts, add privacy policy
1 parent 0a910fd commit 866b326

File tree

5 files changed

+279
-16
lines changed

5 files changed

+279
-16
lines changed

chrome-extension/README.md

Lines changed: 72 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,76 @@ To make changes:
8181
3. Click the refresh icon on the Django DevBar extension
8282
4. Reload DevTools
8383

84-
## Publishing (Future)
84+
## Chrome Web Store Publishing
85+
86+
### Prerequisites
87+
88+
- [x] Privacy policy created and hosted (privacy.html via GitHub Pages)
89+
- [x] Manifest V3 compliant
90+
- [x] Version 1.0.0
91+
- [ ] Screenshots captured (3-5 required)
92+
- [ ] Promotional tile created (440x280 PNG)
93+
94+
### Manual Steps Required
95+
96+
1. **Capture Screenshots** (1280x800 or 640x400):
97+
- DevTools panel with metrics for a page with queries
98+
- Duplicate queries section expanded
99+
- Request history view
100+
- Dark mode variant (optional)
101+
102+
2. **Create Promotional Tile** (440x280 PNG):
103+
- Show extension name: "Django DevBar"
104+
- Include visual of DevTools panel or metrics
105+
- Professional, clean design
106+
107+
3. **Host Privacy Policy**:
108+
- Enable GitHub Pages for this repository
109+
- Set privacy policy URL in Chrome Web Store listing to: `https://[your-username].github.io/django-devbar/chrome-extension/privacy.html`
110+
111+
4. **Submit to Chrome Web Store**:
112+
- Create a [Chrome Web Store Developer account](https://chrome.google.com/webstore/devconsole) ($5 one-time fee)
113+
- Zip the chrome-extension folder (excluding README.md)
114+
- Upload to Chrome Web Store Developer Dashboard
115+
- Fill in listing details:
116+
- **Category**: Developer Tools
117+
- **Description**: Expanded description from manifest.json
118+
- **Screenshots**: Upload 3-5 screenshots
119+
- **Promotional Images**: Upload 440x280 tile
120+
- **Privacy Policy URL**: GitHub Pages URL
121+
- **Support URL**: https://github.com/amureki/django-devbar/issues
122+
- Submit for review (typically 1-3 days)
123+
124+
### Store Listing Text
125+
126+
**Short description** (132 chars max):
127+
```
128+
View Django DevBar metrics in Chrome DevTools: database queries, response times, and duplicate query detection.
129+
```
130+
131+
**Detailed description**:
132+
```
133+
Django DevBar - Chrome DevTools Panel
134+
135+
View Django DevBar performance metrics directly in Chrome DevTools. Track database queries, response times, and duplicate query detection for your Django applications during development.
85136
86-
Once stable, this extension will be published to the Chrome Web Store for easy installation.
137+
Features:
138+
• Real-time performance metrics in DevTools panel
139+
• Database query count and execution time tracking
140+
• Duplicate query detection with SQL details
141+
• Request history (up to 50 requests)
142+
• Dark mode support
143+
• Toggle on-page bar visibility
144+
145+
Works with Django DevBar middleware on localhost and local development domains.
146+
147+
SETUP:
148+
1. Install Django DevBar middleware in your Django project
149+
2. Set DEVBAR_SHOW_HEADERS = True in Django settings
150+
3. Open Chrome DevTools and navigate to the "Django DevBar" tab
151+
4. Visit your Django application on localhost
152+
153+
This extension only works with local development environments (localhost, 127.0.0.1, *.local, *.test domains) for security and privacy.
154+
155+
Source code: https://github.com/amureki/django-devbar
156+
```

chrome-extension/manifest.json

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
22
"manifest_version": 3,
33
"name": "Django DevBar",
4-
"version": "0.1.0",
5-
"description": "Chrome DevTools panel for Django DevBar performance metrics",
4+
"version": "1.0.0",
5+
"description": "View Django DevBar performance metrics in Chrome DevTools. Track database queries, response times, and duplicate query detection for Django applications during development.",
66
"devtools_page": "devtools.html",
77
"icons": {
88
"16": "icons/icon16.png",
@@ -22,5 +22,9 @@
2222
"js": ["content.js"],
2323
"run_at": "document_start"
2424
}
25-
]
25+
],
26+
"content_security_policy": {
27+
"extension_pages": "script-src 'self'; object-src 'self'"
28+
},
29+
"homepage_url": "https://github.com/amureki/django-devbar"
2630
}

chrome-extension/panel.html

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -40,15 +40,18 @@
4040
.hist-url { color: #1a73e8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
4141
.hist-stats { display: flex; gap: 12px; color: #666; font-size: 10px; flex-shrink: 0; }
4242

43-
.controls { display: flex; align-items: center; justify-content: flex-end; padding: 4px 8px; margin-bottom: 4px; }
43+
.controls { display: flex; align-items: center; justify-content: flex-end; padding: 4px 8px; margin-bottom: 4px; gap: 12px; }
4444
.controls label { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #666; cursor: pointer; user-select: none; }
4545
.controls input[type="checkbox"] { cursor: pointer; }
46+
.repo-link { font-size: 10px; color: #1a73e8; text-decoration: none; }
47+
.repo-link:hover { text-decoration: underline; }
4648

4749
@media (prefers-color-scheme: dark) {
4850
body { background: #1e1e1e; color: #e0e0e0; }
4951
.empty-state { color: #999; }
5052
.empty-state p { color: #666; }
51-
.code { background: #333; }
53+
.empty-state a { color: #6db3f2; }
54+
.code { background: #333; color: #e0e0e0; }
5255
.current, .hist-row { background: #2d2d2d; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
5356
.request-url, .hist-url { color: #6db3f2; }
5457
.request-method { background: #1a3a5c; color: #6db3f2; }
@@ -61,23 +64,18 @@
6164
.type-xhr { background: #374151; color: #9ca3af; }
6265
.history-title { color: #888; background: #1e1e1e; }
6366
.controls label { color: #999; }
67+
.repo-link { color: #6db3f2; }
6468
}
6569
</style>
6670
</head>
6771
<body>
6872
<div class="controls">
6973
<label>
7074
<input type="checkbox" id="show-bar-toggle" checked>
71-
Show on-page bar
75+
Show <a href="https://github.com/amureki/django-devbar" target="_blank" class="repo-link">django-devbar</a> on page
7276
</label>
7377
</div>
74-
<div id="app">
75-
<div class="empty-state">
76-
<h2>Django DevBar</h2>
77-
<p>Navigate to a page with Django DevBar enabled.</p>
78-
<p style="margin-top: 6px;"><span class="code">DEVBAR_EXTENSION_MODE = True</span></p>
79-
</div>
80-
</div>
78+
<div id="app"></div>
8179
<script src="panel.js"></script>
8280
</body>
8381
</html>

chrome-extension/panel.js

Lines changed: 46 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -147,9 +147,52 @@
147147
return { class: 'type-xhr', label: 'XHR' };
148148
}
149149

150+
function renderEmptyState() {
151+
const app = document.getElementById('app');
152+
const isLocalDomain = pageUrl && (
153+
pageUrl.includes('localhost') ||
154+
pageUrl.includes('127.0.0.1') ||
155+
pageUrl.includes('.local') ||
156+
pageUrl.includes('.test')
157+
);
158+
159+
let html = `
160+
<div class="empty-state">
161+
<h2>Django DevBar</h2>`;
162+
163+
if (!isLocalDomain && pageUrl) {
164+
html += `
165+
<p style="margin-top: 12px;">⚠️ Not on a local development domain</p>
166+
<p style="margin-top: 6px;">This extension only works on localhost and local development domains.</p>
167+
<p style="margin-top: 12px; font-size: 10px;">
168+
<a href="https://github.com/amureki/django-devbar" target="_blank" style="color: #1a73e8;">django-devbar</a>
169+
</p>`;
170+
} else {
171+
html += `
172+
<p style="margin-top: 12px;">No requests captured yet.</p>
173+
<p style="margin-top: 6px;">Navigate to a page with Django DevBar enabled.</p>
174+
<div style="margin-top: 16px; font-size: 11px; color: #888; line-height: 1.6;">
175+
<strong>Troubleshooting:</strong><br>
176+
• Make sure Django DevBar middleware is installed<br>
177+
• Set <span class="code">DEVBAR_SHOW_HEADERS = True</span> in settings<br>
178+
• Reload the page after enabling headers<br>
179+
• Check that you're on a localhost or .local/.test domain
180+
</div>
181+
<p style="margin-top: 12px; font-size: 10px;">
182+
<a href="https://github.com/amureki/django-devbar" target="_blank" style="color: #1a73e8;">django-devbar</a>
183+
</p>`;
184+
}
185+
186+
html += `</div>`;
187+
app.innerHTML = html;
188+
}
189+
150190
function renderUI() {
151191
const app = document.getElementById('app');
152-
if (!currentRequest) return;
192+
if (!currentRequest) {
193+
renderEmptyState();
194+
return;
195+
}
153196

154197
const { data, method, url } = currentRequest;
155198
const type = getRequestType(currentRequest);
@@ -229,4 +272,6 @@
229272
});
230273

231274
chrome.devtools.network.onRequestFinished.addListener(processRequest);
275+
276+
renderEmptyState();
232277
})();

chrome-extension/privacy.html

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Django DevBar - Privacy Policy</title>
7+
<style>
8+
body {
9+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
10+
line-height: 1.6;
11+
max-width: 800px;
12+
margin: 0 auto;
13+
padding: 40px 20px;
14+
color: #333;
15+
}
16+
h1 {
17+
color: #2c3e50;
18+
border-bottom: 2px solid #3498db;
19+
padding-bottom: 10px;
20+
}
21+
h2 {
22+
color: #34495e;
23+
margin-top: 30px;
24+
}
25+
ul {
26+
padding-left: 20px;
27+
}
28+
li {
29+
margin: 10px 0;
30+
}
31+
.last-updated {
32+
color: #7f8c8d;
33+
font-size: 0.9em;
34+
font-style: italic;
35+
}
36+
code {
37+
background: #f4f4f4;
38+
padding: 2px 6px;
39+
border-radius: 3px;
40+
font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
41+
}
42+
</style>
43+
</head>
44+
<body>
45+
<h1>Django DevBar - Privacy Policy</h1>
46+
47+
<p class="last-updated">Last Updated: December 27, 2025</p>
48+
49+
<h2>Overview</h2>
50+
<p>
51+
Django DevBar is a developer tool Chrome extension designed to display performance metrics
52+
for Django web applications during local development. We are committed to protecting your privacy
53+
and being transparent about our data practices.
54+
</p>
55+
56+
<h2>Data Collection</h2>
57+
<p>
58+
<strong>We do not collect, transmit, or store any personal data.</strong> The extension operates
59+
entirely locally on your device and does not send any information to external servers.
60+
</p>
61+
62+
<h2>Data Processed Locally</h2>
63+
<p>The extension processes the following data locally in your browser:</p>
64+
<ul>
65+
<li>
66+
<strong>HTTP Response Headers:</strong> The extension reads <code>DevBar-Data</code> headers
67+
from HTTP responses to display performance metrics (query count, execution time, etc.).
68+
This data is only read from localhost and local development domains.
69+
</li>
70+
<li>
71+
<strong>UI Preferences:</strong> Your preference for showing/hiding the on-page DevBar is
72+
stored locally using Chrome's storage API. This setting never leaves your device.
73+
</li>
74+
<li>
75+
<strong>Request History:</strong> The extension maintains a history of up to 50 recent
76+
requests with their metrics in memory. This data is cleared when you close DevTools and
77+
is never stored persistently.
78+
</li>
79+
</ul>
80+
81+
<h2>Permissions Explained</h2>
82+
<p>The extension requests the following Chrome permissions:</p>
83+
<ul>
84+
<li>
85+
<strong>storage:</strong> Used solely to save your checkbox preference for showing/hiding
86+
the on-page DevBar. No other data is stored.
87+
</li>
88+
<li>
89+
<strong>Content Scripts on Development Domains:</strong> The extension only runs on localhost
90+
and local development domains (<code>localhost</code>, <code>127.0.0.1</code>, <code>*.local</code>,
91+
<code>*.test</code>) to control DevBar visibility. It does not run on any production websites.
92+
</li>
93+
</ul>
94+
95+
<h2>Third-Party Services</h2>
96+
<p>
97+
This extension does not use any third-party analytics, tracking, or advertising services.
98+
There are no third-party libraries that transmit data externally.
99+
</p>
100+
101+
<h2>Data Sharing</h2>
102+
<p>
103+
We do not share any data with third parties because we do not collect any data in the first place.
104+
All processing happens locally in your browser.
105+
</p>
106+
107+
<h2>Data Security</h2>
108+
<p>
109+
Since the extension only works with local development environments and stores minimal data
110+
(a single UI preference), security risks are minimal. We follow Chrome extension best practices:
111+
</p>
112+
<ul>
113+
<li>Manifest V3 compliance for enhanced security</li>
114+
<li>Minimal permission requests</li>
115+
<li>No remote code execution</li>
116+
<li>HTML escaping to prevent XSS attacks</li>
117+
<li>Content Security Policy enforcement</li>
118+
</ul>
119+
120+
<h2>Children's Privacy</h2>
121+
<p>
122+
This extension is a developer tool not directed at children under 13. We do not knowingly
123+
collect any information from children.
124+
</p>
125+
126+
<h2>Changes to This Policy</h2>
127+
<p>
128+
We may update this privacy policy from time to time. Any changes will be reflected in the
129+
"Last Updated" date at the top of this document. Continued use of the extension after changes
130+
constitutes acceptance of the updated policy.
131+
</p>
132+
133+
<h2>Contact</h2>
134+
<p>
135+
If you have questions about this privacy policy or the extension, please open an issue on our
136+
<a href="https://github.com/amureki/django-devbar">GitHub repository</a>.
137+
</p>
138+
139+
<h2>Open Source</h2>
140+
<p>
141+
This extension is open source. You can review the complete source code at
142+
<a href="https://github.com/amureki/django-devbar">https://github.com/amureki/django-devbar</a>
143+
to verify our privacy claims.
144+
</p>
145+
</body>
146+
</html>

0 commit comments

Comments
 (0)