在 运行 来自 Chrome 扩展的自定义脚本之后初始化一个实例？

Question

我想从我的 contentScript.js.

初始化我的 customScript.js 中的一个实例

我关注了，但仍有疑问

这是我的代码 →

background.js

chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.executeScript(tab.id, {
       file: 'contentScript.js',
    })
})

browser.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.subject === 'animalInit') animal.init()
})

manifest.json

{
  ...
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "browser_action": {},
  "permissions": ["activeTab", "https://*/*", "http://*/*"],
  "web_accessible_resources": ["style.css", "customScript.js"],
    ...
}

customScript.js

function animalClass() {
    this.init = function() {
        console.log('animal.init()')
    }
}

var animal = new animalClass()
window.animal = animal

contentScript.js

const body = document.getElementsByTagName('body')[0]
const button = document.createElement('button')
body.appendChild(button)

button.addEventListener('click', function() {
    chrome.runtime.sendMessage({ subject: 'animalInit' })
})

我目前收到错误 animal 未定义。

我基本上想 运行 customScript.js 中的函数 animal.init() 单击 contentScript.js 中的 button。

不知道这怎么可能。有什么想法吗？

Answer 1

找到解决方案。我正在使用 parcel-bundler，所以导入和导出工作正常。

我所做的只是在 contentScript.js 中导入 customScript.js 并从那里调用它。

background.js

chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.executeScript(tab.id, {
        file: 'contentScript.js',
      })
})

manifest.json

{
  ...
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "browser_action": {},
  "permissions": ["activeTab", "https://*/*", "http://*/*"],
  "web_accessible_resources": ["style.css", "customScript.js"],
    ...
}

customScript.js

function animalClass() {
    this.init = function() {
        console.log('animal.init()')
    }
}

var animal = new animalClass()
window.animal = animal
module.exports = animal

contentScript.js

import animal from './customScript.js'

const body = document.getElementsByTagName('body')[0]
const button = document.createElement('button')
body.appendChild(button)

button.addEventListener('click', function() {
    animal.init()
})