Skip to content

Commit 343d03e

Browse files
devm33devm33
authored
Merge pull request #1 from devm33/copilot/add-github-ui-modifications
2 parents 45a8f22 + 6c1e7f6 commit 343d03e

10 files changed

Lines changed: 812 additions & 2 deletions

File tree

‎README.md‎

Lines changed: 75 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,75 @@
1-
# github-ui-mods
2-
set of small mods for the github ui
1+
# GitHub UI Mods
2+
3+
A Chrome extension that adds useful modifications to the GitHub pull request interface.
4+
5+
## Features
6+
7+
### 1. Copy PR Link Button
8+
Adds a button next to the PR title that copies the PR title and link to your clipboard in the format: `PR Title: https://link-to-pr`
9+
10+
### 2. Request Copilot Review Button (Draft PRs)
11+
When viewing a draft PR, adds a "Request Review" button next to the Copilot reviewer link (`/apps/copilot-pull-request-reviewer`) to easily request a review while the PR is still in draft status.
12+
13+
## Installation
14+
15+
### Load as Unpacked Extension (For Development/Testing)
16+
17+
1. Clone or download this repository:
18+
```bash
19+
git clone https://github.com/devm33/github-ui-mods.git
20+
cd github-ui-mods
21+
```
22+
23+
2. Open Chrome and navigate to `chrome://extensions/`
24+
25+
3. Enable "Developer mode" by toggling the switch in the top-right corner
26+
27+
4. Click "Load unpacked" button
28+
29+
5. Select the `github-ui-mods` directory (the one containing `manifest.json`)
30+
31+
6. The extension should now be installed and active!
32+
33+
### Verify Installation
34+
35+
Navigate to any GitHub pull request page. You should see:
36+
- A "Copy PR Link" button next to the PR title
37+
- (If it's a draft PR) A "Request Review" button next to the Copilot reviewer
38+
39+
## Usage
40+
41+
### Copy PR Link
42+
1. Navigate to any GitHub pull request
43+
2. Click the "Copy PR Link" button next to the PR title
44+
3. The PR title and URL will be copied to your clipboard
45+
4. The button will show "Copied!" briefly to confirm
46+
47+
### Request Copilot Review (Draft PRs)
48+
1. Navigate to a GitHub pull request that is in draft status
49+
2. Find the "Request Review" button next to the Copilot reviewer link
50+
3. Click the button to request a review from Copilot
51+
4. The button will show "Requested!" briefly to confirm
52+
53+
## Development
54+
55+
The extension consists of:
56+
- `manifest.json` - Extension configuration
57+
- `content.js` - Content script that modifies GitHub PR pages
58+
- `icon*.png` - Extension icons in various sizes
59+
60+
To modify the extension:
61+
1. Edit the files as needed
62+
2. Go to `chrome://extensions/`
63+
3. Click the refresh icon on the extension card
64+
4. Refresh any GitHub PR pages to see your changes
65+
66+
## Browser Compatibility
67+
68+
This extension is built for Chrome (Manifest V3) but should also work in:
69+
- Microsoft Edge
70+
- Brave
71+
- Other Chromium-based browsers
72+
73+
## License
74+
75+
See LICENSE file for details.

‎SUMMARY.md‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
# Chrome Extension Summary
2+
3+
## Overview
4+
This Chrome extension adds two useful features to GitHub pull request pages:
5+
6+
### Feature 1: Copy PR Link Button
7+
- **Location**: Next to the PR title
8+
- **Action**: Copies PR title and URL to clipboard in format: `PR Title: https://link-to-pr`
9+
- **Feedback**: Shows "Copied!" with green checkmark on success, "Failed" with error icon on failure
10+
- **Works on**: All PR pages (draft, open, closed, merged)
11+
12+
### Feature 2: Request Copilot Review Button
13+
- **Location**: Next to the Copilot reviewer link (`/apps/copilot-pull-request-reviewer`)
14+
- **Action**: Automates requesting a review from Copilot
15+
- **Feedback**: Shows "Requested!" on success, or helpful message if manual action needed
16+
- **Works on**: Only draft PRs (button only appears when PR has "Draft" status)
17+
18+
## Technical Implementation
19+
20+
### Files Created
21+
1. **manifest.json** - Chrome Extension Manifest V3 configuration
22+
- Permissions: `clipboardWrite`
23+
- Content scripts: Runs on GitHub PR pages (`https://github.com/*/*/pull/*`)
24+
- Icons: 16x16, 48x48, 128x128 PNG files
25+
26+
2. **content.js** - Main content script (220+ lines)
27+
- Implements both features with proper error handling
28+
- Uses MutationObserver to handle dynamic content loading
29+
- Provides visual feedback for all actions
30+
- No external dependencies
31+
32+
3. **Icon files** (icon16.png, icon48.png, icon128.png)
33+
- Simple branded icons for the extension
34+
35+
4. **test.html** - Local test page
36+
- Simulates GitHub PR page structure
37+
- Allows testing without real GitHub access
38+
- Includes automatic detection of extension features
39+
40+
5. **TESTING.md** - Comprehensive testing guide
41+
- Installation instructions
42+
- Feature testing scenarios
43+
- Troubleshooting guide
44+
- Debugging tips
45+
46+
6. **README.md** - User documentation
47+
- Feature descriptions
48+
- Installation steps
49+
- Usage instructions
50+
- Development guidelines
51+
52+
## Key Design Decisions
53+
54+
1. **Minimal Permissions**: Only requests `clipboardWrite` permission
55+
2. **No External Dependencies**: Pure JavaScript, no libraries
56+
3. **GitHub Theme Integration**: Uses GitHub's button classes and color scheme
57+
4. **Robust Error Handling**: Graceful fallbacks and clear error messages
58+
5. **Visual Feedback**: All actions provide immediate visual confirmation
59+
6. **Dynamic Content Support**: Handles GitHub's AJAX page updates
60+
7. **Manifest V3**: Uses latest Chrome extension standard
61+
62+
## Security
63+
- ✅ CodeQL scan completed with 0 vulnerabilities
64+
- ✅ No sensitive data access
65+
- ✅ Scoped to GitHub PR pages only
66+
- ✅ No network requests
67+
- ✅ No background scripts
68+
69+
## Browser Compatibility
70+
- ✅ Chrome (primary target)
71+
- ✅ Microsoft Edge (Chromium)
72+
- ✅ Brave (Chromium)
73+
- ✅ Other Chromium-based browsers
74+
75+
## Installation Size
76+
- Total: ~20 KB
77+
- Code: ~15 KB (manifest.json + content.js)
78+
- Icons: ~5 KB (3 PNG files)
79+
80+
## Testing Strategy
81+
1. Local HTML test page for initial validation
82+
2. Manual testing on actual GitHub PR pages
83+
3. Test both draft and non-draft PRs
84+
4. Verify clipboard functionality
85+
5. Check visual feedback and error handling
86+
87+
## Future Enhancements (Optional)
88+
- Add options page for customization
89+
- Support for GitHub Enterprise
90+
- Keyboard shortcuts
91+
- More copy format options
92+
- Additional reviewer automation features
93+
94+
## Notes
95+
- The "Request Review" feature attempts to automate UI interactions
96+
- GitHub may change their DOM structure, requiring selector updates
97+
- Extension provides helpful messages when automation isn't possible
98+
- Users can always fall back to manual review requests

‎TESTING.md‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
# Testing & Verification Guide
2+
3+
## Extension Verification Checklist
4+
5+
### Installation Verification
6+
- [ ] Extension loads without errors in Chrome
7+
- [ ] Extension icon appears in Chrome toolbar
8+
- [ ] No errors in Chrome DevTools console
9+
- [ ] Extension shows as active in `chrome://extensions/`
10+
11+
### Feature 1: Copy PR Link Button
12+
**Test Scenarios:**
13+
14+
1. **Regular PR (Open)**
15+
- Navigate to: Any open GitHub pull request
16+
- Expected: "Copy PR Link" button appears next to PR title
17+
- Action: Click the button
18+
- Expected:
19+
- Text copied to clipboard in format: `{PR Title}: {PR URL}`
20+
- Button shows "Copied!" with green checkmark
21+
- Button returns to normal state after 2 seconds
22+
23+
2. **Draft PR**
24+
- Navigate to: Any draft GitHub pull request
25+
- Expected: Same behavior as regular PR for Feature 1
26+
27+
3. **Closed/Merged PR**
28+
- Navigate to: A closed or merged pull request
29+
- Expected: Same behavior - button should still work
30+
31+
### Feature 2: Request Copilot Review Button
32+
**Test Scenarios:**
33+
34+
1. **Draft PR with Copilot Available**
35+
- Navigate to: A draft pull request where Copilot is available
36+
- Expected: "Request Review" button appears next to Copilot reviewer link
37+
- Action: Click the button
38+
- Expected:
39+
- Attempts to open reviewer selection UI
40+
- Button shows "Requested!" with green checkmark
41+
- Button returns to normal state after 2 seconds
42+
43+
2. **Non-Draft PR**
44+
- Navigate to: An open (non-draft) pull request
45+
- Expected: "Request Review" button does NOT appear
46+
- Reason: Feature only activates on draft PRs
47+
48+
3. **Draft PR without Copilot**
49+
- Navigate to: A draft PR where Copilot is not listed as a reviewer option
50+
- Expected: Button does not appear (no Copilot link to attach to)
51+
52+
### Cross-Browser Testing
53+
- [ ] Chrome (primary target)
54+
- [ ] Microsoft Edge (Chromium-based)
55+
- [ ] Brave (Chromium-based)
56+
57+
### Edge Cases
58+
- [ ] Button positioning is correct and doesn't break layout
59+
- [ ] Buttons don't duplicate on dynamic page updates
60+
- [ ] Extension works with GitHub's dark and light themes
61+
- [ ] Extension works on private repositories
62+
- [ ] Extension works on organization repositories
63+
- [ ] Copy function works correctly with special characters in PR title
64+
- [ ] Extension doesn't interfere with other GitHub functionality
65+
66+
## Manual Test Results
67+
68+
### Test Environment
69+
- Browser: _____________
70+
- Browser Version: _____________
71+
- Date Tested: _____________
72+
- Tester: _____________
73+
74+
### Feature 1 Results
75+
| Test Case | Status | Notes |
76+
|-----------|--------|-------|
77+
| Button appears | ⬜ Pass / ⬜ Fail | |
78+
| Copy to clipboard works | ⬜ Pass / ⬜ Fail | |
79+
| Format is correct | ⬜ Pass / ⬜ Fail | |
80+
| Visual feedback works | ⬜ Pass / ⬜ Fail | |
81+
82+
### Feature 2 Results
83+
| Test Case | Status | Notes |
84+
|-----------|--------|-------|
85+
| Button appears on draft PR | ⬜ Pass / ⬜ Fail | |
86+
| Button hidden on non-draft PR | ⬜ Pass / ⬜ Fail | |
87+
| Click action works | ⬜ Pass / ⬜ Fail | |
88+
| Visual feedback works | ⬜ Pass / ⬜ Fail | |
89+
90+
## Troubleshooting
91+
92+
### Extension not loading
93+
1. Check that Developer mode is enabled in `chrome://extensions/`
94+
2. Verify all files (manifest.json, content.js, icons) are present
95+
3. Check for errors in the Extensions page
96+
4. Try removing and re-adding the extension
97+
98+
### Buttons not appearing
99+
1. Open DevTools console (F12) and check for JavaScript errors
100+
2. Verify you're on a GitHub pull request page (URL: github.com/*/*/pull/*)
101+
3. Refresh the page
102+
4. Check if GitHub has changed their DOM structure (selectors might need updating)
103+
104+
### Copy to clipboard not working
105+
1. Check browser permissions for clipboard access
106+
2. Try on a different GitHub PR page
107+
3. Check DevTools console for errors
108+
4. Ensure the page is loaded over HTTPS
109+
110+
### Request Review button not working
111+
1. Verify the PR is actually in draft status
112+
2. Check that Copilot reviewer is available on the repository
113+
3. Check DevTools console for errors
114+
4. May need to manually adjust based on GitHub's current UI structure
115+
116+
## Debugging Tips
117+
118+
### View Extension Console Logs
119+
1. Go to `chrome://extensions/`
120+
2. Find "GitHub UI Mods"
121+
3. Click "Inspect views: background page" or inspect the content script from DevTools
122+
123+
### Inspect Content Script
124+
1. Open any GitHub PR page
125+
2. Open DevTools (F12)
126+
3. Go to Console tab
127+
4. Look for messages from the extension
128+
5. Use Sources tab to set breakpoints in content.js
129+
130+
### Test on Local HTML
131+
1. Open `test.html` in your browser
132+
2. Verify buttons appear on the simulated GitHub page
133+
3. This tests the extension logic without needing actual GitHub access
134+
135+
## Known Limitations
136+
137+
1. **Request Review functionality**: This feature attempts to automate clicking through GitHub's UI. If GitHub changes their DOM structure, this may break and require updates to the selectors in content.js.
138+
139+
2. **Dynamic content**: GitHub uses dynamic content loading. The extension uses MutationObserver to handle this, but there may be edge cases where buttons don't appear immediately.
140+
141+
3. **Permissions**: The extension only has access to GitHub pull request pages (for security and performance).
142+
143+
## Reporting Issues
144+
145+
If you encounter issues:
146+
1. Check the Troubleshooting section above
147+
2. Document the issue with:
148+
- Browser and version
149+
- GitHub page URL (without sensitive info)
150+
- Steps to reproduce
151+
- Console errors (if any)
152+
- Screenshots (if applicable)

0 commit comments

Comments
 (0)