内容脚本包- Chrome扩展程序之间的通信

Question

我有一个内容脚本，它向网页中注入一个iframe。

content.js

var iframe = document.createElement('iframe');
    iframe.id = "frame";
    iframe.style.cssText = "position:fixed;top: 15px;right: 15px;width: 250px;height: 245px;overflow: hidden;background-color:#FFFFFF;border-radius: 5px;";
    iframe.src = chrome.runtime.getURL('frame.html');
    document.body.appendChild(iframe);

iframe显示一些文本值，有一个提交和关闭按钮。

部分frame.html

<div class="header">
   <span class="close">Name</span>
   <span class="close-btn" id="close-btn">&times;</span>
</div>
<div class="details-container">
    <span class="label">First Name : </span> 
    <span id="fname" type="text" ></span>
</div>
<div class="details-container">
    <span class="label">Last Name : </span> 
    <span id="lname" type="text" /></span>
</div>
<div class="btn-details-container">
    <button class="copy" id="copy-name">Copy</button>
</div>

frame.html有frame.js链接到它。

我想在这里做两件事。

1. 当用户单击iframe上的“关闭”按钮时关闭/移除/隐藏iframe(# close -btn)
2. span中要动态设置的名字和姓氏的值(从当前网页的DOM中提取)

问题：

1)我不知道如何将frame.html上的单击事件与内容脚本相关联以关闭iframe(无法在frame.js和content.js之间建立通信)

2)无法将span.textContent设置为#fname和#lname，因为frame.js无法读取网页DOM。

Answer 1

Chrome和基于铬的浏览器

使用chrome.tabs.sendMessage与iframe的所有者选项卡进行通信，可以在iframe内使用chrome.tabs.getCurrent检索该选项卡。

content.js：

var FRAME_URL = chrome.runtime.getURL('frame.html');
var iframe = document.createElement('iframe');
iframe.src = FRAME_URL;
document.body.appendChild(iframe);
    
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  switch (msg.cmd) {
    case 'close':
      iframe.remove();
      iframe = null;
      break;
    case 'getData':
      sendResponse([
        ['fname', document.querySelector('.web.page.selector.for.fname').textContent],
        ['lname', document.querySelector('.web.page.selector.for.lname').textContent],
      ]);
      break;
  }
});

iframe.js：

tellParent({cmd: 'getData'}, data => {
  for (const [id, val] of data) {
    document.getElementById(id).textContent = val;
  }
});

document.querySelector('.close-btn').onclick = () => {
  tellParent({cmd: 'close'});
};

function tellParent(msg, callback) {
  chrome.tabs.getCurrent(tab => {
    chrome.tabs.sendMessage(tab.id, msg, {frameId: 0}, callback);
  });
}

Firefox

火狐的内部架构是不同的，所以它运行这样的iframes具有与内容脚本相同的限制，并且不能访问chrome.tabs。解决办法是通过后台脚本发送消息。

• iframe.js需要一个不同的tellParent： 函数tellParent(msg，回调){ chrome.runtime.sendMessage(msg，回调)；}
• background.js chrome.runtime.onMessage.addListener((msg，发件人，sendResponse) => { if (sender.frameId) { chrome.tabs.sendMessage(sender.tab.id，msg，{frameId: 0}，sendResponse)；返回true；} })；