Javascript 如何将数据从内容脚本显示到弹出窗口？_Javascript_Google Chrome Extension

Javascript 如何将数据从内容脚本显示到弹出窗口？

javascript google-chrome-extension

Javascript 如何将数据从内容脚本显示到弹出窗口？,javascript,google-chrome-extension,Javascript,Google Chrome Extension,content.js将从api获取数据，数据应该显示在popup.html中，但我似乎无法使用document.getElementById（'headline'）进行设置，因为它是null。有办法绕过它吗 manifest.json { "manifest_version": 2, "name": "AAAAA", "description": "AAAAA Descriptionnnnnn&

content.js

将从api获取数据，数据应该显示在

popup.html

中，但我似乎无法使用

document.getElementById（'headline'）

进行设置，因为它是

null

。有办法绕过它吗

manifest.json

{
  "manifest_version": 2,
  "name": "AAAAA",
  "description": "AAAAA Descriptionnnnnn",
  "version": "1.0",
  "browser_action": {
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": ["*://*/*"],
      "js": ["content.js"],
      "run_at": "document_end"
    }
  ],
  "permissions": [
    "*://*/*"
  ]
}

popup.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="headline" class="headline" style="background-color: #ccc; width: 300px;">
    This is a headline
  </div>
</body>
</html>

将数据转换为内容脚本中的对象，然后使用

chrome.storage.local.set（obj）

将其保存到本地存储（需要权限：存储）

使用将数据加载回弹出脚本中

chrome.storage.local.get(null, result => {
    for (const [key, val] of Object.entries(result)) {
        // ...
    }
});

请参见示例

将数据转换为内容脚本中的对象，然后使用

chrome.storage.local.set（obj）

将其保存到本地存储（需要权限：存储）

使用将数据加载回弹出脚本中

chrome.storage.local.get(null, result => {
    for (const [key, val] of Object.entries(result)) {
        // ...
    }
});

请参阅示例

删除

内容脚本

部分，将content.js重命名为popup.js，使用标准的

在popup.html中加载popup.js。我只是对数据进行了字符串化。因此，我将看到json而不是[object object]删除内容脚本
部分，将content.js重命名为popup.js，使用标准的在popup.html中加载popup.js，这里它似乎可以工作。我只是字符串化了数据。所以我将看到json而不是[object]