Quasar CLI with Vite - @quasar/app-vite
内容脚本

src-bex/my-content-script.js本质上是一个标准的内容脚本,我们欢迎你这样使用它。内容脚本能够访问底层网页的DOM,因此你能够操纵上述网页的内容。

TIP

你可以用你想要的名字拥有多个内容脚本(这包括重命名默认的my-content-script.js)。每次你创建一个新的,请确保你在/src-bex/manifest.json中引用它。即使你的文件名以.ts结尾,也要使用.js扩展名。

这个文件的额外好处是这个功能:

import { bexContent } from 'quasar/wrappers'

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

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

例如,假设我们想对Quasar App上的一个按钮作出反应,并在底层网页上突出显示一些文本,这将通过内容脚本来完成,就像这样:

// Quasar App, /src

setup () {
  const $q = useQuasar()

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

  return { myButtonClickHandler }
}
/* src-bex/assets/content.css */

.bex-highlight {
    background-color: red;
}
// src-bex/my-content-script.js:
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的作用。