内容脚本 | Quasar 框架

使用 Vite 的 Quasar CLI - @quasar/app-vite

内容脚本

src-bex/my-content-script.js 本质上是一个标准的内容脚本，您可以像使用标准内容脚本一样使用它。内容脚本能够访问底层网页的 DOM，因此您可以操作该页面内容。

提示

您可以拥有多个名称任意的内容脚本（包括重命名默认的 my-content-script.js）。每次创建新的内容脚本时，请确保在 /src-bex/manifest.json 中引用它。即使您的文件名以 .ts 结尾，也请使用 .js 扩展名。

此文件带来的额外好处是此函数

import { bexContent } from 'quasar/wrappers'

export default bexContent((bridge) => {
  //
})

此函数通过 Quasar BEX 构建链自动调用，并注入一个在 Quasar 应用实例和 BEX 的后台脚本之间共享的桥梁。

例如，假设我们想要对 Quasar 应用上的按钮按下做出反应并在底层网页上突出显示某些文本，这将通过内容脚本按如下方式完成

setup () {
  const $q = useQuasar()

  async function myButtonClickHandler () {
    await $q.bex.send('highlight.content', { selector: '.some-class' })
    $q.notify('Text has been highlighted')
  }

  return { myButtonClickHandler }
}

.bex-highlight {
    background-color: red;
}

import { bexContent } from 'quasar/wrappers'

export default bexContent((bridge) => {
  bridge.on('highlight.content', ({ data, respond }) => {
    const el = document.querySelector(data.selector)
    if (el !== null) {
      el.classList.add('bex-highlight')
    }

    // Let's resolve the `send()` call's promise, this way we can await it on the other side then display a notification.
    respond()
  })
})

内容脚本存在于一个隔离的世界中，允许内容脚本更改其 JavaScript 环境，而不会与页面或其他内容脚本冲突。

隔离的世界不允许内容脚本、扩展和网页访问彼此创建的任何变量或函数。这也使内容脚本能够启用网页无法访问的功能。

这就是 dom-script 的用武之地。

发现错误？在浏览器中编辑此页面