搜索网页 Chrome 扩展上的所有单词

Question

我正在尝试创建一个 chrome 扩展程序来审查网站上的某些字词。因此，我需要搜索用户当前网站上的所有单词并找到不好的单词。有没有办法做到这一点？我搜索了 Chrome 扩展文档以及 StackOverflow，但找不到解决方案。

感谢您的帮助。

Answer 1

是的，您可以使用content script 执行此操作。由于问题说“审查某些单词”，您似乎想先找到一些特定的单词（搜索），然后可能替换或隐藏它们（修改）。所以我会在这个用例的情况下回答。

步骤 1. 创建扩展 manifest.json 文件。这是一个最小的例子：

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

注意密钥content_scripts。此配置指定：

• 什么 在浏览器选项卡中加载脚本，即加载一个名为“content-script.js”的文件
• 何时加载此脚本，基于浏览器选项卡 URL 的 match pattern。我在这里使用<all_urls> 来表示“为每个 URL 模式加载内容脚本”，但您可以将其限制为仅在特定域上工作，具体取决于浏览器扩展的预期行为。也将域名放在"host_permissions"。

后续步骤将在 content-script.js 中进行。 此示例将引用 <body/> 标记及其内部文本。要在文档标题或属性中包含文本（例如图像替代文本），请进一步扩展这些步骤。

第 2 步（选项 A）。仅在页面上查找单词，以采取一些后续非修改操作。

页面上文本的基本搜索可能如下所示：

document.body.innerText

它给出了一个字符串，表示当前文档正文中的文本。如果用例是确定页面上是否存在单词 (y/n) 或计算正文中单词的出现次数 (#)，则可以通过检查此字符串来完成，例如

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

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

在此检查之后，可能会显示警报或类似内容，现在可以根据此搜索结果进行检查。但是，出于审查的目的，您可能希望替换页面上的单词，并且需要遵循 B 选项。

第 2 步（选项 B）。 搜索并修改页面文本。

这需要知道文本在正文中的位置才能替换它，这需要不同的方法。这是一个非常幼稚的尝试：

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

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

我鼓励您改进此方法以解决各种极端情况；当定位浏览器中所有可能的 URL 时，这种简单的方法很容易失效。我会推荐例如迭代正文的子节点并在子节点中进行替换，而不是整个文档正文节点。