背景腳本 | Quasar Framework

Quasar CLI with Vite - @quasar/app-vite

背景腳本

src-bex/background-script.js 本質上是一個標準的背景腳本，您可以隨意使用它。背景腳本可以與您的 BEX 下運行的**所有**網頁、開發者工具、選項和彈出視窗進行通訊。

這個檔案的額外好處是這個功能

import { bexBackground } from 'quasar/wrappers'

export default bexBackground((bridge, activeConnections) => {
  //
})

此功能透過 Quasar BEX 建置鏈自動調用，並注入一個橋樑，該橋樑在 BEX 的所有部分之間共享，這表示您可以與 BEX 的任何部分進行通訊。

bridge 參數是用於通訊的橋樑。activeConnections 參數提供透過橋樑註冊的所有 BEX 連線的地圖，即同一個 Quasar 應用程式使用的所有網頁、選項、彈出視窗和開發者工具 BEX。

例如，假設我們想要監聽網頁瀏覽器中開啟的新分頁，然後在我們的 Quasar 應用程式中對其做出反應。首先，我們需要監聽新分頁的開啟並發出一個新事件來告知 Quasar 應用程式發生了這件事。

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  bridge.send('bex.tab.opened', { url: tab.url })
})

然後在我們的 Quasar 應用程式中，我們會在我們的元件生命週期鉤子之一中監聽它，就像這樣。

import { useQuasar } from 'quasar'
import { onBeforeUnmount } from 'vue'

export default {
  setup () {
    const $q = useQuasar()

    // Our function which receives the URL sent by the background script.
    function doOnTabOpened (url) {
      console.log('New Browser Tab Openend: ', url)
    }

    // Add our listener
    $q.bex.on('bex.tab.opened', doOnTabOpened)

    // Don't forget to clean it up
    onBeforeUnmount(() => {
      $q.bex.off('bex.tab.opened', doOnTabOpened)
    })

    return {}
  }
}

瀏覽器擴充功能背景腳本可以使用各種各樣的事件 - 如果您嘗試在這個領域做一些事情，Google 是您的好朋友。

如果您想以某種方式修改底層網頁內容怎麼辦？這就是我們使用內容腳本的地方（例如 my-content-scripts.js）。讓我們在下一節中看看這個。

抓到錯誤了嗎？在瀏覽器中編輯此頁面