Monitor changes to specific DOM elements on web pages, with notifications via browser alerts or webhooks.
- Visual element selection (hover to highlight)
- Multi-project management
- Background periodic monitoring
- Configurable page load delay for Ajax/async content
- Browser notifications + Webhook notifications
- Complete logging system
- Data import/export
- Open Chrome browser and navigate to
chrome://extensions/ - Enable "Developer mode"
- Click "Load unpacked extension"
- Select the
div-pingfolder
- Open the web page you want to monitor
- Click the extension icon
- Click "Select Element"
- Select the element to monitor
- Configure monitoring parameters and save
Supported variables: {{projectName}}, {{url}}, {{selector}}, {{oldContent}}, {{newContent}}, {{timestamp}}
GET Request:
https://api.example.com/notify?name={{projectName}}&content={{newContent}}
POST Request:
{
"text": "{{projectName}} change detected: {{newContent}}"
}⚠️ Variables in JSON templates should not be quoted:{"msg": {{content}}}✓{"msg": "{{content}}"}✗⚠️ Minimum monitoring interval: 60 seconds (Chrome Alarms API limitation)- ⏱️ Page load delay: 0-60 seconds (for Ajax/async content, adds to total check time)
- ✅ Built-in security: SSRF protection, redirect blocking, header injection prevention
Project save failed? Reload the extension at chrome://extensions/
Monitoring not working? Check refresh interval and CSS selector validity
Element shows empty content? Try adding a page load delay (0.5-5 seconds) for Ajax/async content
Debugging: chrome://extensions/ → Service Worker to view logs
npm test # Run tests
npm run test:coverage # Generate coverage reportAll 219 tests passing with comprehensive coverage for SSRF validation, variable replacement, storage operations, i18n, race conditions, tab cache, webhook rate limiting, load delay validation, and edge cases.
MIT License