Create a Natural Language Processing Chrome extension
Use Natural Language Processing to summarize text
In this guide we are going to create Blinknotes, a lightweight app that uses NLP to summarize anything from news articles, research papers, blog posts, or long comments. We’ll discuss the defining aspects of a Chrome extension, implement solutions to edge cases, and adhere to the conventions imposed by the Chromium developers.
Manifest
Icons
Paint.net is great for basic image editing, it has most of the functionality of photoshop but is quick to learn and free. I used it to create the banner and 16x16, 32x32, 48x48, and 128x128 pixel files.
Options Menu
Relatively straightforward, define the options HTML file in the manifest and add corresponding JS/CSS.
Background Script
The general pattern is one background script per browser instance. The background script can handle almost any browser event including installing the app, opening a new tab, closing a tab, updating a URL, right-clicking the context menu, but it does not have access to the current tab’s DOM.
This background script connects to a text summarization API with 2 endpoints, depending on highlighted text or entire article. It will use the chrome storage to determine the length parameter, and send either a URL or raw text. Upon firing and receiving a response from the API, the background script will update the DOM by sending messages to listeners on the content script.
Content Script
A content script can be run on any single tab, and has access to its page’s DOM. Content scripts are either injected into the tab through the background script, or defined in the manifest to automatically run on a specific URL pattern. For this app we do manual injections, using the content script to create and update a temporary modal element on the page.
This content script creates a listener that handles a draggable modal on the page. Depending on the type of message sent to the listener, create_window, request_succeed, or request_failed, the listener will create the modal in a default loading state, update it from loading to success, or loading to failure.
Testing
Edge Cases
There are several cases where the app may generate an unexpected error or get caught in an infinite loop. This section will contain a short description of how each one is handled in background.js and content.js.
One error occurs due to API calls being asynchronous and time-gated. You can have multiple calls pending simultaneously from multiple tabs — while this is possible to handle, it requires significantly more work. For this situation, we limit the app to a maximum of 1 call at a time. We use storage to keep track of the boolean in_progress. Set it to true when the call is fired, set it back to false after the entire process is complete. Any attempts to re-call the API while in_progress is true is nullified.
Another error occurs when injecting duplicate content scripts on the same page. We can solve this by keeping track of an injected_tabs array in the background script, and only injecting if it does not contain the tab id. As an added measure, we also do a null check at the top of the content script.
One last error occurs when a content script generates an exception that interrupts the normal flow of the app. Add a callback with every injection, _=>{chrome.runtime.lastError, that will simply read and ignore this type of error instead of passing it down the call stack.
You can get creative with bug fixes, handling your edge cases with unique and hacky solutions. Just be sure not to stray too far from the overall app design, and test thoroughly before publishing.
Conclusion
There are surprisingly few limitations to what a Chrome extension can do, with a vast ecosystem of apps in the Chrome Web Store. This guide attempts to outline key points from the official documentation. When you are ready to publish, you can use similar apps to provide guidelines on how to market your app.
