扩展：如何拦截 AJAX 响应？

Question

由于扩展程序无法访问unsafeWindow，就像 Firefox 一样，要挂接到 DOM 脚本，我是否正在寻找其他想法，所以我来寻求帮助！

如何使用一些代码注入 DOM 并将截获的响应发送到后台页面，然后在调用内容脚本进行最终处理之前进行一些初始处理。完成后，它会以修改后的响应或原始响应（视情况而定）响应后台，然后后台页面将响应发送回 DOM，DOM 将其处理给 DOM 脚本响应函数。
这只是一个问题，后台页面无法与 DOM 通信。

我做了一个小测试，注入了一些代码，在那里我向控制台输出了一些东西并发出了警报。结果并不好，因为警报触发但控制台为空 - 甚至没有错误，这让我想知道 - 什么控制台收到了输出？

function injectCode(fn){ // Executing an anonymous script
     var script = document.createElement('script');
     script.type = 'application/javascript';
     script.textContent = '(' + fn + ')();';
     document.documentElement.appendChild(script); // run the script
     document.documentElement.removeChild(script); // clean up
  }
var code = function(){
  console.log('dom',window);
  alert('code injected');
}
injectCode(code);

我还尝试了 addEventListener 和 DOMAttrModified DOMSubtreeModified DOMNodeInserted，当 DOM ajax 响应被完全解析但都未能触发时，DOM 元素会发生变化。

我是否正在尝试做不可能的事情？

Answer 1

在继续之前，请确保您了解script contexts in an extension 之间的区别。

要从后台页面注入脚本，您必须执行一个内容脚本，然后由他注入上述脚本在你的问题中/here。

示例（使用chrome.tabs.executeScript）：

// null = current active tab
// Simple code, background:
chrome.tabs.executeScript(null, {
   code: [
    'var s = document.createElement("script");',
    's.textContent = "console.log(window);";',
    '(document.head||document.documentElement).appendChild(s);',
    's.parentNode.removeChild(s);'
   ].join('\n')
});

我可以想象这种方法不适用于大量代码。对于一组预定义的脚本，您可以使用两个脚本：代码本身和辅助脚本：

// config.js
var fn_code = function() {
    console.log(window); ....
};
// helper.js
var s = document.createElement('script');
s.textContent = '(' + fn_code + ')();';
(document.head||document.documentElement).appendChild(s);
s.parentNode.removeChild(s);

// Background:
chrome.tabs.executeScript(null, {file: 'config.js'}, function() {
    chrome.tabs.executeScript(null, {file: 'helper.js'});
});

注意：我没有直接链接到“config.js”，因为在使用manifest version 2时会导致使用复杂化，请参阅"web_accessible_resources"。

---

前面的方法只展示了如何在一个方向（背景->页面）执行代码。如果需要从注入的脚本中激活后台功能，则必须定义并监听自定义事件处理程序。见this answer + demo。

---

由于代码是注入的，所以在页面范围内运行，所以需要在页面查看控制台。

当chrome.tabs.executeScript无法执行内容脚本时（例如，因为扩展程序没有访问某个页面的权限），后台页面的控制台会记录一个错误。关注these steps即可访问此控制台。