Chrome Extension with Chatgpt for Twitter
From time to time we have seen some people abusing on the internet especially on social media like twitter which might be really unpleasant for the readers. It makes me ponder that is there any way to intimate the user before they read the tweets. With the advent of chatgpt , it stroke me that such model can be a way to do that. Apart of chatgpt I have used following model for detecting toxicity in the tweets. (https://huggingface.co/unitary/toxic-bert). I have kept all my code in this repository.
As indicated in the above diagram, chrome extension extracts tweets from the tweeter webpage, pass it to the server through an API call, fetch result and then display those result by modifying the webpage as well as populates result in a popup window. This seems like a reasonable idea now let us discuss how chrome plugin actually works.
For creating chrome plugins, following files needs to be created:-
- manifest.json
- content.js
- background.js (optional I have not created for this plugin)
- popup.js (optional)
- popup.html (optional)
Understanding Manifest.json
In this file all the metadata of the plugin is stored.
As we can observe in the above code snippet, manifest file has all the required permission as well as it has information about popup script and content script.
Understanding content script
Content script are javascript file which runs in the context of webpage and extracts information by utilizing DOM (Document object model)
Above code snippet indicates the use of DOM to extract information from the webpage. We can modify DOM and that changes will be reflected in the webpage.
Understanding popup.js
This file populates popup.html with the result. As discussed previously content script does all the extraction so there needs to be some link between popup script and content script to share result. This link is stablished by chrome storage.
In the above figure we can observe that content script is storing results in chrome storage which is being fetched by the popup script. Last two lines of popup script indicates modification in the popup html.
Server
In the server side we are performing following task
- Checking toxicity of tweet- https://huggingface.co/unitary/toxic-bert
- tweet sentiment analysis — https://platform.openai.com/examples
- Grammar feedback- https://platform.openai.com/examples
- Topic extraction- https://platform.openai.com/examples
Final Result
For each tweet displayed in the webpage , its toxicity , sentiment and keywords will be evaluated and extracted.
It also gives feedback in a popup window on what you are writing.
Please note I have used scroll as an event so these function gets activated only if you scroll. UI of this app is also not good but in the later versions it will get better.
