Case study 2 – creating a Chrome extension using AI
In this section, we will utilize ChatGPT to rapidly develop a custom Chrome extension. We will then direct it to build the core functionality such as content scripts, background scripts, and UI elements to create a simple but useful extension.
For this example, we will make a simple Chrome extension that, when activated, will display a popup with an input field to display some text and a button. The button, when clicked, will highlight all instances of that text on the site on the selected tab.
Although you don’t need to know how to program, it’s useful to know that a Chrome extension needs a manifest and that it needs to be version 3. This is important because we will be using the free ChatGPT, which uses GPT-3.5. As you know, it doesn’t have access to the internet, and it has been trained with data up to 2021. At that time, the manifest version 3 was in beta. Thus, by default, ChatGPT would create code based on version 2 of the manifest.
Prompt:
Write the code for a Chrome extension in which the user can type some text. If that text exists in the page in the current tab, the extension will highlight it in all instances that it appears. Use manifest version 3. Do you understand?
Response:
Yes, I understand. You want to create a Chrome extension using Manifest V3 that allows the user to input some text. The extension should then search the current tab's content for instances of that text and highlight them if found. Here's a basic outline of the code you can use to achieve this:
Create the Manifest File (manifest.json):
{
   "manifest_version": 3,
   "name": "Text Highlighter",
   "version": "1.0",
   "permissions": ["activeTab"],
   "background": {
      "service_worker": "background.js"
   },
   "browser_action": {
      "default_popup": "popup.html",
      "default_icon": {
         "16": "images/icon16.png",
         "48": "images/icon48.png",
         "128": "images/icon128.png"
      }
   }
}
Create the Popup HTML (popup.html):
<!DOCTYPE html>
<html>
<head>
   <title>Text Highlighter</title>
   <style>
      body {
         width: 200px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <h2>Highlight Text</h2>
   <input type="text" id="searchText" placeholder="Enter text">
   <button id="highlightButton">Highlight</button>
   <script src="popup.js"></script>
</body>
</html>
Create the Popup JavaScript (popup.js):
document.getElementById('highlightButton').addEventListener('click', () => {
   const searchText = document.getElementById('searchText').value;
   if (searchText) {
      chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
         const activeTab = tabs[0];
         chrome.scripting.executeScript({
            target: { tabId: activeTab.id },
            function: highlightText,
            args: [searchText],
         });
      });
   }
});
function highlightText(searchText) {
   const regex = new RegExp(searchText, 'gi');
   const elements = document.querySelectorAll('*:not(script):not(style)');
   for (const element of elements) {
      if (element.innerHTML.match(regex)) {
         const html = element.innerHTML.replace(regex, '<span style="background-color: yellow;">$&</span>');
         element.innerHTML = html;
      }
   }
}
Create the Background JavaScript (background.js):
// Background script is required for Manifest V3
Prepare Images:
Place icon images in the "images" folder with filenames "icon16.png", "icon48.png", and "icon128.png".
This code provides a basic structure for your Chrome extension. When the user enters some text and clicks the "Highlight" button, the extension searches the current tab's content for instances of the text and highlights them with a yellow background.
Please note that this is a simple implementation and might need adjustments and optimizations based on your specific use case and requirements. Since it didn’t provide any code for the background.js file, we need to ask ChatGPT why.
Prompt:
Do I need some code for the background.js file?
Response:
Apologies for any confusion. In this specific case, since you're not using any background functionality, you don't actually need any code in the background.js file. You can keep it empty, as shown in the code snippets I provided earlier. The background script is required in Manifest V3, but if your extension doesn't require any background functionality, you can leave the background script file empty. The key logic for searching and highlighting text is handled in the popup.js file using the chrome.scripting.executeScript function. So, your extension structure will include: 1.manifest.json (with the required permissions, browser action, and popup details) 2.popup.html (the HTML for the popup interface) 3.popup.js (the JavaScript for handling popup interactions) 4.background.js (empty, since you don't require background functionality) Images for your extension icon (in the "images" folder as mentioned) This should work for your specific use case. If you later decide to add more complex functionality that requires background processes, you can modify the background.js file accordingly.
We will delete the default_icon parameter to avoid having to create the icons for the extension. If you prefer, you can still make an image for the icons.
Then, we need to ask ChatGPT for instructions on what to do next.
Prompt:
What do I need to do to make this Chrome extension?
Response:
To turn the code provided into a functional Chrome extension, follow these steps:
1.Create the Extension Folder: Create a new folder for your extension. Name it something like "TextHighlighterExtension".
2.Add Files to the Folder: Inside the extension folder, add the following files:
a.manifest.json (with the content mentioned in previous responses)
b.popup.html (with the HTML content mentioned in previous responses)
c.popup.js (with the JavaScript content mentioned in previous responses)
d.An "images" folder containing the icon images (icon16.png, icon48.png, icon128.png)
3.Load the Extension: Open Google Chrome and go to the address chrome://extensions/.
4.Enable Developer Mode: Toggle on the "Developer mode" switch located at the top-right corner of the extensions page.
5.Load Your Extension: Click the "Load unpacked" button and select your extension folder ("TextHighlighterExtension").
6.Test the Extension: After loading, you should see your extension's icon in the Chrome toolbar. Click the icon to open the popup with the text input field and highlight button. Enter some text and click the "Highlight" button to test the highlighting functionality.
Remember that this is a basic implementation and doesn't include all possible features or error handling. You might need to refine and expand upon this code to meet your specific requirements. If you encounter any issues during testing, you can inspect the console in the Chrome Developer Tools for debugging information.
Please note that my responses are based on the state of technology and Chrome extensions as of September 2021. If there have been any changes or updates since then, the steps might vary slightly. Following these steps, we get the following error in the Chrome Extensions tab:
Figure 7.3: Error message in the Chrome Extensions tab
Thus, using the error as a prompt, we get the following prompt:
Prompt:
'browser_action' requires manifest version of 2 or lower.
Here is the response:
Response:
I apologize for the confusion. You are correct; the 'browser_action' property is used in Manifest V2 for Chrome extensions. In Manifest V3, you'll use the 'action' property instead. Let's update the code accordingly.
Here's the updated version of the 'manifest.json' file for your Chrome extension using Manifest V3:
{
   "manifest_version": 3,
   "name": "Text Highlighter",
   "version": "1.0",
   "permissions": ["activeTab"],
   "background": {
      "service_worker": "background.js"
   },
   "action": {
      "default_popup": "popup.html",
      "default_icon": {
         "16": "images/icon16.png",
         "48": "images/icon48.png",
         "128": "images/icon128.png"
      }
   }
} The rest of the code (popup.html, popup.js, and background.js) remains the same. After updating the manifest, load your extension as described in the previous steps. The extension icon should now appear in the Chrome toolbar, and clicking it will open the popup where you can input text to highlight.
The only thing that changed was that browser-action changed to action in the manifest. Now, when we try again, we can see that it works just fine.
Now, we can test the Chrome Extension. If we test the extension on a CNN page to highlight human, we get the following:
Figure 7.4: The Chrome extension in action
Therefore, it’s working as expected. However, if you input a different text, it will keep the previous text highlighted along with the matches for the new text. This is something that you would like to fix. To do that, you need to prompt ChatGPT to remove the highlighted text before highlighting the new one.
Another thing you might want to enhance is the styling of the content of the popup.
With the successful creation of a functioning Chrome extension, we have now completed our two hands-on case studies. And with that, we have reached the end of this chapter exploring the transformative impact of AI on software engineering.
