內容腳本 | Quasar 框架

Quasar CLI with Vite - @quasar/app-vite

Content Scripts

src-bex/my-content-script.js is essentially a standard content script and you are welcome to use it as such. Content scripts are able to access the DOM of the underlying webpage and thus you are able to manipulate the content of said page.

提示

您可以有多個內容腳本，並使用您想要的名稱 (包含重新命名預設的 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 的用武之地。

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