CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-extension
Scollier
Scollier

Reputation: 631

Search All Words on Webpage Chrome Extension

I'm trying to create a chrome extension that censors certain words on websites. Therefore, I need to search over all the words on the user's current website and find the bad ones. Is there a way to do this? I've searched on the Chrome Extension docs, along with StackOverflow, and I can't find a solution.

Thanks for any help.

Upvotes: 0

Views: 1608

Answers (1)

Neea
Neea

Reputation: 1424

Yes you can do this using a content script. Since the question says "censors certain words" seems you want to first find some specific words (search), then perhaps replace or hide them (modify). So I will answer with this use case in mind.

Step 1. create extension manifest.json file. Here is a minimal example:

{
  "name": "Example",
  "version": "1.0",
  "manifest_version": 3,
  "host_permissions": ["<all_urls>"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content-script.js"]
    }
  ]
}

Note the key content_scripts. This configuration specifies:

  • what script to load in the browser tab, i.e. load a file called "content-script.js"
  • when to load this script, based on a match pattern of the browser tab's URL. I have used here <all_urls> to say, "load the content script for every URL pattern", but you can restrict it to work only on specific domains, depending on the intended behavior of the browser extension. Also put the domains in "host_permissions".

The subsequent steps will take place in the content-script.js. This example will be in reference to the <body/> tag and its inner text. To include text inside document title, or attributes (e.g. image alt text), extend these steps further.

Step 2 (option A). Only look for words on the page, to take some subsequent non-modifying action.

A basic search for text on the page could look something like this:

document.body.innerText

Which gives a string representing the text inside the current document body. If the use case is to determine if a word exists on a page (y/n) or count occurrences of words (#) in the body text, this can be done by inspecting this string, e.g.

function inspectText(badWords){
   const bodyText = document.body.innerText;
   // implement here a word search or regex match   
   // return result
}

const wordSearchResult = inspectText(['🤬', '🤬']) // censored words!

Following this inspection, perhaps to show an alert or similar, it can now be done based on this search result. However, for purposes of censoring, you may want to replace words on the page, and will need to follow the B-option instead.

Step 2 (option B). Search and modify the page text.

This requires knowing where in the body the text exists to be able to replace it, which requires a different approach. Here is a very naive attempt:

function replaceBadWords(node, badWord, replacement){
    node.innerHTML = node.innerHTML.replaceAll(badWord, replacement);
}

// call the function to perform replacement
replaceBadWords(document.body, '🤬', '😇')

I would encourage you to improve this method to account for various edge cases; this type of simple approach breaks easily, when targeting all possible URLs in the browser. I would recommend e.g. iterating the children of the body and making replacements in the children, instead of entire document body node.

Upvotes: 3

Related Questions