Create browser extension for easier submissions

[kepae]

The submission page accepts a url query parameter and will execute the fetch + parse logic for incident submissions if provided. This functionality can be used to create a helpful Chrome or Firefox extension that allows users to submit articles in less clicks from wherever they are browsing or reading.

---

Original:

We should consider providing a simple endpoint building on our submission page (/apps/submit) that takes a URL as a query parameter and automatically executes the fetch + parse logic, returning a pre-populated submission.

This would allow users browsing other webpages to use simple "bookmarklet" that captures the user's current URL (e.g. a journalistic article) and pass it to a GET to the auto submission endpoint.

EDIT: We already have this functionality built into the Submission Wizard. :-) https://github.com/responsible-ai-collaborative/aiid/blob/b260d0fd0b0a2838e5988f5946a45b3d3fa7edc0/site/gatsby-site/src/components/submissions/SubmissionWizard.js#L13

@lmcnulty describes how to create the bookmarklet:

We can prefill the submission url with the url query parameter, and it automatically fetches the article on pageload, so we can get most of the of the way there with this:

javascript:(() => {window.open(`https://incidentdatabase.ai/apps/submit/?url=${window.location}`)})()

^ If you select this and drag it into your bookmarks it should create a bookmarklet. I would put it inside a link so it could have a default title, but GitHub sensibly blocks links with JavaScript urls.

---

Previously, users created similar extensions, having to jump through hoops to navigate to AIID's submission page and populate fields, but also seeing an opportunity to use an LLM in the process to populate even more details (subject to review by the user). (h/t @samikshakale !)

repo: chrome-AIID-autofill-plugin

blog post:

I developed an extension with autofill features for the AIID website to combine the powers of generative AI with a useful, efficient tool. This tool will allow a user to easily grab information of a news article given a url and quickly autofill the designated fields with just the click of a button! [...] How does it work? This extension prompts the user to enter a url (corresponding to a news article describing an AI incident). Then, it will send a request to the API endpoint that is locally hosted in order to perform the following actions given the url:

• webscraping to get html text content of the news article
  • using a LLM to summarize the text content
  • using another question-answering LLM to probe the summary for the answers to 3 questions: alleged deployer, alleged developer, and alleged harmed parties.

Finally, the extension will autofill the fields marked in red on the figure above with the responses returned by the API request: incident description (i.e. summary), alleged deployer, alleged developer, and alleged harmed parties.

---

Also inspired by this awesome classroom study done by Feffer (@mfeffer), Martelaro (@nikmart), and Heidari: The AI Incident Database as an Educational Tool to Raise Awareness of AI Harms: A Classroom Exploration of Efficacy, Limitations, & Future Improvements

Among other helpful observations, they write:

Our study suggests that AIID is a useful resource for raising awareness of AI harms to students, but there is room for improvement. First, considering the fact that our students were able to submit new reports found using their social media, one avenue of improvement consists of creating tools to integrate reporting with social media feeds, perhaps by making it possible to report incidents via a browser plugin and at the click of a button.

[lmcnulty]

We can prefill the submission url with the url query parameter, and it automatically fetches the article on pageload, so we can get most of the of the way there with this:

javascript:(() => {window.open(`https://incidentdatabase.ai/apps/submit/?url=${window.location}`)})()

^ If you select this and drag it into your bookmarks it should create a bookmarklet. I would put it inside a link so it could have a default title, but GitHub sensibly blocks links with JavaScript urls.

---

It would be kind of nice to submit a link without having to open the submission form. I think that would work for submitting a bare link akin to our quick submission form on the landing page, but I'm not sure how well it would work with automatic parsing of the article. Parsing submission contents from arbitrary HTML is inherently fragile, so we would have to handle the case where it fails.

Maybe the UX could be – a browser addon/bookmarklet makes an HTTP request to a backend endpoint specifying the current URL. If the content gets extracted successfully, then the browser addons/bookmarklet shows an unobtrusive success indicator. If it fails, then it offers to open the form for manual entry. If the user declines, then the url just gets submitted as a bare link.

[lmcnulty]

Incidentally, if we do decide to make browser addon, I'd be eager to work on it. "Learn how to make and publish a browser addon" has been on my to-do list for years now, but I never get around to it because I can generally accomplish what I want with less overhead using bookmarklets and userscripts. But those are much worse for the purpose of sharing with other people.

[kepae]

Consider this user delighted – that parameter functionality already exists, cool. I should have checked out the code myself.

Now as you suggest, we should package it into a user-friendly interface because bookmarklets – while convenient for people comfortable running JS one-offs – aren't a convenient interface for sharing and pointing others to using. People are familiar with browser extensions.

Let's rename this issue for scoping a browser extension and prioritize it amongst the backlog.

[samikshakale]

Hi! I built the chrome extension you referenced in the post. I'm curious about how you will be adding on this functionality that I developed and would like to contribute my expertise in any way. I would be happy to collaborate with you and @lmcnulty on building this browser extension for the AIID. Let me know if that is something you would be interested in and maybe we can set up a call? Thanks!

[kepae]

Hi Samiksha! Collaborating on an official AIID browser extension would be great. Would you like care to join our Slack channel and we can set up time for a quick call there?

[samikshakale]

Just submitted the form!

[kepae]

This task was largely completed and resulted in this repository and minimalist extension: https://github.com/responsible-ai-collaborative/aiid-browser-extension

We will roll it out after finishing up other loose ends and when we are ready to support it more formally:

• https://github.com/responsible-ai-collaborative/aiid/issues/3020