Building a Chrome-extension to keep track of visited pages with chat-GPT.

February 22, 2023

When browsing the web, it can be frustrating to not be able to quickly identify which links you’ve already visited in Google search results. This can make it difficult to keep track of where you’ve been and can slow down your browsing experience.

Creating a Chrome extension can be a powerful way to customize your browsing experience and add functionality to the browser. With a few lines of code, you can manipulate the behavior of visited pages and make the web work the way you want it to.

To create a simple Chrome extension you need to change the CSS of a visited page, you don’t need to use any APIs. You can accomplish this by using the browser’s built-in content script functionality.

Here are the steps to create a simple Chrome extension to change the CSS of a visited page:

Create a new folder for your extension and create a manifest file.

The manifest file is a JSON file that tells Chrome about your extension and what it does. You’ll need to include some basic information like the name, version, and description of your extension.

In the manifest file, specify the URL(s) of the webpage(s) you want to modify. You’ll also need to specify a content script file that will run on the page.

   {
  "name": "Change visited page titles in Chrome",
  "version": "1.0",
  "manifest_version": 3,
  "description": "Changes the color of visited links",
  "permissions": ["activeTab"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "css": ["visited.css"]
    }
  ]
}

Create the content script file and add your CSS code to it.

For example, you could change the background color of the visted pages by adding the following CSS code:

a:visited h3{
    background-color: yellow !important;
}
a h3 { 
    background-color: white;
}

Load extension into Chrome

Load your extension into Chrome by going to the Extensions page, enabling Developer mode, and clicking the “Load unpacked” button. Select the folder containing your extension and it will be loaded into Chrome. Once you’ve loaded your extension, it will automatically modify the CSS of the specified webpage(s) whenever they are visited.

With this method, you can create a simple Chrome extension to change the CSS of a visited page in under 10 minutes without needing to use any APIs or write any complex code. It’s a great way to customize the appearance of your visited websites and make the web work the way you want it to.

The result of the chrome extension