使用 chrome 存储事件侦听器更改 chrome 扩展 html答案

【问题标题】：Changing chrome extension html using chrome storage event listener使用 chrome 存储事件侦听器更改 chrome 扩展 html
【发布时间】：2019-09-21 03:11:57
【问题描述】：

使用此代码，我想为 chrome 存储更新时创建一个事件侦听器。

我希望在触发事件侦听器时发生两件事：

代码将控制台记录更新的值。这部分有效。
我希望扩展的 HTML（单击图标时在角落打开的文档）更新和呈现 chrome 存储中的数据值。这是我需要帮助的部分。

chrome.storage.onChanged.addListener(function(changes, namespace) {
      //part 1
      console.log('New data type is %s. New value is %s', 
      changes['type'].newValue, changes['data'].newValue)

      //part 2
      document.getElementById('output').innerHTML = 
      changes['data'].newValue
});

我意识到在函数内部调用“document”没有意义，但我不确定如何继续让它在扩展的 HTML 中呈现。

我尝试为访问上下文菜单时创建一个事件侦听器（用户可以更新 chrome 存储，但单击上下文菜单中的按钮），但我无法让它工作。此外，该事件应在 chrome 存储更新时触发，而不是在简单访问上下文菜单时触发。

现在我收到此错误：事件处理程序中的错误：TypeError：无法设置属性 'innerHTML' of null

（有一个 id 为“输出”的元素，所以这不是问题）

感谢您的帮助！

【问题讨论】：

标签： google-chrome google-chrome-extension event-listener google-chrome-storage

【解决方案1】：

后台脚本在单独的隐藏后台页面中运行。它与browserAction或pageAction弹出页面无关，它没有任何弹出页面元素，除了后台脚本的自动生成的脚本标签外，它的DOM是空的。

弹出窗口也是一个单独的页面，就像任何普通页面一样，它的环境/DOM 仅在页面显示时才存在。未显示时无法修改。在一般情况下，您也无法从代码中显示它。

解决方案 1

使用标准 <script src="popup.js"></script> 标记将 onChanged 侦听器放入 popup.html 中加载的 popup.js 脚本（在 manifest.json 中声明为 "browser_action": {"default_popup":"popup.html"}）。如果显示弹出页面，它将更新弹出页面，并在弹出窗口打开时显示当前值，使用 chrome.storage.local.get 或 chrome.storage.sync.get 读取它们，具体取决于您在扩展程序中使用的存储。

解决方案 2

使用chrome.notifications API 在屏幕底部显示一个小通知，另请参阅official demo extensions。

解决方案 3

使用chrome.browserAction.setBadgeText 在扩展图标下方显示温度等短文本。不要忘记在 manifest.json 中至少声明 "browser_action": {}。

【讨论】：