Question

我需要在我访问的任何网站上突出显示某些特定的单词。这样我就不必手动使用control + f并在网页上找到单词。

我看过一些chrome插件（突出显示：查找并标记单词），但并非在所有网站上都能找到，可能仅适用于允许报废的网站。我有一些内部网站，每次都需要对同一组单词进行ctrl + f。

正是这个插件是按照我的要求，但这不适用于内部网站或受限制的网站。我知道如何创建扩展名，但不确定是什么逻辑或一段代码就能完成这项工作。

当我访问网站或任何URL时，插件中存储的单词会随着ctrl + f高亮显示。

Answer 1

这是一个开始。未经充分测试。

  let searchTerms = ['law', 'software', 'news', 'health'];

  let elems = document.querySelectorAll("h1, h2, h3, h4, h5, h6, p, a")
  for (let i = 0, total = elems.length; i < total; i++) {
    let element = elems[i];
    if (element && element.innerText) {
      let innerText = element.innerText;
      for (let j = 0; j < searchTerms.length; j++) {
        const reg = new RegExp(searchTerms[j], 'gi')
        const matches = innerText.toLowerCase().match(reg) || []
        if (matches.length) {
          for (let n = 0; n < matches.length; n++) {
            element.innerHTML = innerText.replace(reg, '<span style="color:red">' + searchTerms[j] + '</span>');
          }
        }
      }
    }
  }

Answer 2

我将使用chrome.storage.sync.set API chrome.storage.api。您可以设置要搜索的文本并将其存储在变量中，然后每次使用扩展名时，都可以使其引用该变量。没有任何代码，我将失去自己的经验。因此，我在其中列举了一些示例，向您展示了我如何使用chrome.storage api，以便也许您也可以找到它。

这是我的代码的一个片段，它是一个chrome扩展程序，它向本地存储添加了一个url，这样，当我登录防火墙时，我不必不断复制想要的字符串/文本输入。

const Koa = require('koa'),
      Router = require('koa-router')

const app = new Koa(),
      router = new Router()

let users = [
  {
    name: 'Leon Gaban',
    email: 'quxquz@gmail.com'
  },
  {
    name: 'Juan Gonzales',
    email: 'foobaz@gmail.com'
  },
  {
    name: 'Foo Bar',
    email: 'foobar@gmail.com'
  }
]

// ? Home Route
router.get('/', ctx => {
  ctx.body = "test"
})

// ? GET user
router.get('/user/:id',  ctx => {
  ctx.body = users[ctx.params.id]
})

app
  .use(router.routes())
  .use(router.allowedMethods())
  .use(require('koa-body')())

app.listen(4444)

}）

具有自动搜索并突出显示本地存储/chrome.storage中存储的单词的功能。

我想构建一个Chrome扩展程序，通过该工具为我访问的所有网站添加/存储的单词自动执行Ctrl + f

2 个答案: