javascript - 如何让所有帧访问一个全局变量

Question

我正在开发一个 Chrome 扩展，需要我的内容脚本来访问网页的所有框架，以便检测某些特定字段。

一旦检测到，我将尝试将该字段元素存储在其在全局对象中的相应属性中。问题是，如果元素都位于不同的 iframe 中，每个元素都会获得该脚本的副本并填充它自己的对象副本，而不是一个单一的全局对象。

有没有办法让对象有一个全局实例，并在每次检测到字段时将值附加到其属性？

例如:

原始对象

{
    userName: [],
    email: []
}

在 iframe1 中检测到用户名字段

{
    userName: [<input id="username">...</input>],
    email: []
}

在 iframe2 中检测到电子邮件字段

{
    userName: [],
    email: [<input id="email">...</input>]
}

期望的结果

{
    userName: [<input id="username">...</input>],
    email: [<input id="email">...</input>]
}

Answer 1

通过扩展消息传递到后台脚本来组织通信会更加安全可靠。 content script实例运行在主页面和所有iframe中，主框架等待数据，frames中的其他框架通过后台页面中继发送数据。

内容脚本:

if (window === top) {
  // main page
  const data = {};
  chrome.runtime.onMessage.addListener(msg => {
    Object.assign(data, msg.data);
    if (data.email && data.username) {
      console.log('Got both values', data);
    }
  });
} else {
  // inside a frame
  const data = {};
  for (const id of ['username', 'email']) {
    const el = document.getElementById(id);
    if (el) data[id] = el.value; 
  }
  if (Object.keys(data).length)
    chrome.runtime.sendMessage({data});
}

background script :

chrome.runtime.onMessage.addListener((msg, sender) => {
  // message from a frame?
  if (msg.data && sender.frameId) {
    // relay it to the main page (frameId: 0)
    chrome.tabs.sendMessage(sender.tab.id, msg, {frameId: 0});
  }
});