内容脚本在网页上下文中运行。每个运行此扩展程序的标签页都会有一个新的内容脚本实例。

¥The content script(s) run in the context of the web page. There will be a new content script instance per tab running the extension.

通信 / 事件(Communication / Events)

¥Communication / Events

你可以通过我们的 BEX 桥接器 在应用的 BEX 部分（后台、内容脚本和 devtools/popup/options 页面）之间进行通信。

¥You communicate between the BEX parts of your app (background, content scripts & devtools/popup/options page) through our BEX Bridge.

注册内容脚本(Registering a content script)

¥Registering a content script

你的 /src-bex/manifest.json 是定义 BEX 的核心。你还可以在此处定义内容脚本：

¥Your /src-bex/manifest.json is the central point that defines your BEX. This is the place where you also define your content script(s):

"content_scripts": [
  {
    "matches": [ "<all_urls>" ],
    "css": [ "assets/content.css" ],
    "js": [ "my-content-script.ts" ]
  }
]

案例研究(Case study)

¥Case study

假设我们想要对 Quasar 应用上按下的按钮做出响应，并在底层网页上高亮某些文本，这可以通过内容脚本完成，如下所示：

¥Let’s say we want to react to a button being pressed on our Quasar App and highlight some text on the underlying web page, this would be done via the content scripts like so:

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;
}

/**

 * Importing the file below initializes the content script.

 *  * Warning:

 *   Do not remove the import statement below. It is required for the extension to work.

 *   If you don't need createBridge(), leave it as "import '#q-app/bex/content'".
 */
import { createBridge } from '#q-app/bex/content'

// The use of the bridge is optional.
const bridge = createBridge({ debug: false })

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

bridge.connectToBackground()
  .then(() => {
    console.log('Connected to background')
  })
  .catch(err => {
    console.error('Failed to connect to background:', err)
  })

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

¥Content scripts live in an isolated world, allowing a content script to makes changes to its JavaScript environment without conflicting with the page or additional content scripts.

隔离环境不允许内容脚本、扩展程序和网页访问其他组件创建的任何变量或函数。这也使内容脚本能够启用网页无法访问的功能。

¥Isolated worlds do not allow for content scripts, the extension, and the web page to access any variables or functions created by the others. This also gives content scripts the ability to enable functionality that should not be accessible to the web page.