javascript - 如何将数据从content.js发送到popup.js？-6ren

javascript - 如何将数据从content.js发送到popup.js？

转载作者：行者123 更新时间：2023-12-03 00:43:12

我想将数据从 content.js 发送到 popup.js，content.js 只是获取文档标题，然后将其传递给 popup.js。

那么 popup.js 将更改 popup.html DOM。

manifest.json:

    {
      "browser_action": {
        "default_icon": {
          "64": "icons/icon64.png"
        },
        "default_popup": "popup.html"
      },
      "content_scripts": [
        {
          "matches": [
            "<all_urls>"
          ],
          "js": [
            "content.js"
          ],
          "run_at": "document_end"
        }
      ],
      "permissions": [
        "tabs",
        "activeTab",
        "*://*/*"
      ]
    }

popup.html:

    <html>
    <body>
      <span class="info">TAB TITLE</span>
      <script src="popup.js"></script>
    </body>
    </html>

内容.js:

    console.log('CONTENT IS RUNNING')

    var getTitle = function() {
      return document.title
    }

    chrome.runtime.sendMessage(getTitle());

popup.js:

    console.log('POPUP IS RUNNING')

    chrome.runtime.onMessage.addListener(
      function(response, sender, sendResponse) {

        var title  = response;
        return title;
      }
    );

    document.querySelector('.info').innerHTML = title; // error: title is not defind

在 popup.js 中，响应参数没有给出文档标题。

最佳答案

弹出窗口仅在显示时运行(并存在)。
每当加载网页时，声明的内容脚本就会运行。
这两个事件可能随时发生，因此不能保证它们同时发生。

解决方案 1:不声明内容脚本，而是手动运行
popup.js:
```
chrome.tabs.executeScript({code: 'document.title'}, ([title]) => {
  document.querySelector('.info').textContent = title;
});
```
请注意我们在这里如何使用 textContent，它是安全的，与可能导致 XSS 的 innerHTML 不同(默认情况下它会被阻止，但如果您放宽默认 CSP 则不会)。

解决方案 2:通过 chrome.tabs API 直接读取标签页标题

popup.js:

chrome.tabs.query({active: true, currentWindow: true}, ([tab]) => {
  document.querySelector('.info').textContent = tab.title;
});

<小时/>

两种解决方案的manifest.js:

{
  "browser_action": {
    "default_icon": {
      "64": "icons/icon64.png"
    },
    "default_popup": "popup.html"
  },
  "permissions": ["activeTab"]
}

注意我们只需要 "activeTab" permission因此安装时不会显示权限警告。

关于javascript - 如何将数据从content.js发送到popup.js？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53350599/