Integrate Plugin Inline Under Reviewers Section
Integrate Plugin Inline Under Reviewers Section
Agent
OpenCode
Model
GPT-5.3 Codex
Shared
Feb 11, 2:23 PM
Messages468
Downloads15
Put this plugin inline under the reviewers and follow the same style and spacing as github [Image 1]
Also, remove mentions of "Open Source Explorer" just at the bottom of it say in light Powered by the Open Source Explorer but very subtle
REmove all the borders etc so it looks like a part of the github page
Inspecting project file structure
Inspecting UI injection script
Redesigning plugin for GitHub sidebar
Found 2 matches /Users/tarunsachdeva/code/market.dev/explorer-chrome-extension/bookmarklet.js: Line 423: summary.innerHTML = `No profile found on the Open Source Explorer. <a class="md-pr-link" href="https://explore.market.dev" target="_blank" rel="noopener noreferrer">Explore</a>`; /Users/tarunsachdeva/code/market.dev/explorer-chrome-extension/content.js: Line 466: summary.innerHTML = `No profile found on the Open Source Explorer. <a class="md-pr-link" href="https://explore.market.dev" target="_blank" rel="noopener noreferrer">Explore</a>`;
Evaluating bookmarklet sync
Assessing bookmarklet redundancy
Planning dual bookmarklet and plugin update
Investigating trailing invalid code
Inspecting uncommitted changes
git status --short(empty result)
Evaluating modification scope
Planning comprehensive content.js patch
Targeting patch line 466
Inspecting expert details render function
Applying patch to markup rendering
Reviewing panel mount and content cleanup
Found 1 matches /Users/tarunsachdeva/code/market.dev/explorer-chrome-extension/content.js: Line 346: <div class="md-pr-powered">Powered by the Open Source Explorer</div>
Checking style class usage
No files found
Planning syntax verification
node --check content.js(empty result)
Checking for obsolete CSS classes
No files found
Validating rewritten sections
Reviewing style alignment and mentions
git diff -- content.jsdiff --git a/content.js b/content.js
index 6c186a7..f2a3e03 100644
--- a/content.js
+++ b/content.js
@@ -65,116 +65,91 @@
style.id = STYLE_ID;
style.textContent = `
#${PANEL_ID} {
- position: fixed;
- right: 16px;
- bottom: 16px;
- z-index: 999999;
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
- color: #1f2328;
+ color: var(--fgColor-default, #24292f);
+ }
+ #${PANEL_ID}.discussion-sidebar-item {
+ margin-top: 0;
}
#${PANEL_ID} .md-pr-panel {
- width: 440px;
- background: #ffffff;
- border: 1px solid #d0d7de;
- border-radius: 12px;
- box-shadow: 0 1px 3px rgba(27, 31, 36, 0.12);
- padding: 12px 12px 10px;
- font-size: 14px;
+ font-size: 12px;
+ line-height: 1.5;
}
#${PANEL_ID} .md-pr-header {
display: flex;
- justify-content: flex-end;
+ justify-content: space-between;
align-items: center;
- gap: 8px;
- font-weight: 600;
- font-size: 13px;
+ margin-bottom: 6px;
+ }
+ #${PANEL_ID} .md-pr-heading {
+ margin: 0;
}
#${PANEL_ID} .md-pr-gear {
border: none;
- background: #f6f8fa;
- border-radius: 6px;
- width: 28px;
- height: 28px;
+ background: transparent;
+ color: var(--fgColor-muted, #57606a);
+ width: 20px;
+ height: 20px;
+ padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
- border: 1px solid #d0d7de;
- color: #57606a;
}
- #${PANEL_ID} .md-pr-body {
- margin-top: 10px;
+ #${PANEL_ID} .md-pr-gear:hover {
+ color: var(--fgColor-default, #24292f);
}
#${PANEL_ID} .md-pr-settings {
display: none;
- margin-top: 10px;
- border-top: 1px dashed #d0d7de;
- padding-top: 10px;
+ margin-top: 8px;
}
#${PANEL_ID} .md-pr-settings.md-pr-open {
display: block;
}
- #${PANEL_ID} label {
+ #${PANEL_ID} .md-pr-settings label {
display: block;
- margin-bottom: 6px;
- font-weight: 600;
+ margin-bottom: 4px;
font-size: 12px;
- color: #57606a;
+ color: var(--fgColor-muted, #57606a);
}
- #${PANEL_ID} input[type="text"],
- #${PANEL_ID} input[type="password"] {
+ #${PANEL_ID} .md-pr-settings input[type="password"] {
width: 100%;
- border: 1px solid #d0d7de;
+ border: 1px solid var(--borderColor-default, #d0d7de);
border-radius: 6px;
- padding: 6px 8px;
- font-size: 14px;
- background: #ffffff;
- margin-bottom: 8px;
+ padding: 5px 8px;
+ font-size: 12px;
+ color: var(--fgColor-default, #24292f);
+ background: var(--bgColor-default, #ffffff);
}
#${PANEL_ID} .md-pr-status {
- margin-top: 8px;
- color: #57606a;
+ color: var(--fgColor-muted, #57606a);
}
#${PANEL_ID} .md-pr-warning {
- color: #cf222e;
- font-weight: 600;
- }
- #${PANEL_ID} .md-pr-success {
- color: #1a7f37;
- font-weight: 600;
+ color: var(--fgColor-danger, #cf222e);
}
#${PANEL_ID} .md-pr-details {
- margin-top: 6px;
- color: #24292f;
+ color: var(--fgColor-muted, #57606a);
}
#${PANEL_ID} .md-pr-summary {
- margin-top: 6px;
- font-size: 18px;
- color: #24292f;
- font-weight: 600;
- }
- #${PANEL_ID} .md-pr-card {
- border: 1px solid #d0d7de;
- border-radius: 10px;
- padding: 12px;
+ margin-bottom: 8px;
+ color: var(--fgColor-default, #24292f);
}
#${PANEL_ID} .md-pr-card-header {
display: flex;
- gap: 12px;
- align-items: center;
+ gap: 8px;
+ align-items: flex-start;
}
#${PANEL_ID} .md-pr-avatar {
- width: 56px;
- height: 56px;
+ width: 32px;
+ height: 32px;
border-radius: 50%;
- background: #f6f8fa;
- border: 1px solid #d0d7de;
overflow: hidden;
+ background: var(--bgColor-muted, #f6f8fa);
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 600;
- color: #57606a;
+ color: var(--fgColor-muted, #57606a);
+ flex-shrink: 0;
}
#${PANEL_ID} .md-pr-avatar img {
width: 100%;
@@ -182,95 +157,78 @@
object-fit: cover;
}
#${PANEL_ID} .md-pr-name {
- font-size: 18px;
- font-weight: 700;
- color: #1a7f37;
+ font-size: 13px;
+ font-weight: 600;
+ color: var(--fgColor-default, #24292f);
}
#${PANEL_ID} .md-pr-meta {
- margin-top: 6px;
- color: #57606a;
- font-size: 14px;
+ color: var(--fgColor-muted, #57606a);
}
#${PANEL_ID} .md-pr-links {
- margin-top: 6px;
+ margin-top: 2px;
display: flex;
- gap: 12px;
- font-size: 14px;
+ gap: 8px;
}
#${PANEL_ID} .md-pr-link {
- color: #0969da;
- font-weight: 600;
+ color: var(--fgColor-accent, #0969da);
+ text-decoration: none;
}
- #${PANEL_ID} .md-pr-stats {
- margin-top: 12px;
- border: 1px solid #d0d7de;
- border-radius: 8px;
- overflow: hidden;
+ #${PANEL_ID} .md-pr-link:hover {
+ text-decoration: underline;
}
- #${PANEL_ID} .md-pr-stat-row {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 8px 10px;
- border-bottom: 1px solid #d0d7de;
- font-size: 14px;
+ #${PANEL_ID} .md-pr-stats {
+ margin-top: 8px;
}
- #${PANEL_ID} .md-pr-stat-row:last-child {
- border-bottom: none;
+ #${PANEL_ID} .md-pr-stat-item {
+ color: var(--fgColor-default, #24292f);
}
#${PANEL_ID} .md-pr-stat-label {
- color: #57606a;
- text-transform: uppercase;
- letter-spacing: 0.04em;
- font-weight: 600;
- font-size: 11px;
+ color: var(--fgColor-muted, #57606a);
}
- #${PANEL_ID} .md-pr-stat-value {
- font-weight: 700;
- color: #24292f;
+ #${PANEL_ID} .md-pr-stat-sep {
+ margin: 0 4px;
+ color: var(--fgColor-muted, #57606a);
}
#${PANEL_ID} .md-pr-section {
- margin-top: 12px;
+ margin-top: 8px;
}
#${PANEL_ID} .md-pr-section-title {
- font-size: 13px;
+ margin-bottom: 2px;
font-weight: 600;
- color: #57606a;
- text-transform: uppercase;
- letter-spacing: 0.04em;
- margin-bottom: 6px;
+ color: var(--fgColor-muted, #57606a);
}
#${PANEL_ID} .md-pr-ecosystems {
display: flex;
flex-wrap: wrap;
- gap: 6px;
+ gap: 8px;
}
#${PANEL_ID} .md-pr-ecosystem-pill {
- display: inline-flex;
- align-items: center;
- background: #f6f8fa;
- border: 1px solid #d0d7de;
- border-radius: 999px;
- padding: 2px 8px;
- font-size: 13px;
- color: #57606a;
+ color: var(--fgColor-accent, #0969da);
text-decoration: none;
}
+ #${PANEL_ID} .md-pr-ecosystem-pill:hover {
+ text-decoration: underline;
+ }
#${PANEL_ID} .md-pr-project-list {
display: flex;
flex-direction: column;
- gap: 6px;
+ gap: 2px;
}
#${PANEL_ID} .md-pr-project-item {
display: flex;
+ align-items: baseline;
justify-content: space-between;
gap: 8px;
- font-size: 14px;
- color: #24292f;
}
#${PANEL_ID} .md-pr-project-meta {
- color: #57606a;
- font-size: 13px;
+ color: var(--fgColor-muted, #57606a);
+ flex-shrink: 0;
+ }
+ #${PANEL_ID} .md-pr-powered {
+ margin-top: 8px;
+ font-size: 11px;
+ color: var(--fgColor-muted, #57606a);
+ opacity: 0.65;
}
.md-pr-list-indicator {
display: inline-flex;
@@ -289,55 +247,6 @@
.md-pr-list-indicator.md-pr-list-missing {
background: #afb8c1;
}
- #${PANEL_ID} .md-pr-section {
- margin-top: 8px;
- }
- #${PANEL_ID} .md-pr-section-title {
- font-size: 11px;
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.04em;
- color: #6b7280;
- margin-bottom: 4px;
- }
- #${PANEL_ID} .md-pr-stats {
- display: grid;
- grid-template-columns: repeat(3, minmax(0, 1fr));
- gap: 6px;
- }
- #${PANEL_ID} .md-pr-stat {
- background: #ffffff;
- border: 1px solid #e5e7eb;
- border-radius: 8px;
- padding: 6px;
- text-align: center;
- }
- #${PANEL_ID} .md-pr-stat-label {
- font-size: 10px;
- text-transform: uppercase;
- letter-spacing: 0.05em;
- color: #6b7280;
- }
- #${PANEL_ID} .md-pr-stat-value {
- font-size: 13px;
- font-weight: 600;
- color: #111827;
- }
- #${PANEL_ID} .md-pr-pill {
- display: inline-flex;
- align-items: center;
- padding: 2px 6px;
- border-radius: 999px;
- background: #eef2ff;
- color: #3730a3;
- font-size: 11px;
- margin-right: 4px;
- margin-bottom: 4px;
- }
- #${PANEL_ID} .md-pr-link {
- color: #0a3069;
- font-weight: 600;
- }
#${BADGE_ID} {
display: inline-flex;
align-items: center;
@@ -360,6 +269,43 @@
document.head.appendChild(style);
}
+ function findSidebar() {
+ return document.querySelector(".discussion-sidebar");
+ }
+
+ function findReviewersSection(sidebar) {
+ if (!sidebar) return null;
+ const byClass = sidebar.querySelector(".discussion-sidebar-item.sidebar-reviewers");
+ if (byClass) return byClass;
+
+ const headings = sidebar.querySelectorAll(".discussion-sidebar-heading, h3");
+ for (const heading of headings) {
+ if (heading.textContent.trim().toLowerCase() !== "reviewers") continue;
+ const item = heading.closest(".discussion-sidebar-item");
+ if (item) return item;
+ }
+
+ return null;
+ }
+
+ function mountPanel(wrapper) {
+ const sidebar = findSidebar();
+ if (!sidebar) return false;
+
+ const reviewersSection = findReviewersSection(sidebar);
+ if (reviewersSection) {
+ if (reviewersSection.nextElementSibling !== wrapper) {
+ reviewersSection.insertAdjacentElement("afterend", wrapper);
+ }
+ return true;
+ }
+
+ if (wrapper.parentElement !== sidebar) {
+ sidebar.appendChild(wrapper);
+ }
+ return true;
+ }
+
function ensurePanel() {
const existing = document.getElementById(PANEL_ID);
if (!isPullDetailPage()) {
@@ -371,16 +317,18 @@
ensureStyles();
if (existing) {
+ mountPanel(existing);
updatePanel(existing);
return;
}
const wrapper = document.createElement("div");
wrapper.id = PANEL_ID;
+ wrapper.className = "discussion-sidebar-item";
wrapper.innerHTML = `
<div class="md-pr-panel">
<div class="md-pr-header">
- <span></span>
+ <h3 class="discussion-sidebar-heading md-pr-heading">Contributor insights</h3>
<button class="md-pr-gear" type="button" aria-label="Settings">
<span aria-hidden="true">⚙</span>
</button>
@@ -391,10 +339,11 @@
<div class="md-pr-details"></div>
</div>
<div class="md-pr-settings ${state.config.settingsOpen ? "md-pr-open" : ""}">
- <label>API key</label>
- <input type="password" data-config="apiKey" />
+ <label for="${PANEL_ID}-api-key">API key</label>
+ <input id="${PANEL_ID}-api-key" type="password" data-config="apiKey" />
<div class="md-pr-status"></div>
</div>
+ <div class="md-pr-powered">Powered by the Open Source Explorer</div>
</div>
`;
@@ -417,7 +366,10 @@
});
});
- document.body.appendChild(wrapper);
+ if (!mountPanel(wrapper)) {
+ return;
+ }
+
updatePanel(wrapper);
}
@@ -463,8 +415,8 @@
statusBlocks.forEach((status) => {
status.innerHTML = "";
});
- summary.innerHTML = `No profile found on the Open Source Explorer. <a class="md-pr-link" href="https://explore.market.dev" target="_blank" rel="noopener noreferrer">Explore</a>`;
- details.innerHTML = "";
+ summary.textContent = "No contributor profile found yet.";
+ details.innerHTML = `<a class="md-pr-link" href="https://explore.market.dev" target="_blank" rel="noopener noreferrer">Browse directory</a>`;
return;
}
@@ -566,7 +518,7 @@
${avatarUrl ? `<img src="${avatarUrl}" alt="${name}" />` : name.slice(0, 1).toUpperCase()}
</div>
<div>
- <div class="md-pr-name">${name}</div>
+ <div class="md-pr-name"><a class="md-pr-link" href="https://github.com/${encodeURIComponent(username)}" target="_blank" rel="noopener noreferrer">${name}</a></div>
<div class="md-pr-meta">@${username}${location ? ` · ${location}` : ""}</div>
<div class="md-pr-links">
<a class="md-pr-link" href="https://github.com/${encodeURIComponent(username)}" target="_blank" rel="noopener noreferrer">GitHub</a>
@@ -578,14 +530,9 @@
<div class="md-pr-stats">
${stats
.map(
- (stat) => `
- <div class="md-pr-stat-row">
- <span class="md-pr-stat-label">${stat.label}</span>
- <span class="md-pr-stat-value">${stat.value}</span>
- </div>
- `
+ (stat) => `<span class="md-pr-stat-item"><span class="md-pr-stat-label">${stat.label}:</span> ${stat.value}</span>`
)
- .join("")}
+ .join('<span class="md-pr-stat-sep">·</span>')}
</div>
` : ""}
${ecosystemNames.length ? `
Reviewing UI styling and integration details
git status --shortM content.js
Summarizing final changes and verification steps
Done — I moved the panel into GitHub’s PR sidebar and restyled it to blend in as a native section under Reviewers.
.discussion-sidebar, positioned immediately after the Reviewers block instead of floating in the viewport (content.js:272, content.js:309).content.js:62).content.js:325).content.js:346).content.js:414).node --check content.js (passes).If you want, next I can:
bookmarklet.js too so both extension + bookmarklet UIs are consistent.yes exactly, i don't want that popup style anymore
Assessing bookmarklet style issues
Analyzing script syntax validity
node --check bookmarklet.js/Users/tarunsachdeva/code/market.dev/explorer-chrome-extension/bookmarklet.js:678
})();
^
SyntaxError: Private field '#$' must be declared in an enclosing class
at wrapSafe (node:internal/modules/cjs/loader:1740:18)
at checkSyntax (node:internal/main/check_syntax:76:3)
Node.js v25.6.0
Planning bookmarklet style patch
Found 5 matches
/Users/tarunsachdeva/code/market.dev/explorer-chrome-extension/bookmarklet.js:
Line 40: function ensureStyles() {
Line 324: function ensurePanel() {
Line 381: function updatePanel(wrapper) {
Line 461: function renderExpertDetails(info, username) {
Line 678: })();Planning comprehensive function patching
Planning large style and helper patch
Patching bookmarklet function
Updating panel text
Patching expert details rendering
Cleaning trailing code in bookmarklet.js
Checking mentions for removal
Found 2 matches /Users/tarunsachdeva/code/market.dev/explorer-chrome-extension/bookmarklet.js: Line 307: <div class="md-pr-powered">Powered by the Open Source Explorer</div> /Users/tarunsachdeva/code/market.dev/explorer-chrome-extension/content.js: Line 346: <div class="md-pr-powered">Powered by the Open Source Explorer</div>
Running syntax check on files
node --check content.js(empty result)
node --check bookmarklet.js(empty result)
Verifying no leftover fixed positioning
Found 1 matches /Users/tarunsachdeva/code/market.dev/explorer-chrome-extension/content.js: Line 241: border: 1px solid #d0d7de;
No files found
Reviewing border style changes
git diff -- content.js bookmarklet.jsdiff --git a/bookmarklet.js b/bookmarklet.js
index b264bbb..c44200d 100644
--- a/bookmarklet.js
+++ b/bookmarklet.js
@@ -43,116 +43,91 @@
style.id = STYLE_ID;
style.textContent = `
#${PANEL_ID} {
- position: fixed;
- right: 16px;
- bottom: 16px;
- z-index: 999999;
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
- color: #1f2328;
+ color: var(--fgColor-default, #24292f);
+ }
+ #${PANEL_ID}.discussion-sidebar-item {
+ margin-top: 0;
}
#${PANEL_ID} .md-pr-panel {
- width: 440px;
- background: #ffffff;
- border: 1px solid #d0d7de;
- border-radius: 12px;
- box-shadow: 0 1px 3px rgba(27, 31, 36, 0.12);
- padding: 12px 12px 10px;
- font-size: 14px;
+ font-size: 12px;
+ line-height: 1.5;
}
#${PANEL_ID} .md-pr-header {
display: flex;
- justify-content: flex-end;
+ justify-content: space-between;
align-items: center;
- gap: 8px;
- font-weight: 600;
- font-size: 13px;
+ margin-bottom: 6px;
+ }
+ #${PANEL_ID} .md-pr-heading {
+ margin: 0;
}
#${PANEL_ID} .md-pr-gear {
border: none;
- background: #f6f8fa;
- border-radius: 6px;
- width: 28px;
- height: 28px;
+ background: transparent;
+ color: var(--fgColor-muted, #57606a);
+ width: 20px;
+ height: 20px;
+ padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
- border: 1px solid #d0d7de;
- color: #57606a;
}
- #${PANEL_ID} .md-pr-body {
- margin-top: 10px;
+ #${PANEL_ID} .md-pr-gear:hover {
+ color: var(--fgColor-default, #24292f);
}
#${PANEL_ID} .md-pr-settings {
display: none;
- margin-top: 10px;
- border-top: 1px dashed #d0d7de;
- padding-top: 10px;
+ margin-top: 8px;
}
#${PANEL_ID} .md-pr-settings.md-pr-open {
display: block;
}
- #${PANEL_ID} label {
+ #${PANEL_ID} .md-pr-settings label {
display: block;
- margin-bottom: 6px;
- font-weight: 600;
+ margin-bottom: 4px;
font-size: 12px;
- color: #57606a;
+ color: var(--fgColor-muted, #57606a);
}
- #${PANEL_ID} input[type="text"],
- #${PANEL_ID} input[type="password"] {
+ #${PANEL_ID} .md-pr-settings input[type="password"] {
width: 100%;
- border: 1px solid #d0d7de;
+ border: 1px solid var(--borderColor-default, #d0d7de);
border-radius: 6px;
- padding: 6px 8px;
- font-size: 14px;
- background: #ffffff;
- margin-bottom: 8px;
+ padding: 5px 8px;
+ font-size: 12px;
+ color: var(--fgColor-default, #24292f);
+ background: var(--bgColor-default, #ffffff);
}
#${PANEL_ID} .md-pr-status {
- margin-top: 8px;
- color: #57606a;
+ color: var(--fgColor-muted, #57606a);
}
#${PANEL_ID} .md-pr-warning {
- color: #cf222e;
- font-weight: 600;
- }
- #${PANEL_ID} .md-pr-success {
- color: #1a7f37;
- font-weight: 600;
+ color: var(--fgColor-danger, #cf222e);
}
#${PANEL_ID} .md-pr-details {
- margin-top: 6px;
- color: #24292f;
+ color: var(--fgColor-muted, #57606a);
}
#${PANEL_ID} .md-pr-summary {
- margin-top: 6px;
- font-size: 18px;
- color: #24292f;
- font-weight: 600;
- }
- #${PANEL_ID} .md-pr-card {
- border: 1px solid #d0d7de;
- border-radius: 10px;
- padding: 12px;
+ margin-bottom: 8px;
+ color: var(--fgColor-default, #24292f);
}
#${PANEL_ID} .md-pr-card-header {
display: flex;
- gap: 12px;
- align-items: center;
+ gap: 8px;
+ align-items: flex-start;
}
#${PANEL_ID} .md-pr-avatar {
- width: 56px;
- height: 56px;
+ width: 32px;
+ height: 32px;
border-radius: 50%;
- background: #f6f8fa;
- border: 1px solid #d0d7de;
overflow: hidden;
+ background: var(--bgColor-muted, #f6f8fa);
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 600;
- color: #57606a;
+ color: var(--fgColor-muted, #57606a);
+ flex-shrink: 0;
}
#${PANEL_ID} .md-pr-avatar img {
width: 100%;
@@ -160,144 +135,78 @@
object-fit: cover;
}
#${PANEL_ID} .md-pr-name {
- font-size: 18px;
- font-weight: 700;
- color: #1a7f37;
+ font-size: 13px;
+ font-weight: 600;
+ color: var(--fgColor-default, #24292f);
}
#${PANEL_ID} .md-pr-meta {
- margin-top: 6px;
- color: #57606a;
- font-size: 14px;
+ color: var(--fgColor-muted, #57606a);
}
#${PANEL_ID} .md-pr-links {
- margin-top: 6px;
+ margin-top: 2px;
display: flex;
- gap: 12px;
- font-size: 14px;
+ gap: 8px;
}
#${PANEL_ID} .md-pr-link {
- color: #0969da;
- font-weight: 600;
+ color: var(--fgColor-accent, #0969da);
+ text-decoration: none;
}
- #${PANEL_ID} .md-pr-stats {
- margin-top: 12px;
- border: 1px solid #d0d7de;
- border-radius: 8px;
- overflow: hidden;
+ #${PANEL_ID} .md-pr-link:hover {
+ text-decoration: underline;
}
- #${PANEL_ID} .md-pr-stat-row {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 8px 10px;
- border-bottom: 1px solid #d0d7de;
- font-size: 14px;
+ #${PANEL_ID} .md-pr-stats {
+ margin-top: 8px;
}
- #${PANEL_ID} .md-pr-stat-row:last-child {
- border-bottom: none;
+ #${PANEL_ID} .md-pr-stat-item {
+ color: var(--fgColor-default, #24292f);
}
#${PANEL_ID} .md-pr-stat-label {
- color: #57606a;
- text-transform: uppercase;
- letter-spacing: 0.04em;
- font-weight: 600;
- font-size: 11px;
+ color: var(--fgColor-muted, #57606a);
}
- #${PANEL_ID} .md-pr-stat-value {
- font-weight: 700;
- color: #24292f;
+ #${PANEL_ID} .md-pr-stat-sep {
+ margin: 0 4px;
+ color: var(--fgColor-muted, #57606a);
}
#${PANEL_ID} .md-pr-section {
- margin-top: 12px;
+ margin-top: 8px;
}
#${PANEL_ID} .md-pr-section-title {
- font-size: 13px;
+ margin-bottom: 2px;
font-weight: 600;
- color: #57606a;
- text-transform: uppercase;
- letter-spacing: 0.04em;
- margin-bottom: 6px;
+ color: var(--fgColor-muted, #57606a);
}
#${PANEL_ID} .md-pr-ecosystems {
display: flex;
flex-wrap: wrap;
- gap: 6px;
+ gap: 8px;
}
#${PANEL_ID} .md-pr-ecosystem-pill {
- display: inline-flex;
- align-items: center;
- background: #f6f8fa;
- border: 1px solid #d0d7de;
- border-radius: 999px;
- padding: 2px 8px;
- font-size: 13px;
- color: #57606a;
+ color: var(--fgColor-accent, #0969da);
text-decoration: none;
}
+ #${PANEL_ID} .md-pr-ecosystem-pill:hover {
+ text-decoration: underline;
+ }
#${PANEL_ID} .md-pr-project-list {
display: flex;
flex-direction: column;
- gap: 6px;
+ gap: 2px;
}
#${PANEL_ID} .md-pr-project-item {
display: flex;
+ align-items: baseline;
justify-content: space-between;
gap: 8px;
- font-size: 14px;
- color: #24292f;
}
#${PANEL_ID} .md-pr-project-meta {
- color: #57606a;
- font-size: 13px;
+ color: var(--fgColor-muted, #57606a);
+ flex-shrink: 0;
}
- #${PANEL_ID} .md-pr-section {
+ #${PANEL_ID} .md-pr-powered {
margin-top: 8px;
- }
- #${PANEL_ID} .md-pr-section-title {
- font-size: 11px;
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.04em;
- color: #6b7280;
- margin-bottom: 4px;
- }
- #${PANEL_ID} .md-pr-stats {
- display: grid;
- grid-template-columns: repeat(3, minmax(0, 1fr));
- gap: 6px;
- }
- #${PANEL_ID} .md-pr-stat {
- background: #ffffff;
- border: 1px solid #e5e7eb;
- border-radius: 8px;
- padding: 6px;
- text-align: center;
- }
- #${PANEL_ID} .md-pr-stat-label {
- font-size: 10px;
- text-transform: uppercase;
- letter-spacing: 0.05em;
- color: #6b7280;
- }
- #${PANEL_ID} .md-pr-stat-value {
- font-size: 13px;
- font-weight: 600;
- color: #111827;
- }
- #${PANEL_ID} .md-pr-pill {
- display: inline-flex;
- align-items: center;
- padding: 2px 6px;
- border-radius: 999px;
- background: #eef2ff;
- color: #3730a3;
font-size: 11px;
- margin-right: 4px;
- margin-bottom: 4px;
- }
- #${PANEL_ID} .md-pr-link {
- color: #0a3069;
- font-weight: 600;
+ color: var(--fgColor-muted, #57606a);
+ opacity: 0.65;
}
#${BADGE_ID} {
display: inline-flex;
@@ -321,6 +230,43 @@
document.head.appendChild(style);
}
+ function findSidebar() {
+ return document.querySelector(".discussion-sidebar");
+ }
+
+ function findReviewersSection(sidebar) {
+ if (!sidebar) return null;
+ const byClass = sidebar.querySelector(".discussion-sidebar-item.sidebar-reviewers");
+ if (byClass) return byClass;
+
+ const headings = sidebar.querySelectorAll(".discussion-sidebar-heading, h3");
+ for (const heading of headings) {
+ if (heading.textContent.trim().toLowerCase() !== "reviewers") continue;
+ const item = heading.closest(".discussion-sidebar-item");
+ if (item) return item;
+ }
+
+ return null;
+ }
+
+ function mountPanel(wrapper) {
+ const sidebar = findSidebar();
+ if (!sidebar) return false;
+
+ const reviewersSection = findReviewersSection(sidebar);
+ if (reviewersSection) {
+ if (reviewersSection.nextElementSibling !== wrapper) {
+ reviewersSection.insertAdjacentElement("afterend", wrapper);
+ }
+ return true;
+ }
+
+ if (wrapper.parentElement !== sidebar) {
+ sidebar.appendChild(wrapper);
+ }
+ return true;
+ }
+
function ensurePanel() {
const existing = document.getElementById(PANEL_ID);
if (!isPullDetailPage()) {
@@ -332,16 +278,18 @@
ensureStyles();
if (existing) {
+ mountPanel(existing);
updatePanel(existing);
return;
}
const wrapper = document.createElement("div");
wrapper.id = PANEL_ID;
+ wrapper.className = "discussion-sidebar-item";
wrapper.innerHTML = `
<div class="md-pr-panel">
<div class="md-pr-header">
- <span></span>
+ <h3 class="discussion-sidebar-heading md-pr-heading">Contributor insights</h3>
<button class="md-pr-gear" type="button" aria-label="Settings">
<span aria-hidden="true">⚙</span>
</button>
@@ -352,10 +300,11 @@
<div class="md-pr-details"></div>
</div>
<div class="md-pr-settings ${state.config.settingsOpen ? "md-pr-open" : ""}">
- <label>API key</label>
- <input type="password" data-config="apiKey" />
+ <label for="${PANEL_ID}-api-key">API key</label>
+ <input id="${PANEL_ID}-api-key" type="password" data-config="apiKey" />
<div class="md-pr-status"></div>
</div>
+ <div class="md-pr-powered">Powered by the Open Source Explorer</div>
</div>
`;
@@ -374,7 +323,10 @@
});
});
- document.body.appendChild(wrapper);
+ if (!mountPanel(wrapper)) {
+ return;
+ }
+
updatePanel(wrapper);
}
@@ -420,8 +372,8 @@
statusBlocks.forEach((status) => {
status.innerHTML = "";
});
- summary.innerHTML = `No profile found on the Open Source Explorer. <a class="md-pr-link" href="https://explore.market.dev" target="_blank" rel="noopener noreferrer">Explore</a>`;
- details.innerHTML = "";
+ summary.textContent = "No contributor profile found yet.";
+ details.innerHTML = `<a class="md-pr-link" href="https://explore.market.dev" target="_blank" rel="noopener noreferrer">Browse directory</a>`;
return;
}
@@ -523,11 +475,11 @@
${avatarUrl ? `<img src="${avatarUrl}" alt="${name}" />` : name.slice(0, 1).toUpperCase()}
</div>
<div>
- <div class="md-pr-name">${name}</div>
+ <div class="md-pr-name"><a class="md-pr-link" href="https://github.com/${encodeURIComponent(username)}" target="_blank" rel="noopener noreferrer">${name}</a></div>
<div class="md-pr-meta">@${username}${location ? ` · ${location}` : ""}</div>
<div class="md-pr-links">
<a class="md-pr-link" href="https://github.com/${encodeURIComponent(username)}" target="_blank" rel="noopener noreferrer">GitHub</a>
- <a class="md-pr-link" href="${profileUrl}" target="_blank" rel="noopener noreferrer">Explore</a>
+ <a class="md-pr-link" href="${profileUrl}" target="_blank" rel="noopener noreferrer">Market.dev</a>
</div>
</div>
</div>
@@ -535,14 +487,9 @@
<div class="md-pr-stats">
${stats
.map(
- (stat) => `
- <div class="md-pr-stat-row">
- <span class="md-pr-stat-label">${stat.label}</span>
- <span class="md-pr-stat-value">${stat.value}</span>
- </div>
- `
+ (stat) => `<span class="md-pr-stat-item"><span class="md-pr-stat-label">${stat.label}:</span> ${stat.value}</span>`
)
- .join("")}
+ .join('<span class="md-pr-stat-sep">·</span>')}
</div>
` : ""}
${ecosystemNames.length ? `
@@ -676,9 +623,3 @@
init();
}
})();
- #${PANEL_ID} .md-pr-summary {
- margin-top: 6px;
- font-size: 13px;
- color: #111827;
- font-weight: 600;
- }
diff --git a/content.js b/content.js
index 6c186a7..f2a3e03 100644
--- a/content.js
+++ b/content.js
@@ -65,116 +65,91 @@
style.id = STYLE_ID;
style.textContent = `
#${PANEL_ID} {
- position: fixed;
- right: 16px;
- bottom: 16px;
- z-index: 999999;
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
- color: #1f2328;
+ color: var(--fgColor-default, #24292f);
+ }
+ #${PANEL_ID}.discussion-sidebar-item {
+ margin-top: 0;
}
#${PANEL_ID} .md-pr-panel {
- width: 440px;
- background: #ffffff;
- border: 1px solid #d0d7de;
- border-radius: 12px;
- box-shadow: 0 1px 3px rgba(27, 31, 36, 0.12);
- padding: 12px 12px 10px;
- font-size: 14px;
+ font-size: 12px;
+ line-height: 1.5;
}
#${PANEL_ID} .md-pr-header {
display: flex;
- justify-content: flex-end;
+ justify-content: space-between;
align-items: center;
- gap: 8px;
- font-weight: 600;
- font-size: 13px;
+ margin-bottom: 6px;
+ }
+ #${PANEL_ID} .md-pr-heading {
+ margin: 0;
}
#${PANEL_ID} .md-pr-gear {
border: none;
- background: #f6f8fa;
- border-radius: 6px;
- width: 28px;
- height: 28px;
+ background: transparent;
+ color: var(--fgColor-muted, #57606a);
+ width: 20px;
+ height: 20px;
+ padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
- border: 1px solid #d0d7de;
- color: #57606a;
}
- #${PANEL_ID} .md-pr-body {
- margin-top: 10px;
+ #${PANEL_ID} .md-pr-gear:hover {
+ color: var(--fgColor-default, #24292f);
}
#${PANEL_ID} .md-pr-settings {
display: none;
- margin-top: 10px;
- border-top: 1px dashed #d0d7de;
- padding-top: 10px;
+ margin-top: 8px;
}
#${PANEL_ID} .md-pr-settings.md-pr-open {
display: block;
}
- #${PANEL_ID} label {
+ #${PANEL_ID} .md-pr-settings label {
display: block;
- margin-bottom: 6px;
- font-weight: 600;
+ margin-bottom: 4px;
font-size: 12px;
- color: #57606a;
+ color: var(--fgColor-muted, #57606a);
}
- #${PANEL_ID} input[type="text"],
- #${PANEL_ID} input[type="password"] {
+ #${PANEL_ID} .md-pr-settings input[type="password"] {
width: 100%;
- border: 1px solid #d0d7de;
+ border: 1px solid var(--borderColor-default, #d0d7de);
border-radius: 6px;
- padding: 6px 8px;
- font-size: 14px;
- background: #ffffff;
- margin-bottom: 8px;
+ padding: 5px 8px;
+ font-size: 12px;
+ color: var(--fgColor-default, #24292f);
+ background: var(--bgColor-default, #ffffff);
}
#${PANEL_ID} .md-pr-status {
- margin-top: 8px;
- color: #57606a;
+ color: var(--fgColor-muted, #57606a);
}
#${PANEL_ID} .md-pr-warning {
- color: #cf222e;
- font-weight: 600;
- }
- #${PANEL_ID} .md-pr-success {
- color: #1a7f37;
- font-weight: 600;
+ color: var(--fgColor-danger, #cf222e);
}
#${PANEL_ID} .md-pr-details {
- margin-top: 6px;
- color: #24292f;
+ color: var(--fgColor-muted, #57606a);
}
#${PANEL_ID} .md-pr-summary {
- margin-top: 6px;
- font-size: 18px;
- color: #24292f;
- font-weight: 600;
- }
- #${PANEL_ID} .md-pr-card {
- border: 1px solid #d0d7de;
- border-radius: 10px;
- padding: 12px;
+ margin-bottom: 8px;
+ color: var(--fgColor-default, #24292f);
}
#${PANEL_ID} .md-pr-card-header {
display: flex;
- gap: 12px;
- align-items: center;
+ gap: 8px;
+ align-items: flex-start;
}
#${PANEL_ID} .md-pr-avatar {
- width: 56px;
- height: 56px;
+ width: 32px;
+ height: 32px;
border-radius: 50%;
- background: #f6f8fa;
- border: 1px solid #d0d7de;
overflow: hidden;
+ background: var(--bgColor-muted, #f6f8fa);
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 600;
- color: #57606a;
+ color: var(--fgColor-muted, #57606a);
+ flex-shrink: 0;
}
#${PANEL_ID} .md-pr-avatar img {
width: 100%;
@@ -182,95 +157,78 @@
object-fit: cover;
}
#${PANEL_ID} .md-pr-name {
- font-size: 18px;
- font-weight: 700;
- color: #1a7f37;
+ font-size: 13px;
+ font-weight: 600;
+ color: var(--fgColor-default, #24292f);
}
#${PANEL_ID} .md-pr-meta {
- margin-top: 6px;
- color: #57606a;
- font-size: 14px;
+ color: var(--fgColor-muted, #57606a);
}
#${PANEL_ID} .md-pr-links {
- margin-top: 6px;
+ margin-top: 2px;
display: flex;
- gap: 12px;
- font-size: 14px;
+ gap: 8px;
}
#${PANEL_ID} .md-pr-link {
- color: #0969da;
- font-weight: 600;
+ color: var(--fgColor-accent, #0969da);
+ text-decoration: none;
}
- #${PANEL_ID} .md-pr-stats {
- margin-top: 12px;
- border: 1px solid #d0d7de;
- border-radius: 8px;
- overflow: hidden;
+ #${PANEL_ID} .md-pr-link:hover {
+ text-decoration: underline;
}
- #${PANEL_ID} .md-pr-stat-row {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 8px 10px;
- border-bottom: 1px solid #d0d7de;
- font-size: 14px;
+ #${PANEL_ID} .md-pr-stats {
+ margin-top: 8px;
}
- #${PANEL_ID} .md-pr-stat-row:last-child {
- border-bottom: none;
+ #${PANEL_ID} .md-pr-stat-item {
+ color: var(--fgColor-default, #24292f);
}
#${PANEL_ID} .md-pr-stat-label {
- color: #57606a;
- text-transform: uppercase;
- letter-spacing: 0.04em;
- font-weight: 600;
- font-size: 11px;
+ color: var(--fgColor-muted, #57606a);
}
- #${PANEL_ID} .md-pr-stat-value {
- font-weight: 700;
- color: #24292f;
+ #${PANEL_ID} .md-pr-stat-sep {
+ margin: 0 4px;
+ color: var(--fgColor-muted, #57606a);
}
#${PANEL_ID} .md-pr-section {
- margin-top: 12px;
+ margin-top: 8px;
}
#${PANEL_ID} .md-pr-section-title {
- font-size: 13px;
+ margin-bottom: 2px;
font-weight: 600;
- color: #57606a;
- text-transform: uppercase;
- letter-spacing: 0.04em;
- margin-bottom: 6px;
+ color: var(--fgColor-muted, #57606a);
}
#${PANEL_ID} .md-pr-ecosystems {
display: flex;
flex-wrap: wrap;
- gap: 6px;
+ gap: 8px;
}
#${PANEL_ID} .md-pr-ecosystem-pill {
- display: inline-flex;
- align-items: center;
- background: #f6f8fa;
- border: 1px solid #d0d7de;
- border-radius: 999px;
- padding: 2px 8px;
- font-size: 13px;
- color: #57606a;
+ color: var(--fgColor-accent, #0969da);
text-decoration: none;
}
+ #${PANEL_ID} .md-pr-ecosystem-pill:hover {
+ text-decoration: underline;
+ }
#${PANEL_ID} .md-pr-project-list {
display: flex;
flex-direction: column;
- gap: 6px;
+ gap: 2px;
}
#${PANEL_ID} .md-pr-project-item {
display: flex;
+ align-items: baseline;
justify-content: space-between;
gap: 8px;
- font-size: 14px;
- color: #24292f;
}
#${PANEL_ID} .md-pr-project-meta {
- color: #57606a;
- font-size: 13px;
+ color: var(--fgColor-muted, #57606a);
+ flex-shrink: 0;
+ }
+ #${PANEL_ID} .md-pr-powered {
+ margin-top: 8px;
+ font-size: 11px;
+ color: var(--fgColor-muted, #57606a);
+ opacity: 0.65;
}
.md-pr-list-indicator {
display: inline-flex;
@@ -289,55 +247,6 @@
.md-pr-list-indicator.md-pr-list-missing {
background: #afb8c1;
}
- #${PANEL_ID} .md-pr-section {
- margin-top: 8px;
- }
- #${PANEL_ID} .md-pr-section-title {
- font-size: 11px;
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.04em;
- color: #6b7280;
- margin-bottom: 4px;
- }
- #${PANEL_ID} .md-pr-stats {
- display: grid;
- grid-template-columns: repeat(3, minmax(0, 1fr));
- gap: 6px;
- }
- #${PANEL_ID} .md-pr-stat {
- background: #ffffff;
- border: 1px solid #e5e7eb;
- border-radius: 8px;
- padding: 6px;
- text-align: center;
- }
- #${PANEL_ID} .md-pr-stat-label {
- font-size: 10px;
- text-transform: uppercase;
- letter-spacing: 0.05em;
- color: #6b7280;
- }
- #${PANEL_ID} .md-pr-stat-value {
- font-size: 13px;
- font-weight: 600;
- color: #111827;
- }
- #${PANEL_ID} .md-pr-pill {
- display: inline-flex;
- align-items: center;
- padding: 2px 6px;
- border-radius: 999px;
- background: #eef2ff;
- color: #3730a3;
- font-size: 11px;
- margin-right: 4px;
- margin-bottom: 4px;
- }
- #${PANEL_ID} .md-pr-link {
- color: #0a3069;
- font-weight: 600;
- }
#${BADGE_ID} {
display: inline-flex;
align-items: center;
@@ -360,6 +269,43 @@
document.head.appendChild(style);
}
+ function findSidebar() {
+ return document.querySelector(".discussion-sidebar");
+ }
+
+ function findReviewersSection(sidebar) {
+ if (!sidebar) return null;
+ const byClass = sidebar.querySelector(".discussion-sidebar-item.sidebar-reviewers");
+ if (byClass) return byClass;
+
+ const headings = sidebar.querySelectorAll(".discussion-sidebar-heading, h3");
+ for (const heading of headings) {
+ if (heading.textContent.trim().toLowerCase() !== "reviewers") continue;
+ const item = heading.closest(".discussion-sidebar-item");
+ if (item) return item;
+ }
+
+ return null;
+ }
+
+ function mountPanel(wrapper) {
+ const sidebar = findSidebar();
+ if (!sidebar) return false;
+
+ const reviewersSection = findReviewersSection(sidebar);
+ if (reviewersSection) {
+ if (reviewersSection.nextElementSibling !== wrapper) {
+ reviewersSection.insertAdjacentElement("afterend", wrapper);
+ }
+ return true;
+ }
+
+ if (wrapper.parentElement !== sidebar) {
+ sidebar.appendChild(wrapper);
+ }
+ return true;
+ }
+
function ensurePanel() {
const existing = document.getElementById(PANEL_ID);
if (!isPullDetailPage()) {
@@ -371,16 +317,18 @@
ensureStyles();
if (existing) {
+ mountPanel(existing);
updatePanel(existing);
return;
}
const wrapper = document.createElement("div");
wrapper.id = PANEL_ID;
+ wrapper.className = "discussion-sidebar-item";
wrapper.innerHTML = `
<div class="md-pr-panel">
<div class="md-pr-header">
- <span></span>
+ <h3 class="discussion-sidebar-heading md-pr-heading">Contributor insights</h3>
<button class="md-pr-gear" type="button" aria-label="Settings">
<span aria-hidden="true">⚙</span>
</button>
@@ -391,10 +339,11 @@
<div class="md-pr-details"></div>
</div>
<div class="md-pr-settings ${state.config.settingsOpen ? "md-pr-open" : ""}">
- <label>API key</label>
- <input type="password" data-config="apiKey" />
+ <label for="${PANEL_ID}-api-key">API key</label>
+ <input id="${PANEL_ID}-api-key" type="password" data-config="apiKey" />
<div class="md-pr-status"></div>
</div>
+ <div class="md-pr-powered">Powered by the Open Source Explorer</div>
</div>
`;
@@ -417,7 +366,10 @@
});
});
- document.body.appendChild(wrapper);
+ if (!mountPanel(wrapper)) {
+ return;
+ }
+
updatePanel(wrapper);
}
@@ -463,8 +415,8 @@
statusBlocks.forEach((status) => {
status.innerHTML = "";
});
- summary.innerHTML = `No profile found on the Open Source Explorer. <a class="md-pr-link" href="https://explore.market.dev" target="_blank" rel="noopener noreferrer">Explore</a>`;
- details.innerHTML = "";
+ summary.textContent = "No contributor profile found yet.";
+ details.innerHTML = `<a class="md-pr-link" href="https://explore.market.dev" target="_blank" rel="noopener noreferrer">Browse directory</a>`;
return;
}
@@ -566,7 +518,7 @@
${avatarUrl ? `<img src="${avatarUrl}" alt="${name}" />` : name.slice(0, 1).toUpperCase()}
</div>
<div>
- <div class="md-pr-name">${name}</div>
+ <div class="md-pr-name"><a class="md-pr-link" href="https://github.com/${encodeURIComponent(username)}" target="_blank" rel="noopener noreferrer">${name}</a></div>
<div class="md-pr-meta">@${username}${location ? ` · ${location}` : ""}</div>
<div class="md-pr-links">
<a class="md-pr-link" href="https://github.com/${encodeURIComponent(username)}" target="_blank" rel="noopener noreferrer">GitHub</a>
@@ -578,14 +530,9 @@
<div class="md-pr-stats">
${stats
.map(
- (stat) => `
- <div class="md-pr-stat-row">
- <span class="md-pr-stat-label">${stat.label}</span>
- <span class="md-pr-stat-value">${stat.value}</span>
- </div>
- `
+ (stat) => `<span class="md-pr-stat-item"><span class="md-pr-stat-label">${stat.label}:</span> ${stat.value}</span>`
)
- .join("")}
+ .join('<span class="md-pr-stat-sep">·</span>')}
</div>
` : ""}
${ecosystemNames.length ? `
Verifying bookmarklet sync status
git status --shortM bookmarklet.js M content.js
Summarizing popup removal changes
Perfect — I removed the popup treatment entirely.
content.js and bookmarklet.js).Powered by the Open Source Explorer.node --check content.js and node --check bookmarklet.js.If you refresh GitHub and still see the old UI, reload the extension once in chrome://extensions and hard refresh the PR page.
i dont see anything now
Diagnosing sidebar mount failure
No files found
Reviewing content.js for improvements
Checking early return effects
Designing robust panel mounting with retries and sidebar fallbacks
Patching bookmarklet state
Planning border style cleanup
node --check content.js(empty result)
node --check bookmarklet.js(empty result)
Verifying patch application
git diff -- content.js bookmarklet.jsdiff --git a/bookmarklet.js b/bookmarklet.js
index b264bbb..6a770d6 100644
--- a/bookmarklet.js
+++ b/bookmarklet.js
@@ -14,7 +14,9 @@
const state = {
config: loadConfig(),
- currentResult: null
+ currentResult: null,
+ mountRetryTimer: null,
+ mountRetryCount: 0
};
function loadConfig() {
@@ -43,116 +45,91 @@
style.id = STYLE_ID;
style.textContent = `
#${PANEL_ID} {
- position: fixed;
- right: 16px;
- bottom: 16px;
- z-index: 999999;
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
- color: #1f2328;
+ color: var(--fgColor-default, #24292f);
+ }
+ #${PANEL_ID}.discussion-sidebar-item {
+ margin-top: 0;
}
#${PANEL_ID} .md-pr-panel {
- width: 440px;
- background: #ffffff;
- border: 1px solid #d0d7de;
- border-radius: 12px;
- box-shadow: 0 1px 3px rgba(27, 31, 36, 0.12);
- padding: 12px 12px 10px;
- font-size: 14px;
+ font-size: 12px;
+ line-height: 1.5;
}
#${PANEL_ID} .md-pr-header {
display: flex;
- justify-content: flex-end;
+ justify-content: space-between;
align-items: center;
- gap: 8px;
- font-weight: 600;
- font-size: 13px;
+ margin-bottom: 6px;
+ }
+ #${PANEL_ID} .md-pr-heading {
+ margin: 0;
}
#${PANEL_ID} .md-pr-gear {
border: none;
- background: #f6f8fa;
- border-radius: 6px;
- width: 28px;
- height: 28px;
+ background: transparent;
+ color: var(--fgColor-muted, #57606a);
+ width: 20px;
+ height: 20px;
+ padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
- border: 1px solid #d0d7de;
- color: #57606a;
}
- #${PANEL_ID} .md-pr-body {
- margin-top: 10px;
+ #${PANEL_ID} .md-pr-gear:hover {
+ color: var(--fgColor-default, #24292f);
}
#${PANEL_ID} .md-pr-settings {
display: none;
- margin-top: 10px;
- border-top: 1px dashed #d0d7de;
- padding-top: 10px;
+ margin-top: 8px;
}
#${PANEL_ID} .md-pr-settings.md-pr-open {
display: block;
}
- #${PANEL_ID} label {
+ #${PANEL_ID} .md-pr-settings label {
display: block;
- margin-bottom: 6px;
- font-weight: 600;
+ margin-bottom: 4px;
font-size: 12px;
- color: #57606a;
+ color: var(--fgColor-muted, #57606a);
}
- #${PANEL_ID} input[type="text"],
- #${PANEL_ID} input[type="password"] {
+ #${PANEL_ID} .md-pr-settings input[type="password"] {
width: 100%;
- border: 1px solid #d0d7de;
+ border: 1px solid var(--borderColor-default, #d0d7de);
border-radius: 6px;
- padding: 6px 8px;
- font-size: 14px;
- background: #ffffff;
- margin-bottom: 8px;
+ padding: 5px 8px;
+ font-size: 12px;
+ color: var(--fgColor-default, #24292f);
+ background: var(--bgColor-default, #ffffff);
}
#${PANEL_ID} .md-pr-status {
- margin-top: 8px;
- color: #57606a;
+ color: var(--fgColor-muted, #57606a);
}
#${PANEL_ID} .md-pr-warning {
- color: #cf222e;
- font-weight: 600;
- }
- #${PANEL_ID} .md-pr-success {
- color: #1a7f37;
- font-weight: 600;
+ color: var(--fgColor-danger, #cf222e);
}
#${PANEL_ID} .md-pr-details {
- margin-top: 6px;
- color: #24292f;
+ color: var(--fgColor-muted, #57606a);
}
#${PANEL_ID} .md-pr-summary {
- margin-top: 6px;
- font-size: 18px;
- color: #24292f;
- font-weight: 600;
- }
- #${PANEL_ID} .md-pr-card {
- border: 1px solid #d0d7de;
- border-radius: 10px;
- padding: 12px;
+ margin-bottom: 8px;
+ color: var(--fgColor-default, #24292f);
}
#${PANEL_ID} .md-pr-card-header {
display: flex;
- gap: 12px;
- align-items: center;
+ gap: 8px;
+ align-items: flex-start;
}
#${PANEL_ID} .md-pr-avatar {
- width: 56px;
- height: 56px;
+ width: 32px;
+ height: 32px;
border-radius: 50%;
- background: #f6f8fa;
- border: 1px solid #d0d7de;
overflow: hidden;
+ background: var(--bgColor-muted, #f6f8fa);
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 600;
- color: #57606a;
+ color: var(--fgColor-muted, #57606a);
+ flex-shrink: 0;
}
#${PANEL_ID} .md-pr-avatar img {
width: 100%;
@@ -160,144 +137,78 @@
object-fit: cover;
}
#${PANEL_ID} .md-pr-name {
- font-size: 18px;
- font-weight: 700;
- color: #1a7f37;
+ font-size: 13px;
+ font-weight: 600;
+ color: var(--fgColor-default, #24292f);
}
#${PANEL_ID} .md-pr-meta {
- margin-top: 6px;
- color: #57606a;
- font-size: 14px;
+ color: var(--fgColor-muted, #57606a);
}
#${PANEL_ID} .md-pr-links {
- margin-top: 6px;
+ margin-top: 2px;
display: flex;
- gap: 12px;
- font-size: 14px;
+ gap: 8px;
}
#${PANEL_ID} .md-pr-link {
- color: #0969da;
- font-weight: 600;
+ color: var(--fgColor-accent, #0969da);
+ text-decoration: none;
}
- #${PANEL_ID} .md-pr-stats {
- margin-top: 12px;
- border: 1px solid #d0d7de;
- border-radius: 8px;
- overflow: hidden;
+ #${PANEL_ID} .md-pr-link:hover {
+ text-decoration: underline;
}
- #${PANEL_ID} .md-pr-stat-row {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 8px 10px;
- border-bottom: 1px solid #d0d7de;
- font-size: 14px;
+ #${PANEL_ID} .md-pr-stats {
+ margin-top: 8px;
}
- #${PANEL_ID} .md-pr-stat-row:last-child {
- border-bottom: none;
+ #${PANEL_ID} .md-pr-stat-item {
+ color: var(--fgColor-default, #24292f);
}
#${PANEL_ID} .md-pr-stat-label {
- color: #57606a;
- text-transform: uppercase;
- letter-spacing: 0.04em;
- font-weight: 600;
- font-size: 11px;
+ color: var(--fgColor-muted, #57606a);
}
- #${PANEL_ID} .md-pr-stat-value {
- font-weight: 700;
- color: #24292f;
+ #${PANEL_ID} .md-pr-stat-sep {
+ margin: 0 4px;
+ color: var(--fgColor-muted, #57606a);
}
#${PANEL_ID} .md-pr-section {
- margin-top: 12px;
+ margin-top: 8px;
}
#${PANEL_ID} .md-pr-section-title {
- font-size: 13px;
+ margin-bottom: 2px;
font-weight: 600;
- color: #57606a;
- text-transform: uppercase;
- letter-spacing: 0.04em;
- margin-bottom: 6px;
+ color: var(--fgColor-muted, #57606a);
}
#${PANEL_ID} .md-pr-ecosystems {
display: flex;
flex-wrap: wrap;
- gap: 6px;
+ gap: 8px;
}
#${PANEL_ID} .md-pr-ecosystem-pill {
- display: inline-flex;
- align-items: center;
- background: #f6f8fa;
- border: 1px solid #d0d7de;
- border-radius: 999px;
- padding: 2px 8px;
- font-size: 13px;
- color: #57606a;
+ color: var(--fgColor-accent, #0969da);
text-decoration: none;
}
+ #${PANEL_ID} .md-pr-ecosystem-pill:hover {
+ text-decoration: underline;
+ }
#${PANEL_ID} .md-pr-project-list {
display: flex;
flex-direction: column;
- gap: 6px;
+ gap: 2px;
}
#${PANEL_ID} .md-pr-project-item {
display: flex;
+ align-items: baseline;
justify-content: space-between;
gap: 8px;
- font-size: 14px;
- color: #24292f;
}
#${PANEL_ID} .md-pr-project-meta {
- color: #57606a;
- font-size: 13px;
+ color: var(--fgColor-muted, #57606a);
+ flex-shrink: 0;
}
- #${PANEL_ID} .md-pr-section {
+ #${PANEL_ID} .md-pr-powered {
margin-top: 8px;
- }
- #${PANEL_ID} .md-pr-section-title {
font-size: 11px;
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.04em;
- color: #6b7280;
- margin-bottom: 4px;
- }
- #${PANEL_ID} .md-pr-stats {
- display: grid;
- grid-template-columns: repeat(3, minmax(0, 1fr));
- gap: 6px;
- }
- #${PANEL_ID} .md-pr-stat {
- background: #ffffff;
- border: 1px solid #e5e7eb;
- border-radius: 8px;
- padding: 6px;
- text-align: center;
- }
- #${PANEL_ID} .md-pr-stat-label {
- font-size: 10px;
- text-transform: uppercase;
- letter-spacing: 0.05em;
- color: #6b7280;
- }
- #${PANEL_ID} .md-pr-stat-value {
- font-size: 13px;
- font-weight: 600;
- color: #111827;
- }
- #${PANEL_ID} .md-pr-pill {
- display: inline-flex;
- align-items: center;
- padding: 2px 6px;
- border-radius: 999px;
- background: #eef2ff;
- color: #3730a3;
- font-size: 11px;
- margin-right: 4px;
- margin-bottom: 4px;
- }
- #${PANEL_ID} .md-pr-link {
- color: #0a3069;
- font-weight: 600;
+ color: var(--fgColor-muted, #57606a);
+ opacity: 0.65;
}
#${BADGE_ID} {
display: inline-flex;
@@ -321,10 +232,77 @@
document.head.appendChild(style);
}
+ function clearMountRetry() {
+ if (!state.mountRetryTimer) return;
+ window.clearTimeout(state.mountRetryTimer);
+ state.mountRetryTimer = null;
+ }
+
+ function scheduleMountRetry() {
+ if (state.mountRetryTimer || state.mountRetryCount >= 40 || !isPullDetailPage()) return;
+ state.mountRetryTimer = window.setTimeout(() => {
+ state.mountRetryTimer = null;
+ state.mountRetryCount += 1;
+ ensurePanel();
+ }, 250);
+ }
+
+ function findSidebar() {
+ const selectors = [
+ ".discussion-sidebar",
+ ".Layout-sidebar .discussion-sidebar",
+ ".Layout-sidebar"
+ ];
+
+ for (const selector of selectors) {
+ const element = document.querySelector(selector);
+ if (element) return element;
+ }
+
+ return null;
+ }
+
+ function findReviewersSection(sidebar) {
+ if (!sidebar) return null;
+ const byClass = sidebar.querySelector(".discussion-sidebar-item.sidebar-reviewers");
+ if (byClass) return byClass;
+
+ const headings = sidebar.querySelectorAll(".discussion-sidebar-heading, h2, h3, h4");
+ for (const heading of headings) {
+ if (heading.textContent.trim().toLowerCase() !== "reviewers") continue;
+ const item = heading.closest(
+ ".discussion-sidebar-item, .js-discussion-sidebar-item, [class*='sidebar-item'], section"
+ );
+ if (item) return item;
+ }
+
+ return null;
+ }
+
+ function mountPanel(wrapper) {
+ const sidebar = findSidebar();
+ if (!sidebar) return false;
+
+ const reviewersSection = findReviewersSection(sidebar);
+ if (reviewersSection) {
+ if (reviewersSection.nextElementSibling !== wrapper) {
+ reviewersSection.insertAdjacentElement("afterend", wrapper);
+ }
+ return true;
+ }
+
+ if (wrapper.parentElement !== sidebar) {
+ sidebar.appendChild(wrapper);
+ }
+ return true;
+ }
+
function ensurePanel() {
const existing = document.getElementById(PANEL_ID);
if (!isPullDetailPage()) {
if (existing) existing.remove();
+ clearMountRetry();
+ state.mountRetryCount = 0;
removeBadge();
return;
}
@@ -332,16 +310,23 @@
ensureStyles();
if (existing) {
+ if (!mountPanel(existing)) {
+ scheduleMountRetry();
+ return;
+ }
+ clearMountRetry();
+ state.mountRetryCount = 0;
updatePanel(existing);
return;
}
const wrapper = document.createElement("div");
wrapper.id = PANEL_ID;
+ wrapper.className = "discussion-sidebar-item";
wrapper.innerHTML = `
<div class="md-pr-panel">
<div class="md-pr-header">
- <span></span>
+ <h3 class="discussion-sidebar-heading md-pr-heading">Contributor insights</h3>
<button class="md-pr-gear" type="button" aria-label="Settings">
<span aria-hidden="true">⚙</span>
</button>
@@ -352,10 +337,11 @@
<div class="md-pr-details"></div>
</div>
<div class="md-pr-settings ${state.config.settingsOpen ? "md-pr-open" : ""}">
- <label>API key</label>
- <input type="password" data-config="apiKey" />
+ <label for="${PANEL_ID}-api-key">API key</label>
+ <input id="${PANEL_ID}-api-key" type="password" data-config="apiKey" />
<div class="md-pr-status"></div>
</div>
+ <div class="md-pr-powered">Powered by the Open Source Explorer</div>
</div>
`;
@@ -374,7 +360,14 @@
});
});
- document.body.appendChild(wrapper);
+ if (!mountPanel(wrapper)) {
+ scheduleMountRetry();
+ return;
+ }
+
+ clearMountRetry();
+ state.mountRetryCount = 0;
+
updatePanel(wrapper);
}
@@ -420,8 +413,8 @@
statusBlocks.forEach((status) => {
status.innerHTML = "";
});
- summary.innerHTML = `No profile found on the Open Source Explorer. <a class="md-pr-link" href="https://explore.market.dev" target="_blank" rel="noopener noreferrer">Explore</a>`;
- details.innerHTML = "";
+ summary.textContent = "No contributor profile found yet.";
+ details.innerHTML = `<a class="md-pr-link" href="https://explore.market.dev" target="_blank" rel="noopener noreferrer">Browse directory</a>`;
return;
}
@@ -523,11 +516,11 @@
${avatarUrl ? `<img src="${avatarUrl}" alt="${name}" />` : name.slice(0, 1).toUpperCase()}
</div>
<div>
- <div class="md-pr-name">${name}</div>
+ <div class="md-pr-name"><a class="md-pr-link" href="https://github.com/${encodeURIComponent(username)}" target="_blank" rel="noopener noreferrer">${name}</a></div>
<div class="md-pr-meta">@${username}${location ? ` · ${location}` : ""}</div>
<div class="md-pr-links">
<a class="md-pr-link" href="https://github.com/${encodeURIComponent(username)}" target="_blank" rel="noopener noreferrer">GitHub</a>
- <a class="md-pr-link" href="${profileUrl}" target="_blank" rel="noopener noreferrer">Explore</a>
+ <a class="md-pr-link" href="${profileUrl}" target="_blank" rel="noopener noreferrer">Market.dev</a>
</div>
</div>
</div>
@@ -535,14 +528,9 @@
<div class="md-pr-stats">
${stats
.map(
- (stat) => `
- <div class="md-pr-stat-row">
- <span class="md-pr-stat-label">${stat.label}</span>
- <span class="md-pr-stat-value">${stat.value}</span>
- </div>
- `
+ (stat) => `<span class="md-pr-stat-item"><span class="md-pr-stat-label">${stat.label}:</span> ${stat.value}</span>`
)
- .join("")}
+ .join('<span class="md-pr-stat-sep">·</span>')}
</div>
` : ""}
${ecosystemNames.length ? `
@@ -676,9 +664,3 @@
init();
}
})();
- #${PANEL_ID} .md-pr-summary {
- margin-top: 6px;
- font-size: 13px;
- color: #111827;
- font-weight: 600;
- }
diff --git a/content.js b/content.js
index 6c186a7..ebe083a 100644
--- a/content.js
+++ b/content.js
@@ -12,7 +12,9 @@
const state = {
config: loadConfig(),
currentResult: null,
- listCache: new Map()
+ listCache: new Map(),
+ mountRetryTimer: null,
+ mountRetryCount: 0
};
function loadConfig() {
@@ -65,116 +67,91 @@
style.id = STYLE_ID;
style.textContent = `
#${PANEL_ID} {
- position: fixed;
- right: 16px;
- bottom: 16px;
- z-index: 999999;
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
- color: #1f2328;
+ color: var(--fgColor-default, #24292f);
+ }
+ #${PANEL_ID}.discussion-sidebar-item {
+ margin-top: 0;
}
#${PANEL_ID} .md-pr-panel {
- width: 440px;
- background: #ffffff;
- border: 1px solid #d0d7de;
- border-radius: 12px;
- box-shadow: 0 1px 3px rgba(27, 31, 36, 0.12);
- padding: 12px 12px 10px;
- font-size: 14px;
+ font-size: 12px;
+ line-height: 1.5;
}
#${PANEL_ID} .md-pr-header {
display: flex;
- justify-content: flex-end;
+ justify-content: space-between;
align-items: center;
- gap: 8px;
- font-weight: 600;
- font-size: 13px;
+ margin-bottom: 6px;
+ }
+ #${PANEL_ID} .md-pr-heading {
+ margin: 0;
}
#${PANEL_ID} .md-pr-gear {
border: none;
- background: #f6f8fa;
- border-radius: 6px;
- width: 28px;
- height: 28px;
+ background: transparent;
+ color: var(--fgColor-muted, #57606a);
+ width: 20px;
+ height: 20px;
+ padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
- border: 1px solid #d0d7de;
- color: #57606a;
}
- #${PANEL_ID} .md-pr-body {
- margin-top: 10px;
+ #${PANEL_ID} .md-pr-gear:hover {
+ color: var(--fgColor-default, #24292f);
}
#${PANEL_ID} .md-pr-settings {
display: none;
- margin-top: 10px;
- border-top: 1px dashed #d0d7de;
- padding-top: 10px;
+ margin-top: 8px;
}
#${PANEL_ID} .md-pr-settings.md-pr-open {
display: block;
}
- #${PANEL_ID} label {
+ #${PANEL_ID} .md-pr-settings label {
display: block;
- margin-bottom: 6px;
- font-weight: 600;
+ margin-bottom: 4px;
font-size: 12px;
- color: #57606a;
+ color: var(--fgColor-muted, #57606a);
}
- #${PANEL_ID} input[type="text"],
- #${PANEL_ID} input[type="password"] {
+ #${PANEL_ID} .md-pr-settings input[type="password"] {
width: 100%;
- border: 1px solid #d0d7de;
+ border: 1px solid var(--borderColor-default, #d0d7de);
border-radius: 6px;
- padding: 6px 8px;
- font-size: 14px;
- background: #ffffff;
- margin-bottom: 8px;
+ padding: 5px 8px;
+ font-size: 12px;
+ color: var(--fgColor-default, #24292f);
+ background: var(--bgColor-default, #ffffff);
}
#${PANEL_ID} .md-pr-status {
- margin-top: 8px;
- color: #57606a;
+ color: var(--fgColor-muted, #57606a);
}
#${PANEL_ID} .md-pr-warning {
- color: #cf222e;
- font-weight: 600;
- }
- #${PANEL_ID} .md-pr-success {
- color: #1a7f37;
- font-weight: 600;
+ color: var(--fgColor-danger, #cf222e);
}
#${PANEL_ID} .md-pr-details {
- margin-top: 6px;
- color: #24292f;
+ color: var(--fgColor-muted, #57606a);
}
#${PANEL_ID} .md-pr-summary {
- margin-top: 6px;
- font-size: 18px;
- color: #24292f;
- font-weight: 600;
- }
- #${PANEL_ID} .md-pr-card {
- border: 1px solid #d0d7de;
- border-radius: 10px;
- padding: 12px;
+ margin-bottom: 8px;
+ color: var(--fgColor-default, #24292f);
}
#${PANEL_ID} .md-pr-card-header {
display: flex;
- gap: 12px;
- align-items: center;
+ gap: 8px;
+ align-items: flex-start;
}
#${PANEL_ID} .md-pr-avatar {
- width: 56px;
- height: 56px;
+ width: 32px;
+ height: 32px;
border-radius: 50%;
- background: #f6f8fa;
- border: 1px solid #d0d7de;
overflow: hidden;
+ background: var(--bgColor-muted, #f6f8fa);
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 600;
- color: #57606a;
+ color: var(--fgColor-muted, #57606a);
+ flex-shrink: 0;
}
#${PANEL_ID} .md-pr-avatar img {
width: 100%;
@@ -182,95 +159,78 @@
object-fit: cover;
}
#${PANEL_ID} .md-pr-name {
- font-size: 18px;
- font-weight: 700;
- color: #1a7f37;
+ font-size: 13px;
+ font-weight: 600;
+ color: var(--fgColor-default, #24292f);
}
#${PANEL_ID} .md-pr-meta {
- margin-top: 6px;
- color: #57606a;
- font-size: 14px;
+ color: var(--fgColor-muted, #57606a);
}
#${PANEL_ID} .md-pr-links {
- margin-top: 6px;
+ margin-top: 2px;
display: flex;
- gap: 12px;
- font-size: 14px;
+ gap: 8px;
}
#${PANEL_ID} .md-pr-link {
- color: #0969da;
- font-weight: 600;
+ color: var(--fgColor-accent, #0969da);
+ text-decoration: none;
}
- #${PANEL_ID} .md-pr-stats {
- margin-top: 12px;
- border: 1px solid #d0d7de;
- border-radius: 8px;
- overflow: hidden;
+ #${PANEL_ID} .md-pr-link:hover {
+ text-decoration: underline;
}
- #${PANEL_ID} .md-pr-stat-row {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 8px 10px;
- border-bottom: 1px solid #d0d7de;
- font-size: 14px;
+ #${PANEL_ID} .md-pr-stats {
+ margin-top: 8px;
}
- #${PANEL_ID} .md-pr-stat-row:last-child {
- border-bottom: none;
+ #${PANEL_ID} .md-pr-stat-item {
+ color: var(--fgColor-default, #24292f);
}
#${PANEL_ID} .md-pr-stat-label {
- color: #57606a;
- text-transform: uppercase;
- letter-spacing: 0.04em;
- font-weight: 600;
- font-size: 11px;
+ color: var(--fgColor-muted, #57606a);
}
- #${PANEL_ID} .md-pr-stat-value {
- font-weight: 700;
- color: #24292f;
+ #${PANEL_ID} .md-pr-stat-sep {
+ margin: 0 4px;
+ color: var(--fgColor-muted, #57606a);
}
#${PANEL_ID} .md-pr-section {
- margin-top: 12px;
+ margin-top: 8px;
}
#${PANEL_ID} .md-pr-section-title {
- font-size: 13px;
+ margin-bottom: 2px;
font-weight: 600;
- color: #57606a;
- text-transform: uppercase;
- letter-spacing: 0.04em;
- margin-bottom: 6px;
+ color: var(--fgColor-muted, #57606a);
}
#${PANEL_ID} .md-pr-ecosystems {
display: flex;
flex-wrap: wrap;
- gap: 6px;
+ gap: 8px;
}
#${PANEL_ID} .md-pr-ecosystem-pill {
- display: inline-flex;
- align-items: center;
- background: #f6f8fa;
- border: 1px solid #d0d7de;
- border-radius: 999px;
- padding: 2px 8px;
- font-size: 13px;
- color: #57606a;
+ color: var(--fgColor-accent, #0969da);
text-decoration: none;
}
+ #${PANEL_ID} .md-pr-ecosystem-pill:hover {
+ text-decoration: underline;
+ }
#${PANEL_ID} .md-pr-project-list {
display: flex;
flex-direction: column;
- gap: 6px;
+ gap: 2px;
}
#${PANEL_ID} .md-pr-project-item {
display: flex;
+ align-items: baseline;
justify-content: space-between;
gap: 8px;
- font-size: 14px;
- color: #24292f;
}
#${PANEL_ID} .md-pr-project-meta {
- color: #57606a;
- font-size: 13px;
+ color: var(--fgColor-muted, #57606a);
+ flex-shrink: 0;
+ }
+ #${PANEL_ID} .md-pr-powered {
+ margin-top: 8px;
+ font-size: 11px;
+ color: var(--fgColor-muted, #57606a);
+ opacity: 0.65;
}
.md-pr-list-indicator {
display: inline-flex;
@@ -289,55 +249,6 @@
.md-pr-list-indicator.md-pr-list-missing {
background: #afb8c1;
}
- #${PANEL_ID} .md-pr-section {
- margin-top: 8px;
- }
- #${PANEL_ID} .md-pr-section-title {
- font-size: 11px;
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.04em;
- color: #6b7280;
- margin-bottom: 4px;
- }
- #${PANEL_ID} .md-pr-stats {
- display: grid;
- grid-template-columns: repeat(3, minmax(0, 1fr));
- gap: 6px;
- }
- #${PANEL_ID} .md-pr-stat {
- background: #ffffff;
- border: 1px solid #e5e7eb;
- border-radius: 8px;
- padding: 6px;
- text-align: center;
- }
- #${PANEL_ID} .md-pr-stat-label {
- font-size: 10px;
- text-transform: uppercase;
- letter-spacing: 0.05em;
- color: #6b7280;
- }
- #${PANEL_ID} .md-pr-stat-value {
- font-size: 13px;
- font-weight: 600;
- color: #111827;
- }
- #${PANEL_ID} .md-pr-pill {
- display: inline-flex;
- align-items: center;
- padding: 2px 6px;
- border-radius: 999px;
- background: #eef2ff;
- color: #3730a3;
- font-size: 11px;
- margin-right: 4px;
- margin-bottom: 4px;
- }
- #${PANEL_ID} .md-pr-link {
- color: #0a3069;
- font-weight: 600;
- }
#${BADGE_ID} {
display: inline-flex;
align-items: center;
@@ -360,10 +271,77 @@
document.head.appendChild(style);
}
+ function clearMountRetry() {
+ if (!state.mountRetryTimer) return;
+ window.clearTimeout(state.mountRetryTimer);
+ state.mountRetryTimer = null;
+ }
+
+ function scheduleMountRetry() {
+ if (state.mountRetryTimer || state.mountRetryCount >= 40 || !isPullDetailPage()) return;
+ state.mountRetryTimer = window.setTimeout(() => {
+ state.mountRetryTimer = null;
+ state.mountRetryCount += 1;
+ ensurePanel();
+ }, 250);
+ }
+
+ function findSidebar() {
+ const selectors = [
+ ".discussion-sidebar",
+ ".Layout-sidebar .discussion-sidebar",
+ ".Layout-sidebar"
+ ];
+
+ for (const selector of selectors) {
+ const element = document.querySelector(selector);
+ if (element) return element;
+ }
+
+ return null;
+ }
+
+ function findReviewersSection(sidebar) {
+ if (!sidebar) return null;
+ const byClass = sidebar.querySelector(".discussion-sidebar-item.sidebar-reviewers");
+ if (byClass) return byClass;
+
+ const headings = sidebar.querySelectorAll(".discussion-sidebar-heading, h2, h3, h4");
+ for (const heading of headings) {
+ if (heading.textContent.trim().toLowerCase() !== "reviewers") continue;
+ const item = heading.closest(
+ ".discussion-sidebar-item, .js-discussion-sidebar-item, [class*='sidebar-item'], section"
+ );
+ if (item) return item;
+ }
+
+ return null;
+ }
+
+ function mountPanel(wrapper) {
+ const sidebar = findSidebar();
+ if (!sidebar) return false;
+
+ const reviewersSection = findReviewersSection(sidebar);
+ if (reviewersSection) {
+ if (reviewersSection.nextElementSibling !== wrapper) {
+ reviewersSection.insertAdjacentElement("afterend", wrapper);
+ }
+ return true;
+ }
+
+ if (wrapper.parentElement !== sidebar) {
+ sidebar.appendChild(wrapper);
+ }
+ return true;
+ }
+
function ensurePanel() {
const existing = document.getElementById(PANEL_ID);
if (!isPullDetailPage()) {
if (existing) existing.remove();
+ clearMountRetry();
+ state.mountRetryCount = 0;
removeBadge();
return;
}
@@ -371,16 +349,23 @@
ensureStyles();
if (existing) {
+ if (!mountPanel(existing)) {
+ scheduleMountRetry();
+ return;
+ }
+ clearMountRetry();
+ state.mountRetryCount = 0;
updatePanel(existing);
return;
}
const wrapper = document.createElement("div");
wrapper.id = PANEL_ID;
+ wrapper.className = "discussion-sidebar-item";
wrapper.innerHTML = `
<div class="md-pr-panel">
<div class="md-pr-header">
- <span></span>
+ <h3 class="discussion-sidebar-heading md-pr-heading">Contributor insights</h3>
<button class="md-pr-gear" type="button" aria-label="Settings">
<span aria-hidden="true">⚙</span>
</button>
@@ -391,10 +376,11 @@
<div class="md-pr-details"></div>
</div>
<div class="md-pr-settings ${state.config.settingsOpen ? "md-pr-open" : ""}">
- <label>API key</label>
- <input type="password" data-config="apiKey" />
+ <label for="${PANEL_ID}-api-key">API key</label>
+ <input id="${PANEL_ID}-api-key" type="password" data-config="apiKey" />
<div class="md-pr-status"></div>
</div>
+ <div class="md-pr-powered">Powered by the Open Source Explorer</div>
</div>
`;
@@ -417,7 +403,14 @@
});
});
- document.body.appendChild(wrapper);
+ if (!mountPanel(wrapper)) {
+ scheduleMountRetry();
+ return;
+ }
+
+ clearMountRetry();
+ state.mountRetryCount = 0;
+
updatePanel(wrapper);
}
@@ -463,8 +456,8 @@
statusBlocks.forEach((status) => {
status.innerHTML = "";
});
- summary.innerHTML = `No profile found on the Open Source Explorer. <a class="md-pr-link" href="https://explore.market.dev" target="_blank" rel="noopener noreferrer">Explore</a>`;
- details.innerHTML = "";
+ summary.textContent = "No contributor profile found yet.";
+ details.innerHTML = `<a class="md-pr-link" href="https://explore.market.dev" target="_blank" rel="noopener noreferrer">Browse directory</a>`;
return;
}
@@ -566,7 +559,7 @@
${avatarUrl ? `<img src="${avatarUrl}" alt="${name}" />` : name.slice(0, 1).toUpperCase()}
</div>
<div>
- <div class="md-pr-name">${name}</div>
+ <div class="md-pr-name"><a class="md-pr-link" href="https://github.com/${encodeURIComponent(username)}" target="_blank" rel="noopener noreferrer">${name}</a></div>
<div class="md-pr-meta">@${username}${location ? ` · ${location}` : ""}</div>
<div class="md-pr-links">
<a class="md-pr-link" href="https://github.com/${encodeURIComponent(username)}" target="_blank" rel="noopener noreferrer">GitHub</a>
@@ -578,14 +571,9 @@
<div class="md-pr-stats">
${stats
.map(
- (stat) => `
- <div class="md-pr-stat-row">
- <span class="md-pr-stat-label">${stat.label}</span>
- <span class="md-pr-stat-value">${stat.value}</span>
- </div>
- `
+ (stat) => `<span class="md-pr-stat-item"><span class="md-pr-stat-label">${stat.label}:</span> ${stat.value}</span>`
)
- .join("")}
+ .join('<span class="md-pr-stat-sep">·</span>')}
</div>
` : ""}
${ecosystemNames.length ? `
Implementing visible sidebar selection
Running syntax checks
node --check content.js(empty result)
node --check bookmarklet.js(empty result)
Preparing fix instructions
git status --shortM bookmarklet.js M content.js
Crafting concise fix instructions
Got it — I just fixed that.
I updated the mount logic so it no longer silently fails when GitHub renders the sidebar late or uses a different sidebar container.
content.js and bookmarklet.js.Please do this once:
chrome://extensionsCmd+Shift+R)If it still doesn’t appear, send me what this returns in DevTools console and I’ll patch immediately:
i ju[Image 1]
Refining sidebar and reviewers detection
Found 3 matches
/Users/tarunsachdeva/code/market.dev/explorer-chrome-extension/content.js:
Line 289: function findSidebar() {
Line 315: function findReviewersSection(sidebar) {
Line 332: function mountPanel(wrapper) {Planning function patching
Designing resilient sidebar selectors
Verifying argument updates in calls
node --check content.js(empty result)
node --check bookmarklet.js(empty result)
Suggesting diagnostic checks
No files found
No files found
Improving fallback panel insertion
node --check content.js(empty result)
node --check bookmarklet.js(empty result)
Summarizing fix and next steps
Thanks — that screenshot was super helpful.
sidebar: null means your GitHub PR view doesn’t use the old .discussion-sidebar classes, so the previous selector path missed it.
I just patched this again in both content.js and bookmarklet.js:
Please do this once:
chrome://extensionsCmd+Shift+R)If it still doesn’t show, run this in console and send me output:
great. now just drop the "Github" and "market.dev" links
Found 4 matches
/Users/tarunsachdeva/code/market.dev/explorer-chrome-extension/content.js:
Line 172: #${PANEL_ID} .md-pr-links {
Line 666: <div class="md-pr-links">
Line 667: <a class="md-pr-link" href="https://github.com/${encodeURIComponent(username)}" target="_blank" rel="noopener noreferrer">GitHub</a>
Line 668: <a class="md-pr-link" href="${profileUrl}" target="_blank" rel="noopener noreferrer">Market.dev</a>Found 4 matches
/Users/tarunsachdeva/code/market.dev/explorer-chrome-extension/bookmarklet.js:
Line 150: #${PANEL_ID} .md-pr-links {
Line 623: <div class="md-pr-links">
Line 624: <a class="md-pr-link" href="https://github.com/${encodeURIComponent(username)}" target="_blank" rel="noopener noreferrer">GitHub</a>
Line 625: <a class="md-pr-link" href="${profileUrl}" target="_blank" rel="noopener noreferrer">Market.dev</a>Planning removal of links section
Planning links removal
Reviewing CSS cleanup