Update: https://dev.to/juliankominovic/update-live-feedback-script-35oi

Take a look at the demo video here.

<script
  repo="{your repo}"
  owner="{repo owner}"
  async
  src="https://cdn.jsdelivr.net/gh/JulianKominovic/live-feedback@latest/build/bundle.js"
/>

<script

Today I'm going to introduce a new Google Extension that I've been working on the past few weeks.

Live feedback is an extension made for Google Chrome browser that allows you to get feedback on your website in real time from your developers, designers, and clients. It is a simple and easy-to-use tool that helps you to improve your website by getting feedback right on the page.

The extension is designed to be simple and intuitive, so you can start using it right away without any training by following these simple steps.

It's very similar to Vercel Comments, but it's open source and it's not tied to any specific platform, so you can use it everywhere, even on your local development environment.

Disclaimer: The extension is under development and it's not ready for production yet. I'm still working on it and adding new features so you may encounter some bugs or issues while using it. Some major changes may happen in the future as well. If you have any feedback or suggestions, please let me know in the comments.

What does it do?

The extension allows you to select an element on the page and add a comment to it.
When you submit the feedback, a screenshot is taken automatically, and the feedback is sent to whatever Github repository you have configured in the extension settings as an issue. You can then view the feedback on Github and discuss it with your team and you also can see the feedback directly on the page as a bubble.

Anyone with access to the repository will see the feedback bubble and will be able to comment on it. This makes it easy to collaborate with your team and improve your website. Just make sure you both have the extension installed and configured with the same repository (since the extension uses Github Issues as a backend).

In case you are reviewing a pull request, you can also link the issue to the pull request, so you can use this tool to review pull requests as well.

How does it work?

1. The extension injects a small script into the page you are viewing.
2. A toolbar is displayed at the bottom of the page.
3. Click on the toolbar + button to start adding feedback.
4. Select an element on the page.
5. Leave a comment.
6. Submit the feedback.
7. 2 screenshots are taken: one of the whole page and one of the selected element. They will be uploaded to your Github repository master branch inside .github/feedback folder.
8. A new issue is created in your Github repository with the feedback and the screenshots attached.
9. In the issue, you can see the feedback, the screenshots, and the comments. You can discuss the feedback with your team in the issue comments.

Please DO NOT MODIFY the issue. The issue saves a lot of internal data that the extension uses to display the feedback. If you modify the issue, the extension will not be able to display the feedback correctly.

How to install it?

Follow these simple steps to install and configure the extension.

Features

• Smart HTML Element tracking: Your feedback will be linked to the specific element on the page.
• Commenting: You can add comments to the feedback to provide more context.
• Screenshot: Screenshots are taken automatically when you submit feedback.
• No backend required: The extension uses Github Issues as a backend, so you don't need to set up a server.
• Open source: The extension is open source, so you can contribute to its development.
• Trusthworthy: The extension only requires the permissions it needs to work, and it doesn't collect any personal data. Any data collected is stored on your Github repository. You can see every request the extension makes in the network tab of the developer tools.

Checklist

I'm still working on the extension, and I plan to add more features in the future.
If you have any feedback or suggestions, please let me know in the comments.
You may encounter some bugs or issues while using the extension. If you do, please report them on the repository.

Soon I will be adding a roadmap to the repository so you can see what features are planned and what features are already implemented in detail.

As of now, the extension has the following features:

• [x] HTML Element tracking
  • [x] CSS Selector system: list of selectors to find the element and kind of consensus criteria to find the element.
  • [x] Typical display attributes: display, visibility, opacity, and pointer-events.
  • [x] Feedback coordinates: x and y coordinates of the element and viewport scroll position.
  • [] Efficient tracking: stop using polling and use MutationObserver instead. Although it's not a big deal since the extension is not running all the time and didn't have any performance issues.
  • [] Lax URL matching: stop making a === comparison and use a more scoped comparison.
  • [] Width and height recovery: recover width and height of the viewport of whoever submitted the feedback.
  • [] Scroll position recovery: recover scroll position of the viewport of whoever submitted the feedback.
• [x] Feedback on element: clicking on an element.
• [x] Feedback on text selection: selecting text.
• [x] Toolbar
  • [x] Toolbar position: bottom of the page.
  • [x] Toolbar styles: simple and clean.
  • [x] Draggable toolbar: drag the toolbar to any position on the page.
  • [x] Toolbar features:
  • [x] Add feedback button: add feedback on an element.
  • [x] Add feedback on text selection button: add feedback on text selection.
  • [x] Show async tasks semaphores: show the status of the async tasks.
  • [] Close toolbar button: close the toolbar.
• [x] Async tasks status: show the status of the async tasks the extension is running.
  • [x] Loading: when the extension is loading.
  • [x] Success: when the extension has finished successfully.
  • [x] Error: when the extension has finished with an error.
  • [] Improve the status messages.
  • [] Add a timeout to the async tasks.
• [] Add settings page
• [] Mentions
  • [] When people mentioned me in the comments.
  • [] When people mentioned me in the issue.
  • [] Issues related to me.
• [] Threads
  • [] Resolve threads.
  • [] List all threads.
• [x] Commenting
• [x] Automatic screenshots
• [x] No backend required
• [x] Github integration
  • [x] Create issue
  • [x] Upload screenshots
  • [x] Link issue to pull request
  • [x] Get issue comments
  • [x] Get repository visibility
  • [] Mentions
  • [] Get user mentions
  • [] Get unread notifications