javascript - 无法从内容脚本与 Chrome 扩展程序中的弹出窗口进行通信

标签 javascript google-chrome google-chrome-extension

我正在尝试我的第一个 Chrome 扩展程序。
我偶然发现了一个问题,无法从内容脚本与弹出窗口进行通信。

上下文:
我的弹出窗口包含一些本地存储数据,我想在页面刷新/初始化时从内容脚本中检索这些数据,以便我可以在页面上使用该数据。

如果我理解 official documentation正确地说,这应该是可能的。
它说:

“从内容脚本发送请求如下所示:”

chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
  console.log(response.farewell);
});

所以我已经尝试过了,我可以看到上面的代码是从我注入(inject)的 JS 脚本(内容脚本)触发的,但我猜我没有在弹出窗口中正确地“监听它” .

这是我的代码:

内容脚本(函数在运行时运行)

function getLocalStorageItems() {
chrome.runtime.sendMessage({task: "retrieve-local"}, function(response) 
  {
    console.log(response.farewell);
  });
}

我尽可能完整地保留了示例函数。

弹出js

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => 
  {
    if ( request.task == "retrieve-local" ) {
      console.log('retrieve-local');
  }
});

list

{
  "manifest_version": 2,
  "name": "Maxxton Dev Extension",
  "description": "Extension for Maxxton Developers",
  "version": "1.0",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "index.html"
  },
  "content_scripts": [
    {
      "matches": ["*://*/*"],
      "js": ["injected.js"],
      "run_at": "document_end"
    }
  ]
}

我从未在弹出窗口中看到 console.log 被注册。

我认为这可能与我正在尝试chrome.runtime.onMessage有关,因为从弹出窗口发送消息是chrome.tabs.query。所以我尝试将其更改为 chrome.tabs.onMessage,但这也没有任何作用。

现在我认为这可能是不可能的,因为弹出窗口处于休眠/不活动状态。但我不确定。我找不到任何有关此问题的信息。

最佳答案

我用背景脚本完成了这项工作。我不知道“browser_action”是如何工作的,但是当我尝试使用“page_action”时,我注意到每当我单击按钮时都会重新创建页面(因此,如果当前没有弹出,它可能不存在并且不会监听)。

我建议您将数据保留在后台,并使内容和弹出窗口都与后台通信。

添加到您的 list :

"background": {
   "scripts": [
     //"you_probably_have_something_here_to_register_browser_action?", 
     "background_data_manager.js", //this will be your script to manage data
   ],
   "persistent": false
},

将监听器和所有处理数据的代码放入文件 background_data_manater.js 中。

要访问后台控制台,请转到 Chrome 工具并在开发者模式打开的情况下打开扩展程序页面。您将在扩展程序中看到一个有关 View 的小链接。此链接将打开后台控制台。

您应该在该控制台中看到预期的日志。

关于javascript - 无法从内容脚本与 Chrome 扩展程序中的弹出窗口进行通信,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50743736/

相关文章:

google-chrome - 'X-DevTools-Emulate-Network-Conditions-Client-Id' header key 代表什么?

javascript - Chrome 扩展消息传递 API - 检测端口何时关闭

javascript - 多功能框 multipe 关键字

javascript - 不同脚本中的不同 'click' 回调 : can I control order of execution?

javascript - 如何在 React 中正确处理非 PrivateRoutes?

javascript - 如何制作具有可变高度主体的页眉/主体/页脚 'popup' div?

javascript - 在 Chrome 中设置动画时隐藏的 Angular 落变得可见

css - chrome 22 和 css(左负)可访问性问题

google-chrome - Google Chrome 扩展程序有什么办法可以增加本地存储空间?

javascript - 有没有办法检测浏览器窗口当前是否处于事件状态?