內容掛鉤 | Quasar 框架

Quasar CLI 搭配 Webpack - @quasar/app-webpack

內容 Hook

src-bex/js/content-hooks.js 本質上是一個標準的內容腳本，您可以隨意使用。內容腳本能夠存取底層網頁的 DOM，因此您可以操作該網頁的內容。

此檔案的額外好處是這個函式

import { bexContent } from 'quasar/wrappers'

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

此函式會透過 Quasar BEX 建置鏈自動呼叫，並注入一個橋樑，該橋樑在您的 Quasar App 實例與 BEX 的背景腳本之間共用。

例如，假設我們想要對 Quasar App 上按下的按鈕做出反應，並醒目提示底層網頁上的一些文字，這將透過內容腳本來完成，如下所示

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-hooks 的用武之地。

發現錯誤？在瀏覽器中編輯此頁面