Question

我想将数据从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>

content.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中，响应参数未给出文档标题。

Answer 1

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

解决方案1：不要声明内容脚本，而是手动运行它

popup.js：
```
chrome.tabs.executeScript({code: 'document.title'}, ([title]) => {
  document.querySelector('.info').textContent = title;
});
```
请注意我们在这里如何使用textContent，这是安全的，不像innerHTML会导致XSS（默认情况下会被阻止，但如果您放松了默认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，因此安装时不会显示权限警告。

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

1 个答案: