2

我正在尝试将 json 格式的对象从我的 React 应用程序发送到我的 chrome 扩展开发工具。在我的 React 应用程序中，我有一个运行window.postMessage(data, '*'). 我真的不确定 background.js 和 content-scripts 之间的关系是什么。我可以通过添加内容通过 content-scripts.js 接收这些数据，window.addEventListener('message')但我不知道如何将这些数据发送到我的 devtools.js

清单.json

{
  "name": "visualize-test",
  "version": "1.0.0",
  "description": "testing chrome-ext order of execution",
  "devtools_page": "devtools.html",
  "manifest_version": 2,
  "background": {
    "scripts": [
      "background.js"
    ],
    "persistent": true
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content-script.js"]
    }
  ],
  "permissions": [
    "tabs",
    "http://*/*",
    "https://*/*",
    "file:///*"
  ]
}

这是我注入 devtools.html 的脚本文件

开发工具.js

chrome.devtools.panels.create("visualize-test", null, "devtools.html", () => {
  const port = chrome.extension.connect({
    name: "visualize-test"
  })
  port.onMessage.addListener(data => {
    console.log('RECEIVING DATA IN CONTENT-SCRIPTS: ', data)
  }
  chrome.extension.onMessage.addListener(function (e) {
    console.log('DEVTOOLS MESSAGE HANDLER: ', e)
  })
})

内容脚本.js

window.addEventListener('message', e => {
  chrome.extension.sendMessage(e, (message) => {
    console.log('Received message..sending to chrome extension: ', e.data)
  })
})

背景.js

chrome.extension.onConnect.addListener(function (port) {
  console.log('Connected to PORT: ', port)
  chrome.extension.onMessage.addListener(function (message, sender) {
    console.log('BACKGROUND.JS: ', message)
    port.postMessage(message)
  })

  port.onDisconnect.addListener(function (message) {
    console.log('PORT DISCONNECTED')
  })
})

在内容脚本中的数据处理程序运行后，我从未从我的 background.js 或 devtools.js 接收数据chrome.extension.sendMessage()

4

0 回答 0